Skip to Content
0
Former Member
Jan 23, 2014 at 10:58 AM

Problem in displaying different charts in the same page using SAPUI5.

61 Views

Hi,

I am new to SAPUI5. And I am trying to load different charts in same page based on the different button events . But by default its displaying only column chart.

I have declared a global variable as follows.

var chart_type ;

var flexboxc=new sap.m.FlexBox({direction:"Column"});

flexboxc.addItem( new sap.m.Bar());

flexboxc.addItem( new sap.m.Button("colchart",{text:"View in column chart",width:"400px", press: function(){chart_type= "Column";app.to("page5");}})); //,change: validate

flexboxc.addItem( new sap.m.Bar());

flexboxc.addItem( new sap.m.Button("bubchart",{text:"View in bubble chart", width:"400px",press: function(){chart_type= "Bubble";app.to("page5");} })); //,change: validate

flexboxc.addItem( new sap.m.Bar());

flexboxc.addItem( new sap.m.Button("linechart",{text:"View in line chart",width:"400px", press: function(){chart_type= "Line";app.to("page5");} })); //,change: validate

flexboxc.addItem( new sap.m.Bar());

flexboxc.addItem( new sap.m.Button("barchart",{text:"View in bar chart",width:"400px", press: function(){chart_type= "Bar";app.to("page5");} })); //,change: validate

flexboxc.addItem( new sap.m.Bar());

flexboxc.setAlignItems("Center");

flexboxc.setJustifyContent("Center");

var oChart = new sap.makit.Chart("column",{

width : "100%", height : "70%",

type: chart_type,

category : new sap.makit.Category({ column : "nameCategory" }),

series : new sap.makit.Series({ column : "daySeries" }),

values : [new sap.makit.Value({ expression : "budgetValue", format : "currency" })],

categoryAxis : new sap.makit.CategoryAxis({ displayLastLabel: true }),

valueBubble : new sap.makit.ValueBubble({

style: sap.makit.ValueBubbleStyle.FloatTop,

showCategoryText: true

})

});

oChart.addColumn(new sap.makit.Column({name:"nameCategory", value:"{names}"}));

oChart.addColumn(new sap.makit.Column({name:"daySeries", value:"{days}"}));

oChart.addColumn(new sap.makit.Column({name:"budgetValue", value:"{budget}", type:"number"}));

oChart.setModel(jsonModel);

oCol.bindRows("/mycollection");

var chartPage= new sap.m.Page("chart",{

title: "Charts",

showNavButton: true,

navButtonPress : function()

{

app.back();

},

content: [flexboxc],

icon: "images/sap-logo.png"

var page5 = new sap.m.Page("page5",{

title: "Column Chart",

showNavButton: true,

navButtonPress : function()

{

app.back();

},

content: [oChart],

icon: "images/sap-logo.png"

});

});

Thanks in Advance.