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]

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",