0 votes
1 view
in SAP by (7k points)

I have a problem with the VizFrame control of the SAPUI5 Framework. I want to display some data in an complex chart with two Y-axes. My data model looks like this:

{
      "d" : {
        "results" : [
          {
            "DataA" : "2",
            "DataB" : "4",
            "Id" : "1",
          },
          {
            "DataA" : "3",
            "DataB" : "2",
            "Id" : "2",
          }
       ]
   }
}

I tried to display DataA on the left Y-Axis and DataB on the right one, while using the Id for the X-Axis. This works without problems with the VizFrame types: dual_line and dual_column.

I havent found a way to display the data as a bar (DataA on Y1) and line (DataB on Y2). My current coding looks like this:

var oModel = new sap.ui.model.json.JSONModel();

        oModel.loadData("data.json");

        var oDataset = new sap.viz.ui5.data.FlattenedDataset({             
            dimensions: [{
                axis : 2,
                name : oLocText.getText('Id'),
                value : "{Id}"
            }],        
            measures : [{
                    group : 1,
                    name : DataA,
                    value : '{DataA}'
                },{
                    group : 2,
                    name: DataB,
                    value: '{DataB}'
                }],
            data : {
                path : "/d/results"
            }
        });

        oVizFrame.setDataset(oDataset);
        oVizFrame.setModel(oModel);
        oVizFrame.setVizType('combination');

        oVizFrame.setVizProperties({
            title: {
                  visible: true,
                  text: "Combined"
              },           
            plotArea: {
                colorPalette : d3.scale.category20().range(),
            }});

        var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              'uid': "primaryValues",
              'type': "Measure",
              'values': [ DataA , DataB]
            }),
            feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
              'uid': "axisLabels",
              'type': "Dimension",
              'values': [ Id]
            });

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

1 Answer

0 votes
by (14.5k points)

To resolve your problem, try using these lines of codes: 

var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({

              'uid': "valueAxis",

              'type': "Measure",

              'values': [ DataA ]

            }), feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({

              'uid': "valueAxis2",

              'type': "Measure",

              'values': [DataB]

            }),

When this code executes successfully, DataA will be automatically plotted against the left axis as bar and DataB against the right axis as a line.

Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...