jquery / html5 canvas chart odata
HTML
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<div id="chart"></div>
<button id="change">Change to 5th product</button>
CSS
body > span.ui-igloadingmsg > p {
position: relative;
width: 18em;
left: -8em;
/* Consider some styling for the text so it's clear on top of the grid text.
*/
background-color: rgba(234, 234, 234, 0.9);
}
JavaScript
$.ig.loader({
scriptPath: 'http://localhost/ig_ui13.1/DEBUG/js/',
cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
theme: 'metro'
});
$.ig.loader("igDataChart.Category", function () {
$("#chart").igDataChart({
width: "50%",
height: "500px",
dataSourceUrl: "http://services.odata.org/Northwind/Northwind.svc/Products(1)/Order_Details?$format=json",
responseDataKey:"value",
leftMargin: 5,
topMargin: 15,
axes: [{
name: "xAxis",
type: "categoryX",
label: "OrderID"
}, {
name: "yAxis",
type: "numericY"
}],
series: [{
name: "series1",
type: "line",
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Quantity",
thickness: 5
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
});
$("#change").on("click", function(e){
$("#chart").igDataChart("option", "dataSource", new $.ig.DataSource({ dataSource: "http://services.odata.org/Northwind/Northwind.svc/Products(5)/Order_Details?$format=json",
responseDataKey:"value"}));
});