Skip to Content
0
Aug 03, 2016 at 01:43 PM

VizFrame combined chart with multiple Y-Axis

1671 Views

0 down vote favorite

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);

Thank you very much for your help!