Hello Js Gurus,
Following is my json file
[{“ond”:1,”maxspend”:64778,”minspend”:6477},
{“ond”:2,”maxspend”:61528,”minspend”:6152},
{“ond”:3,”maxspend”:56503,”minspend”:5650},
{“ond”:4,”maxspend”:55721,”minspend”:5572},
{“ond”:5,”maxspend”:5455,”minspend”:5455},
{“ond”:6,”maxspend”:54215,”minspend”:5421},
{“ond”:7,”maxspend”:52928,”minspend”:5292},
{“ond”:8,”maxspend”:67091,”minspend”:4895},
{“ond”:9,”maxspend”:46924,”minspend”:4692},
{“ond”:10,”maxspend”:4356,”minspend”:4356}
]
I am trying to draw a chart from above data using following code. Will appreciate help on this.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var dataPoints = [];
var dataPoints1= [];
var highlow=[];
var chart = new CanvasJS.Chart("top_destinations", {
animationEnabled: true,
theme: "light2",
dataPointWidth: 20,
title: {
text: "YTD Top Destinations",
fontSize: 15,
},
axisY: [
{
labelFormatter: function ( e ) { return e.value; },
} ] ,
axisX: [
{
labelFormatter: function ( e ) { return e.value; },
}
],
data: [{
type: "column",
axisYindex: 0,
yValueFormatString: "#,### Units",
dataPoints: dataPoints
}
]
});
function addData(data) {
for (var i = 0; i < data.length; i++) {
highlow=[];
highlow[0]=data[i].minspend ;
highlow[1]=data[i].maxspend ;
dataPoints.push({
x:i,
y:highlow
});
}
chart.render();
}
$.getJSON("top_destinations_high_low.json", addData);
}
</script>
</head>
<body>
<div id="top_destinations" style="height: 150px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</body>
</html>
.
