Multiple Y axis in UI5 chart

[Former Member]

Hello Everyone,

I want to know if we can have multiple y axis option using UI5 chart (line chart).

Also how can we implement it.

Any help will be appreciated.

Regards,

Minakshi Soni

SAP MII Developer

[former_member204155]

Hi Minakshi,

There is various options by which you can achieve your requirement of multiple parameter plot or analyzing particular parameter on multiple scale (axis).

Yes,  Sai is right , using viz chart you can achieve that. as the example of dual line chart in the line he has provided. Profit & Measure by company and region.

here is below another option using sap.makit lib you can analysis a param on multiple scale(axis).

the snippet of code that generates the makit...

// Initialing the makit chart and defining its properties 

var oChart = new sap.makit.Chart({

            height: "80%", width: "100%",

            type: sap.makit.ChartType.Line,

            showRangeSelector : true,

            valueAxis : new sap.makit.ValueAxis({

            }),

            categoryAxis : new sap.makit.CategoryAxis({

                displayLastLabel: true

            }),

            categoryRegions : [

                                new sap.makit.Category({ column : "Region", displayName : "Region" }),

                                new sap.makit.Category({ column : "Company", displayName : "Company" }),

                                new sap.makit.Category({ column : "Measure", displayName : "Measure" })

                ],

            sries : new sap.makit.Series({

                column : "Revenue",

                displayName : "Revenue"

            }),

            values : [new sap.makit.Value({ expression : "Revenue", format : "number" ,displayName : "Revenue($)"}),

                      new sap.makit.Value({ expression : "Measure", format : "number" ,displayName : "Measure"})

                      ],

            valueBubble : new sap.makit.ValueBubble({

                style: sap.makit.ValueBubbleStyle.FloatTop,

                showCategoryText: true

            })

        });

// Creating model using test data , here I have taken same as the viz chart example.

var testData={	mycollection : [
	{Region: "Asia", Company: "FJ", Revenue: 10, Measure: 110, Population: 1200},
	{Region: "Asia", Company: "KI", Revenue: 5, Measure: 180, Population: 1900},
	{Region: "Asia", Company: "LA", Revenue: 17, Measure: 105, Population: 1680},
	{Region: "Europe", Company: "FJ", Revenue: 2, Measure: 130, Population: 1003},
	{Region: "Europe", Company: "KI", Revenue: 22, Measure: 80, Population: 1312},
	{Region: "Europe", Company: "LA", Revenue: 24, Measure: 40, Population: 1453},
	{Region: "Africa", Company: "FJ", Revenue: 37, Measure:88, Population: 1335},
	{Region: "Africa", Company: "KI", Revenue: 15, Measure: 55, Population: 1859},
	{Region: "Africa", Company: "LA", Revenue: 44, Measure:140, Population: 1879}
		]
	};

	var jsonModel = new sap.ui.model.json.JSONModel();
	jsonModel.setData(testData);

// binding model with chart column

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

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

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

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

        oChart.setModel(jsonModel);

        oChart.bindRows("/mycollection");

Hope this will help!!

Regards

Kuntal

[saivellanki]

Hi Minakshi,

Yes, it is possible using sap.viz.ui5.DualLine chart.

Please check the following Link for more information -

Navigate to Dual Line Section, you can check the code snippet by using developer tools console (F12).

UI5 CVOM HTML5 Charts - sap.viz.ui5

Regards,

Sai Vellanki.

[Former Member]

Hello Sai,

Thanks for your reply,

This is kind of what I am looking for. I checked its code snippet but couldn't understand as I am completely new to sap viz ui5 coding.

I simply did a google search for sample code but couldn't find any reference for the same.

Please provide some link where I can learn and understand the same.

Regrads,

Minakshi.

[saivellanki]

Hi Minakshi,

No Problem. Please check below link for Dual Line chart sample code -

http://jsbin.com/bepuqo/edit?html,output

Also, check Dual Line API Reference

https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.viz.ui5.DualLine.html

Regards,

Sai Vellanki.