I've defined a line chart in SAPUI5. It works properly when I place it at an DIV in my HTML.
var oChart = new sap.viz.ui5.Line({
dataset : oDataset,
yAxis : yAxis,
title : {
visible : true,
text : 'Trend Chart'
},
legend : {
visible : true,
},
});
oChart.setModel(oModel2);
oChart.placeAt("visual");
My Goal is to place it in an popup/dialog/messagebox whatever pops up and is able to contain the graph. I tried to define an dialog and place this graph on it, didnt work (propably wrong sytanx). then I tried to define an view and place it at the dialog, also didnt work. Can somebody help me how to place the chart in a dialog/popup with a little code snippet, it seems that I am not able to do it. Thanks!
ANSWERED: invalidate() is the key (due to the fact, that jsbin code does not rest forever, I want to share the answer)
$(function() {
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [
{axis : 1,name : 'Country',value : "{Country}"}
],
measures : [
{name : 'Profit',value : '{profit}'},
{name : 'Revenue',value : '{revenue}'}
],
data : {path : "/businessData"}
});
var legendPosition = new sap.viz.ui5.types.Legend({layout: {
position: "left"
}});
var stackedColumnVizChart = new sap.viz.ui5.StackedColumn("chartStackedColumn", {
width : "800px",
height : "500px",
title : { },
dataset : oDataset,
legendGroup: legendPosition
});
stackedColumnVizChart.setModel(sap.ui.getCore().getModel());
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
{Country :"China",revenue:338.29,profit:133.82, population:1339724852},
{Country :"France",revenue:487.66,profit:348.76, population:65350000},
{Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
{Country :"India",revenue:170.93,profit:117.00, population:1210193422},
{Country :"United States",revenue:905.08,profit:609.16, population:313490000}
]
});
stackedColumnVizChart.setModel(oModel);
var dlg = new sap.m.Dialog({
title: 'Text',
width : "800px",
height : "600px",
content : [stackedColumnVizChart]
});
(new sap.m.Button({
text: 'open',
press: function() {
dlg.open();
stackedColumnVizChart.invalidate();
}
})).placeAt('content');
});