Multiple Column Charts from External JSON - CanvasJS JavaScript Charts

Multiple Column Charts from External JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="wtChart1" style="height: 300px; width: 100%;"></div><br/>
<div id="wtChart2" style="height: 300px; width: 100%;"></div>

JavaScript

var dps1 = [], dps2= [];
$.getJSON("https://api.myjson.com/bins/7ar2p", function(chartData) {  
    for(var i = 0; i < chartData.length; i++) {
      	dps1.push({ x: new Date(chartData[i].x), y: chartData[i].y});
    }
    chart1.options.data[0].dataPoints = dps1;
    chart1.render();
});

$.getJSON("https://api.myjson.com/bins/1ecw3j", function(chartData) {
    for(var i = 0; i < chartData.length; i++) {
     	 dps2.push({ x: chartData[i].x, y: chartData[i].y});
    }
    chart2.options.data[0].dataPoints = dps2;
    chart2.render();
});

var chart1 = new CanvasJS.Chart("wtChart1", {
    title: {
      	text: "Chart from External JSON Data"
    },
    data: [{
        type: "column",
        dataPoints: []
    }]
});

var chart2 = new CanvasJS.Chart("wtChart2", {
    theme: "light2",
    title: {
      	text: "Chart from External JSON Data"
    },
    data: [{
        type: "column",
        dataPoints: []
    }]
});