Skip to Content
0
Former Member
Jun 16, 2015 at 07:17 AM

How to create multiple line chart using sap.makeit?

20 Views

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.

Attachments