Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

How to create multiple line chart using sap.makeit?

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(){


            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++)










        function createMyChart(selectedDCS,attributeName,upperLimit,lowerLimit)


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


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

            var viewData = {};

            viewData.EntityName = selectedDCS;

            viewData.Cmd = "GET_ALL";



                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++)









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



            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.

Former Member

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

Chart Demo

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question