How to create Dynamic Measure Legend/Value

[Former Member]

I am creating an XML view in SAPUI5, where i am using VizFrame Chart. I gave the "Measure" value a hard coded name as i am not sure how to make it dynamic as per user select. The use case is on select, the measure value/legend on the chart should change as per the selected item.

The XML code:

<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" vizProperties="{ title: {text : 'Energy', visible : true}, plotArea: {dataLabel:{visible: true} ,colorPalette : ['#eab64d','#cb8589'] }}" height='100%' width="100%" vizType='line'> <viz:dataset> <viz.data:FlattenedDataset data="{/T_TABLE}"> <viz.data:dimensions> <viz.data:DimensionDefinition name="Timeline" value="{ path: 'C_READINGTIMESTAMP', type: 'sap.ui.model.type.Date', formatOptions: { pattern : 'dd/MM hh a' }}" /> </viz.data:dimensions> <viz.data:measures> <viz.data:MeasureDefinition name="Value" value="{C_READINGVALUE}" /> </viz.data:measures> </viz.data:FlattenedDataset> </viz:dataset> <viz:feeds> <viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Value" /> <viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Timeline" /> </viz:feeds> </viz:VizFrame>

[former_member365727]

Based on the selected item you want to update the measure....

On item select event handler destroy dataset and feeds from the chart using below code:

var oVizFrame = this.getView().byId("idVizFrame");
oVizFrame.destroyDataset();
oVizFrame.destroyFeeds();

Create new dataset and feeds

//New dataset
oVizFrame.setDataset(new sap.viz.ui5.data.FlattenedDataset({
   dimensions: [{
        name : 'Timeline',
        value: "{ path: 'C_READINGTIMESTAMP', type: 'sap.ui.model.type.Date', formatOptions: { pattern : 'dd/MM hh a' } }"
   }],
   measures: [{
        name: 'Value',
        value: '{C_READINGVALUE}'
  }]
}));

//Add feeds
oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
     uid: "categoryAxis",
     type: "Dimension",
     values: ["Timeline"]
}));


oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
     uid: "valueAxis",
     type: "Measure",
     values: ["Value"]
}));

[Former Member]

Thanks Shrikanth. But i want to change the measure name from "Value" to whatever was selected dynamically. Eg if Energy is selected from a drop down , change the Measure name to "Energy". How do i make the name dynamic?

[former_member365727]

store selected measure name in a variable and then attach the same.

var sMeasure = "Energy" or "Value";    //get this from selected list

//New dataset
oVizFrame.setDataset(new sap.viz.ui5.data.FlattenedDataset({
   dimensions: [{
        name : 'Timeline',
        value: "{ path: 'C_READINGTIMESTAMP', type: 'sap.ui.model.type.Date', formatOptions: { pattern              : 'dd/MM hh a' } }"
   }],
   measures: [{
        name: sMeasure,             //selected measure
        value: '{C_READINGVALUE}'   //if required change this binding also
  }]
}));

//Add feeds
oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
     uid: "categoryAxis",
     type: "Dimension",
     values: ["Timeline"]
}));


oVizFrame.addFeed(new sap.viz.ui5.controls.common.feeds.FeedItem({
     uid: "valueAxis",
     type: "Measure",
     values: [sMeasure]    //selected measure
}));

[Former Member]

Thanks Srikanth. Also can i change the formatter of time. Suppose if Energy is selected, show data in --> " line chart, dd/MM hh mm a" format. If Voltage is selected show data in --> "column chart, dd/MM hh mm ss a" format ? Can i change the dataset then?

[former_member365727]

Yes, you can change dataset.

//New dataset
switch (sMeasure) {
  case "Energy":
    oVizFrame.setDataset(
      new sap.viz.ui5.data.FlattenedDataset({
        dimensions: [
          {
            name: "Timeline",
            value:
              "{ path: 'C_READINGTIMESTAMP', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'dd/MM hh a' } }"
          }
        ],
        measures: [
          {
            name: sMeasure, //selected measure
            value: "{path: 'C_READINGVALUE' }" //if required change this binding also
          }
        ]
      })
    );
    break;
  case "Voltage":
    oVizFrame.setDataset(
      new sap.viz.ui5.data.FlattenedDataset({
        dimensions: [
          {
            name: "Timeline",
            value:
              "{ path: 'C_READINGTIMESTAMP', type: 'sap.ui.model.type.Date', formatOptions: { pattern: 'dd/MM hh a' } }"
          }
        ],
        measures: [
          {
            name: sMeasure, //selected measure
            value: "{path: 'C_READINGVALUE'}" //if required change this binding also
          }
        ]
      })
    );
    break;
}

[Former Member]

Thanks Shrikanth. Well the issue is i have other filters applied to the chart, hence on destroying them for the new data set is giving me error. I have an all total of 4 filters, which needs to work together. This change of Date formatter being one of them. I tried the same without destroying, but then i get an error- more than one Dimension can't be bind.

var oVizFrame = this.getView().byId("idVizFrame");

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

[former_member365727]

you need to reapply all the necessary filters as dataset is changed

[Former Member]

Can i try something like this. But i have four types of formatter, eg .formatDateHour, .formatDateMinute, .formateDateDay, .formatDateMonth. Is it possible to bind more than one formatter in my XML code? Right now i have just one. I tried all of them indivisually, it works..but together i am not sure how?

///////////// XML view code////////
<Text text="{path:
'/T_IOT_TABLE',
formatter: '.formatDateHour'}" //can bind more than one ?
/>

/////Controller ///////

 formatDateHour :
     function(v) {
      jQuery.sap.require("sap.ui.core.format.DateFormat");
     
     var oDateFormat =
     sap.ui.core.format.DateFormat.getDateTimeInstance({pattern:
     "dd-MM hh a"});
      return oDateFormat.format(new Date(v));
},

[Former Member]

Can I do conditional data binding in XML in respect to the above issue?

[former_member365727]

use switch case statement and apply the required formatter in the binding accordingly..