on 06-16-2015 8:17 AM
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.
May this help you, you can customize the chart and you can get code for that customized chart,
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
94 | |
11 | |
11 | |
10 | |
9 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.