Render Chart using External JSON provided through input field- CanvasJS JavaScript Charts

Render Chart using External JSON provided through input field- CanvasJS JavaScript Charts

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 -->
<!-- 
https://api.myjson.com/bins/espz0
https://api.myjson.com/bins/vguws
https://api.myjson.com/bins/166nss
-->
Add JSON dataSource  here: <input type="text" id="dataSource"><br><br>
<button id="renderChart" style="margin-left: 172px;">
Click here to render the chart
</button>
<div id="chartContainer"></div>

JavaScript

var clickCounter = 0;

$("#renderChart").click(function(){
  clickCounter++;
  var chartContainer = "chartContainer"+clickCounter;
  $("#chartContainer").append("<div id="+ chartContainer +" style = \"height:300px; width: 100%; \"></div>");
  var JSON = $("#dataSource").val();
  renderChart(JSON, chartContainer);
});

function renderChart(JSON, chartContainer){
  var dataPoints = [];
  var chart = new CanvasJS.Chart(chartContainer, {
    data: [{
      type: "column",
      dataPoints: dataPoints
    }]
  });

  $.getJSON(JSON, function(result) {
    for (var i = 0; i <= result.dataPoints.length - 1; i++) {
      dataPoints.push({
        label: result.dataPoints[i].label,
        y: parseInt(result.dataPoints[i].y)
      });
    }
    chart.render();
  });
}