I have developed a small SAPUI5 app where i am facing problem in displaying different charts in same page.

[Former Member]

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

[former_member187069]

Hi,

is it possible to place 2 charts in the same page with some layouts? I want a sample dashboad to be designed with 2-3 charts in one single page.

Thanks