Skip to Content

Changing Measure definition of Vizflex chart from controller

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>


arch.png (8.7 kB)
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

4 Answers

  • Mar 26 at 10:51 AM

    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})
    Add comment
    10|10000 characters needed characters exceeded

    • 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);
      
  • Apr 24 at 08:14 AM

    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'})
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 26 at 02:19 AM
    Add comment
    10|10000 characters needed characters exceeded

    • _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); },
  • Apr 26 at 07:51 AM
    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?

    Add comment
    10|10000 characters needed characters exceeded