How to create multiple line chart using sap.makeit?

[Former Member]

Hi everyone i need a little help as i am new to sap charts, i am using sap.makeit and able to create line chart but i want multiple lines for my requirement where i am having a lower limit, upper limit and real value. Right now i am able to print only real value. Please check my code if i did some mistake.

function plotChart(){

            statPage.removeContent(lineChart);

            var selectedDCS = oDCSData.getSelectedItem().getText();

            var protocol = '';

            var parts = (document.URL.substring()).split("://");

            if (parts.length == 2) {

                protocol = parts[0] + "://";

                rest = parts[1].split("/");

            } else {

                protocol = "";

                rest = parts[0].split("/");

            }

            xsOdataService = protocol + rest[0]

            + "/CapaProdV1";

            $.get(xsOdataService+ "/SPCDCSNAME.xsodata/DCSNAMEParameters(DCSNAME='"+selectedDCS+"')/Results?$format=json",function(data1) {

                returnValue1 = data1;

                for(var index=0;data1.d.results.length>index;index++)

                {

                    attributeName=data1.d.results[index].AttributeName;

                    upperLimit=data1.d.results[index].UpperLimit;

                    lowerLimit=data1.d.results[index].LowerLimit;

                    createMyChart(selectedDCS,attributeName,upperLimit,lowerLimit);

                    statPage.addContent(lineChart);

                }

            },"json");

        }

        function createMyChart(selectedDCS,attributeName,upperLimit,lowerLimit)

        {

            //var model = new sap.ui.model.json.JSONModel();

            //model.setData(oModel);

            var oModel = new sap.ui.model.json.JSONModel();

            var viewData = {};

            viewData.EntityName = selectedDCS;

            viewData.Cmd = "GET_ALL";

            $

            .ajax({

                type : "POST",

                url : "/CapaProdV1/xsds/designer/AddOrRemoveDCSDataService.xsjs",

                contentType : "application/json",

                data : JSON.stringify(viewData),

                dataType : "json",

                success : function(

                        data) {

                    for(var index=0;data.length>index;index++)

                    {

                        data[index]["Upper_Limit"]=upperLimit;

                        data[index]["Lower_Limit"]=lowerLimit;

                    }

                    oModel.setData({businessData:data});

                    console.log("data",data);

                }

            });

            lineChart = new sap.makit.Chart({

                width : "100%",

                height: "79%",

                type : sap.makit.ChartType.Line,

                showRangeSelector : false,

                showTotalValue : true,

                valueAxis: new sap.makit.ValueAxis({column : "{Lower_Limit}"}),

                categoryAxis: new sap.makit.CategoryAxis({column : "{Upper_Limit}"}),

                category : new sap.makit.Category({

                    column : "Serial"

                }),

                values : [

                            new sap.makit.Value({

                                expression : "attributeName",

                                displayName : "{"+attributeName+"}"

                            })

]

            });

            lineChart.addColumn(new sap.makit.Column({name:"Serial", value:"{SerialNumber}"}));

            lineChart.addColumn(new sap.makit.Column({name:"attributeName", value:"{"+attributeName+"}"}));

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

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

            lineChart.setModel(oModel);

            lineChart.bindRows("/businessData");

            return lineChart;

        }  

Also, I want to know that only 5 bars are visible for column chart and not responsive for mobile, it is a makeit restriction or some attribute to set and this chart is not visible in flexbox or vbox container only working with page content. And i tried searching for sap.m.List which is scrollable but didnt find anything except growing : true, scrollToLoad :true parameters, threshhold:3, which didnt worked for me.

Please put this as example in jsbin if anyone already achieved this as mine is a pure mobile app. Please refer to the chart image i attached.

[santhu_gowdaz · Accepted solution]

May this help you, you can customize the chart and you can get code for that customized chart,

Chart Demo

[Former Member]

thanks Santosh that's a great help from you...appreciate that. Please also include any example for scrolling list coz I need a list with multiple selections and based on selections i have to apply logic.