jQuery UI Widgets › Forums › Chart › Line Chart using JSON data
Tagged: json data, Line Charts
This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.
-
Author
-
Hi,
Can you help me with this?
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Summary View</title>
</style>
<link rel=”stylesheet” href=”CSS/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”Script/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”Script/demos.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxcore.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxdata.js”></script>
<script type=”text/javascript” src=”Script/Widgets/jqxchart.js”></script><script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var data = {
“KpiData”:[
{
“Date”:”1/1/2012″,
“month”:”1″,
“year”:”2012″,
“kpi”:[
{
“KpiId”:”1″,
“text”:”KPI 1″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”20″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”25″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”30″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”35″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”40″
}
]
},
{
“KpiId”:”2″,
“text”:”KPI 2″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”25″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”30″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”35″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”40″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”45″
}
]
},
{
“KpiId”:”3″,
“text”:”KPI 3″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”30″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”35″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”40″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”45″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”50″
}
]
},
{
“KpiId”:”4″,
“text”:”KPI 4″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”35″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”40″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”45″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”50″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”55″
}
]
}
]
},
{
“Date”:”2/1/2012″,
“month”:”2″,
“year”:”2012″,
“kpi”:[
{
“KpiId”:”1″,
“text”:”KPI 1″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”20″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”25″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”30″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”35″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”40″
}
]
},
{
“KpiId”:”2″,
“text”:”KPI 2″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”25″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”30″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”35″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”40″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”45″
}
]
},
{
“KpiId”:”3″,
“text”:”KPI 3″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”30″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”35″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”40″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”45″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”50″
}
]
},
{
“KpiId”:”4″,
“text”:”KPI 4″,
“brand”:[
{
“BrandId”:”1″,
“BrandName”:”Brand 1″,
“BrandValue”:”35″
},
{
“BrandId”:”2″,
“BrandName”:”Brand 2″,
“BrandValue”:”40″
},
{
“BrandId”:”3″,
“BrandName”:”Brand 3″,
“BrandValue”:”45″
},
{
“BrandId”:”4″,
“BrandName”:”Brand 4″,
“BrandValue”:”50″
},
{
“BrandId”:”5″,
“BrandName”:”Brand 5″,
“BrandValue”:”55″
}
]
}
]
}]
};var source =
{
localdata: data,
datatype: “json”,
datafields: [
{ name: ‘date’,type: ‘date’ },
{ name: ‘month’,type: ‘number’ },
{ name: ‘year’,type: ‘number’ },
{ name: ‘kpi’,type: ‘number’ }
],
root: “KpiData”
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];//Binding data in arrays
dataAdapter.dataBind();
var records = dataAdapter.records;
var length = records.length;
var ArrBrandLevel=new Array();
var arrKPI1=[];
var arrKPI2=[];
var arrKPI3=[];
var arrKPI4=[];
var arrKPI5=[];for (var i = 0; i < length; i++) {
arrKPI1[i]=records[i].kpi[0].brand[0].BrandValue;
arrKPI2[i]=records[i].kpi[1].brand[0].BrandValue;
arrKPI3[i]=records[i].kpi[2].brand[0].BrandValue;
arrKPI4[i]=records[i].kpi[3].brand[0].BrandValue;
// alert(records[i].kpi[0].brand[0].BrandValue);
}// prepare jqxChart settings
var settings = {
title: “”,
description: “”,
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: ‘Date’,
formatFunction: function (value) {
return months[value.getMonth()];
},
toolTipFormatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()];
},
type: ‘date’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 3,
gridLinesColor: ‘#888888’,
valuesOnTicks: true
},
colorScheme: ‘scheme04’,
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
unitInterval: 50,
minValue: 0,
maxValue: 100,
displayValueAxis: false,
description: ‘Daily Closing Price’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘arrKPI1’, displayText: ‘KPI 1’ },
{ dataField: ‘arrKPI2’, displayText: ‘KPI 2’ },
{ dataField: ‘arrKPI3’, displayText: ‘KPI 3’ },
{ dataField: ‘arrKPI4’, displayText: ‘KPI 4’ }
]
}
]
};
// setup the chart
$(‘#RightPanelLineChart’).jqxChart(settings);
$(‘#RightPanelLineChart’).jqxChart({borderLineWidth: 0});
// $(‘#RightPanelLineChart’).jqxChart({legendLayout : { left: 500, top: 140, width: 300, height: 200, flow: ‘vertical’ }});
});
</script>
</head>
<body>
<div class=’Div_RightPanel’>
<div id=’RightPanelLineChart’ style=”Margin:7% 5% 5% 5%;width:90%; height:70%”>
</div>
</body>
</html>I want to plot multiple lines on a chart from KPI data based on the brand selected in the listbox.
Hi,
You can load your data in jqxChart by using the following approach:
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>jqxChart Axis Position Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var data = { "KpiData":[ { "Date":"1/1/2012", "month":"1", "year":"2012", "kpi":[ { "KpiId":"1", "text":"KPI 1", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"20" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"25" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"30" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"35" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"40" } ] }, { "KpiId":"2", "text":"KPI 2", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"25" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"30" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"35" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"40" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"45" } ] }, { "KpiId":"3", "text":"KPI 3", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"30" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"35" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"40" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"45" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"50" } ] }, { "KpiId":"4", "text":"KPI 4", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"35" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"40" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"45" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"50" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"55" } ] } ] }, { "Date":"2/1/2012", "month":"2", "year":"2012", "kpi":[ { "KpiId":"1", "text":"KPI 1", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"20" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"25" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"30" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"35" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"40" } ] }, { "KpiId":"2", "text":"KPI 2", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"25" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"30" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"35" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"40" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"45" } ] }, { "KpiId":"3", "text":"KPI 3", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"30" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"35" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"40" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"45" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"50" } ] }, { "KpiId":"4", "text":"KPI 4", "brand":[ { "BrandId":"1", "BrandName":"Brand 1", "BrandValue":"35" }, { "BrandId":"2", "BrandName":"Brand 2", "BrandValue":"40" }, { "BrandId":"3", "BrandName":"Brand 3", "BrandValue":"45" }, { "BrandId":"4", "BrandName":"Brand 4", "BrandValue":"50" }, { "BrandId":"5", "BrandName":"Brand 5", "BrandValue":"55" } ] } ] } ] }; var source = { localdata: data, datatype: "json", datafields: [ { name: 'date',type: 'date' }, { name: 'month',type: 'number' }, { name: 'year',type: 'number' }, { name: 'kpi',type: 'number' } ], root: "KpiData" }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; //Binding data in arrays dataAdapter.dataBind(); var records = dataAdapter.records; var length = records.length; var ArrBrandLevel=new Array(); var arrKPI1=[]; var arrKPI2=[]; var arrKPI3=[]; var arrKPI4=[]; var arrKPI5=[]; var data = new Array(); for (var i = 0; i < length; i++) { var record = {}; record["arrKPI1"] = parseInt(records[i].kpi[0].brand[0].BrandValue);; record["arrKPI2"] = parseInt(records[i].kpi[1].brand[0].BrandValue);; record["arrKPI3"] = parseInt(records[i].kpi[2].brand[0].BrandValue);; record["arrKPI4"] = parseInt(records[i].kpi[3].brand[0].BrandValue);; record["Date"] = records[i].Date; data.push(record); } // prepare jqxChart settings var settings = { title: "", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: data, categoryAxis: { dataField: 'Date', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 3, gridLinesColor: '#888888', valuesOnTicks: true }, colorScheme: 'scheme04', seriesGroups: [ { type: 'line', valueAxis: { unitInterval: 50, minValue: 0, maxValue: 100, description: 'Daily Closing Price', tickMarksColor: '#888888' }, series: [ { dataField: 'arrKPI1', displayText: 'KPI 1' }, { dataField: 'arrKPI2', displayText: 'KPI 2' }, { dataField: 'arrKPI3', displayText: 'KPI 3' }, { dataField: 'arrKPI4', displayText: 'KPI 4' } ] } ] }; // setup the chart $('#RightPanelLineChart').jqxChart(settings); $('#RightPanelLineChart').jqxChart({borderLineWidth: 0}); // $('#RightPanelLineChart').jqxChart({legendLayout : { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' }}); }); </script> </head> <body> <div id="RightPanelLineChart" style="width: 600px; height: 500px;"> </div> </body> </html>Hope this helps you.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.