Chart with JSON data - CanvasJS

Chart with JSON data - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var result = [{"x":"1","y":"5"},{"x":"2","y":"5"},{"x":"3","y":"4"},{"x":"4","y":"1"},{"x":"5","y":"8"},{"x":"6","y":"9"},{"x":"7","y":"5"},{"x":"8","y":"6"},{"x":"9","y":"4"},{"x":"10","y":"7"}]

var dataPoints = [];

for (var i = 0; i <= result.length - 1; i++) {
  dataPoints.push({ x: Number(result[i].x), y: Number(result[i].y) });
}

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Column Chart from JSON"
  },
  data: [{
    dataPoints: dataPoints
  }]
});

chart.render();