Changing Measure definition of Vizflex chart from controller

[former_member524141]

Hi Everyone,

I am quite new to UI5 development.

I have a requirement to change the measure definition of the viz flex chart on the click of buttons, so I am trying doing it by changing it from the controller.js on the basis of conditions. But I am not sure how it can be done from controller.js.

OR should I display multiple charts one above other with different measure definitions and show/hide from them with the controller.

Please let me know how this can be achieved.

I have to change highlighted measures in the image with the click of buttons.

This is how I display the chart.


  <l:FixFlex id='chartFixFlex' minFlexSize="300">
    <l:flexContent>
     <viz:Popover id="idPopOver"></viz:Popover>
        <viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" 
              height="100%" width= "100%" vizType='dual_column'>
                  <viz:dataset>
                  <viz.data:FlattenedDataset data="{/count}">
                  <viz.data:dimensions>
                  <viz.data:DimensionDefinition name="Net Trade Sales" value="{Days}" />
                  </viz.data:dimensions>
                  <viz.data:measures>
                     <viz.data:MeasureDefinition name="Actual" value="{line1}" />
                     <viz.data:MeasureDefinition name="Budget" value="{line2}" />
                       </viz.data:measures>
                        </viz.data:FlattenedDataset>
                         </viz:dataset>
                          </viz:VizFrame>
                          </l:flexContent>
                       </l:FixFlex>

[former_member196805]

Updating measure/dimension binding at runtime meaning:

1. you must destroy the feeds and dataset which was bound to vizFrame by calling

vizFrame.destroyFeeds();
vizFrame.destroyDataset();

2. redefine the dataset and feed items for vizFrame. If you use oData as datasource, you need to fire a new batch.

3. Then rebind and refed them back to vizFrame by calling

vizFrame.vizUpdate({data: newDataset, feeds: newFeeds})

[former_member524141]

I have tried below code but it does not work.


 var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
        oVizFrame.destroyFeeds();
        oVizFrame.destroyDataset();

feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "valueAxis1",
              "type": "Measure",
              "values": ["Actual"]
            }),

      feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis2",
          " type": "Measure",
          "values": ["Outlook"]
       }),
         this.oVizFrame.addFeed(feedValueAxis);
          this.oVizFrame.addFeed(feedValueAxis2);
          oVizModel.setData(objItem);
          oVizFrame.setModel(oVizModel);

[former_member196805]

Few questions/suggestions:

1. What's the error prompt if any?

2. You already have vizFrame instance assigned to that.oVizFrame and oVizFrame, also, feeds and dataset that you have destroyed is oVizFrame, should you use oVizFrame on the feeding definition instead of using this.oVizFrame?

3. Assuming objItem exist, please try calling setData() and setModel() prior to Feeding part.

[former_member524141]

Hi @Chapman Wong, Thanks for all your help,

It is still not working, Please suggest.

1. What's the error prompt if any? - There is no error, just that legends are not changing they remain same as Actual and Budget.

2. I used oVIzFrame instead of this.oVizFrame.

3. Tried calling setData() and setModel() prior to Feeding part.

Below is my current code.

   var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");

 oVizFrame.destroyFeeds();
 oVizFrame.destroyDataset();


        oVizModel.setData(objItem);
        oVizFrame.setModel(oVizModel);

        feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "valueAxis",
              "type": "Measure",
              "values": ["Actual"]
            }),

      feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis2",
          " type": "Measure",
          "values": ["Prior"]
       }),

        feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "categoryAxis",
              "type": "Dimension",
              "values": ["Net Trade Sales"]
            }),

          oVizFrame.setVizProperties({
            plotArea: {
              isFixedDataPointSize: true,
              window: {start: "firstDataPoint", end: "lastDataPoint"},
              dataLabel: {visible: true }
            },

            valueAxis: {
              visible: true,
              label: { },
              title: {visible: true}
            },


        valueAxis2: {
          visible: true,
           label: { },
          title: {visible: true}
         },


         timeAxis: {
             label: { },
              title: {visible: false},
              interval: {unit: ''}
            },
            title: {visible: false},
            interaction: { syncValueAxis: false}
          });

          oVizFrame.addFeed(feedValueAxis);
          oVizFrame.addFeed(feedValueAxis2);
          oVizFrame.addFeed(feedCategoryAxis);

[former_member196805]

var nDataset = new sap.viz.ui5.data.FlattenedDataset({
	'dimensions' : [....],
	'measures' : [....],
	'data' : {'path' : "/...."}
});

It seems you did not update FlattenedDataset in _dataLoadSegmentGraphEBITPriorMTD. Could you please do so?

[former_member524141]

Tried Below Codes didn't work.

1.
         var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
        oVizFrame.destroyFeeds();
        oVizFrame.destroyDataset();

var nModel = new sap.ui.model.json.JSONModel({
'businessData' : objItem
});

var nDataset = new sap.viz.ui5.data.FlattenedDataset({
'dimensions' : [{'name' : 'Actual', 'value' : "{Actual}"}],
'measures' : [{'name' : 'Prior', 'value' : '{Prior}'}],
         'data' :  {'path' : "/businessData"},
});
oVizFrame.setModel(nModel);
        var feeds = [new sap.viz.ui5.controls.common.feeds.FeedItem({
                        'uid' : "valueAxis",
                      'type' : "Actual",
                   'values' : ["Actual"]
                  }), 

                new sap.viz.ui5.controls.common.feeds.FeedItem({
                 'uid' : "categoryAxis",
             'type' : "Prior",
               'values' : ["Prior"]
})];
var properties = {
valueAxis: {
title: {
visible :false
}
},
plotArea:{
dataLabel:{
visible: true
}
}
};
oVizFrame.vizUpdate({
'data' : nDataset,
'properties' : properties,
'feeds' : feeds,
});

2.

        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
        oVizFrame.destroyFeeds();
        oVizFrame.destroyDataset();
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
        var oDataset = new sap.viz.ui5.data.FlattenedDataset({
          measures: [{
        name: "Actual",
        value: "{Actual}"
      },{
      name: "Prior",
      value: "{Prioir}"
    },
      ],
        });
        oVizFrame.vizUpdate({'data': 'oDataset'})
   },

[former_member524141]

Also tried this. I am Kindda stuck over this, have tried every possible combination.

   _dataLoadSegmentGraphPriorMTD : function (data, oResponse){
     that=this;
        var obj = JSON.parse(oResponse.body);
        var oData = {};
        var objItem = new Object();
        objItem.count=[];
        oData.results = obj.d.results;
            $.each(oData.results, function(i, item) {
            item.index = i + 1;
            item.expand = false;
            item.dirtyState = false;
            item.readOnly = false;
        });
        for (i=0; i<oData.results.length; i++){
          var items=new Object();
            var str = '';
            str = oData.results[i]._ERP_SEGMENT_T_N;
            //str = str.toLowerCase();
           // str = str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
            var data=str.split(":");
           if((data[1]!="TRANSPORTATION COATING" ) &&  (data[1]!="PERFORMANCE COATING")){
              items['Days']  = data[1];
              items['line1'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAUQCWHUJVMI3OP));
              items['line2'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAUQCYJ4JTAL12V));
              objItem.count.push(items);
            }
         }
        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
      oVizFrame.destroyFeeds();
        oVizFrame.destroyDataset();
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
        //Y-axis value for line1 in graph
        feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "valueAxis",
              "type": "Measure",
              "values": ["Actual"]
            }),
        // Y-axis value for line2
      feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis2",
          " type": "Measure",
          "values": ["Prior"]
       }),
          //X-axis value
        feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "categoryAxis",
              "type": "Dimension",
              "values": ["Net Trade Sales"]
            }),
          oVizFrame.setVizProperties({
            plotArea: {
              isFixedDataPointSize: true,
              window: {start: "firstDataPoint", end: "lastDataPoint"},
              dataLabel: {visible: true }
            },
            measures : [ {
                name : 'Revenue123',
                value : '{Actual}'
              }, {
                name : 'Prof',
                value : '{Budget}'
              }
              ],
            valueAxis: {
              visible: true,
              label: { },
              title: {visible: true}
            },
        valueAxis2: {
          visible: true,
           label: { },
          title: {visible: true}
         },
         timeAxis: {
             label: { },
              title: {visible: false},
              interval: {unit: ''}
            },
            title: {visible: false},
            interaction: { syncValueAxis: false}
          });
          oVizFrame.addFeed(feedValueAxis);
          oVizFrame.addFeed(feedValueAxis2);
          oVizFrame.addFeed(feedCategoryAxis);
   },

[former_member196805]

You have defined "Actual" as Dimension but fed it as valueAxis at the very beginning.

var nDataset =newsap.viz.ui5.data.FlattenedDataset({
    'dimensions':[{'name':'Actual','value':"{Actual}"}],
    'measures':[{'name':'Prior','value':'{Prior}'}],
    'data':{'path':"/businessData"}
});
var feeds = [new sap.viz.ui5.controls.common.feeds.FeedItem({
    'uid' : "valueAxis",
    'type' : "Actual",
    'values' : ["Actual"]
}),
new sap.viz.ui5.controls.common.feeds.FeedItem({
    'uid' : "categoryAxis",
    'type' : "Prior",
    'values' : ["Prior"]
})];

But then you have defined "Actual" again as measure later.

var oDataset =newsap.viz.ui5.data.FlattenedDataset({
    measures:[
      {name:"Actual",value:"{Actual}"},
      {name:"Prior",value:"{Prioir}"}
    ]
});

Could you please let me know the names for dimensions and measures so I could help?

[former_member524141]

Hi chapmanwong,

Here is complete details of the code.

Dimensions - Net Trade Sales

Current Measures - Actual , Budget

New Measures Required - Actual, Prior

Method for initial loading of the graph - 
 _initialdataLoadSegmentGraphFY : function (data, oResponse){
     that=this;
        var obj = JSON.parse(oResponse.body);
        var oData = {};
        var objItem = new Object();
        objItem.count=[];
        oData.results = obj.d.results;
            $.each(oData.results, function(i, item) {
            item.index = i + 1;
            item.expand = false;
            item.dirtyState = false;
            item.readOnly = false;
        });
        for (i=0; i<oData.results.length; i++){
          var items=new Object();
            var str = '';
            str = oData.results[i]._ERP_SEGMENT_T_N;
            //str = str.toLowerCase();
           // str = str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
            var data=str.split(":");
           if((data[1]!="TRANSPORTATION COATING" ) &&  (data[1]!="PERFORMANCE COATING")){
              items['Days']  = data[1];
              items['line1'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAXRTBQQIMEXIIQ));
              items['line2'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAXRTC07EYUE0XB));
              objItem.count.push(items);
            }
         }
        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
        //Y-axis value for line1 in graph
        feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "valueAxis",
              "type": "Measure",
              "values": ["Actual"]
            }),
        // Y-axis value for line2
      feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis2",
          "type": "Measure",
          "values": ["Budget"]
       }),
          //X-axis value
        feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "categoryAxis",
              "type": "Dimension",
              "values": ["Net Trade Sales"]
            }),
          oVizFrame.setVizProperties({
            plotArea: {
              isFixedDataPointSize: true,
              window: {start: "firstDataPoint", end: "lastDataPoint"},
              dataLabel: {visible: true }
            },
            valueAxis: {
              visible: true,
              label: { },
              title: {visible: true}
            },
        valueAxis2: {
          visible: false,
           label: { },
          title: {visible: false}
         },
         timeAxis: {
             label: { },
              title: {visible: false},
              interval: {unit: ''}
            },
            title: {visible: false},
            interaction: { syncValueAxis: false}
          });
          this.oVizFrame.addFeed(feedValueAxis);
          this.oVizFrame.addFeed(feedValueAxis2);
          this.oVizFrame.addFeed(feedCategoryAxis);
          varoPopOver = this.getView().byId("idPopOver");
   },

*
*
*
*


Method which is trigeered when user clicks button, Need to change Legends here, I have removed all my code from this method, this is initial method, Please suggest what to change in this method so that legends are displayed as 
Actual and Prior - 

  _dataLoadSegmentGraphPriorMTD : function (data, oResponse){
        that=this;
        var obj = JSON.parse(oResponse.body);
        var oData = {};
        var objItem = new Object();
        objItem.count=[];
        oData.results = obj.d.results;
            $.each(oData.results, function(i, item) {
            item.index = i + 1;
            item.expand = false;
            item.dirtyState = false;
            item.readOnly = false;
        });
        for (i=0; i<oData.results.length; i++){
          var items=new Object();
            var str = '';
            str = oData.results[i]._ERP_SEGMENT_T_N;
            //str = str.toLowerCase();
           // str = str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
            var data=str.split(":");
           if((data[1]!="TRANSPORTATION COATING" ) &&  (data[1]!="PERFORMANCE COATING")){
              items['Days']  = data[1];
              items['line1'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAUQCWHUJVMI3OP));
              items['line2'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5UAUQCYJ4JTAL12V));
              objItem.count.push(items);
            }
         }
        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame");
        
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
      
   },

[former_member524141]

Hi chapmanwong,

Kindly provide your suggestion, I tried many solutions but did not work.

Thanks a lot for all your help.

[axelkara]

I think you should change the uid of feedValueAxis2 to valueAxis instead of valueAxis2 (see SDK)

feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis",
          "type": "Measure",

[former_member196805]

Please check https://jsbin.com/puvigivetu/edit?html,output.

[former_member524141]

_initialdataLoadSegmentGraphEBITFY - Used for initial loading of the graph.

 _initialdataLoadSegmentGraphEBITFY : function(data, oResponse){
     that=this;
        var obj = JSON.parse(oResponse.body);
        var oData = {};
        var objItem = new Object();
        objItem.count=[];
        oData.results = obj.d.results;
            $.each(oData.results, function(i, item) {
            item.index = i + 1;
            item.expand = false;
            item.dirtyState = false;
            item.readOnly = false;
        });
        for (i=0; i<oData.results.length; i++){
          var items=new Object();
            var str = '';
            str = oData.results[i]._ERP_SEGMENT_T_N;
            //str = str.toLowerCase();
           // str = str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
            var data=str.split(":");
           if((data[1]!="TRANSPORTATION COATING" ) &&  (data[1]!="PERFORMANCE COATING")){
              items['Days']  = data[1];
              items['line1'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5U97HSJXZGCWHO6P));
              items['line2'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5U97HSJXZGCWI0TT));
              objItem.count.push(items);
            }
         }
        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame1");
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
        //Y-axis value for line1 in graph
        feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "valueAxis",
              "type": "Measure",
              "values": ["Actual"]
            }),
        // Y-axis value for line2
      feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis2",
          "type": "Measure",
          "values": ["Budget"]
       }),
          //X-axis value
        feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              "uid": "categoryAxis",
              "type": "Dimension",
              "values": ["EBIT"]
            }),
          oVizFrame.setVizProperties({
            plotArea: {
              isFixedDataPointSize: true,
              window: {start: "firstDataPoint", end: "lastDataPoint"},
              dataLabel: {visible: true }
            },
            valueAxis: {
              visible: true,
              label: { },
              title: {visible: true}
            },
        valueAxis2: {
          visible: false,
           label: { },
          title: {visible: false}
         },
         timeAxis: {
             label: { },
              title: {visible: false},
              interval: {unit: ''}
            },
            title: {visible: false},
            interaction: { syncValueAxis: false}
          });
          this.oVizFrame.addFeed(feedValueAxis);
          this.oVizFrame.addFeed(feedValueAxis2);
          this.oVizFrame.addFeed(feedCategoryAxis);
          varoPopOver = this.getView().byId("idPopOver1");
   },

_dataLoadSegmentGraphEBITPriorMTD - Called when the user clicks a button, need to change the legends in this function itself.

This methods were already being used, I need to change this method as per my requirement. Legends should be changed as Actual and Prior.

 _dataLoadSegmentGraphEBITPriorMTD : function (data, oResponse){
    that=this;
        var obj = JSON.parse(oResponse.body);
        var oData = {};
        var objItem = new Object();
        objItem.count=[];
        oData.results = obj.d.results;
            $.each(oData.results, function(i, item) {
            item.index = i + 1;
            item.expand = false;
            item.dirtyState = false;
            item.readOnly = false;
        });
        for (i=0; i<oData.results.length; i++){
          var items=new Object();
            var str = '';
            str = oData.results[i]._ERP_SEGMENT_T_N;
            //str = str.toLowerCase();
            //str = str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
            var data=str.split(":");
           if((data[1]!="TRANSPORTATION COATING" ) &&  (data[1]!="PERFORMANCE COATING")){
              items['Days']  = data[1];
              items['line1'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5U97HSJAWA1BVJMO));
              items['line2'] = Math.abs(parseFloat(oData.results[i].A003YPJZDT5U97HSJAWA1BVPY8));
              objItem.count.push(items);
            }
         }
        var oVizModel = new sap.ui.model.json.JSONModel();
        var oVizFrame = that.oVizFrame = that.getView().byId("idVizFrame1");
        oVizModel.setData(objItem);
        console.log(objItem);
        oVizFrame.setModel(oVizModel);
  },

[former_member196805]

As you said new measure will be introduced/bound to chart, you need a new dataset for vizFrame. So

1. you need a brand new dataset which consist of the new measure and the dimensions of your choice. If you use oDatamodel as data source, you should have new metadata from the backend. If you FlattenedDataset, you should have new flattenedDataset defined and bound to vizFrame.

2. try

oVizFrame.vizUpdate({'data': 'newDataset'})

[former_member524141]

Tried this as well, not working, I think I am missing something very small here...