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

[Former Member]

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.

[prathik]

Hi Shwetha,

                    Try adding the different chart types in an array as below and load it using a looping construct

  var chartType = [sap.makit.ChartType.Column, sap.makit.ChartType.Bar,

                                                           sap.makit.ChartType.Line, sap.makit.ChartType.Bubble,

                                                           sap.makit.ChartType.WaterfallColumn,                                                                                                sap.makit.ChartType.WaterfallBar];

                                          for(var i = 0; i < len; i++) {

                                                oChartTypeSelect.addItem(new sap.ui.core.Item({

                                                       key: chartType[i], text: chartType[i]

                                                }));

Hope it helps

Regards,

Prathik