Update chart using CheckBox from external JSON- CanvasJS JavaScript HTML5 Charts

Update chart using CheckBox from external JSON- CanvasJS JavaScript HTML5 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 -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<input type="checkbox" name="dataSeries1" id="dataSeries1">
<label>Data-series 1</label>
<input type="checkbox" name="dataSeries2" id="dataSeries2">
<label>Data-series 2</label>

JavaScript

var data = [];
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Tick the CheckBoxes"
  },

  data: data
});

chart.render();



//Function to update the chart on changing the checkbox status
var updateChart = function(url, name, checked) {

  var index = -1;
  for (var i = 0; i < data.length; i++)
    if (data[i].name === name) {
      index = i;
      break;
    }

  if (checked) {
    if (index === -1) {
      $.getJSON(url, function(result) {
        data.push({
          dataPoints: result,
          name: name,
          visible: true
        });
        chart.render();
      });
    } else
      data[index].visible = true;
  }
  else
    data[index].visible = false;
  chart.render();
};



//---------CheckBox change events-------------
$('input[name=dataSeries1]').change(function() {
  updateChart(
    "https://api.myjson.com/bins/1xcza",
    "dataSeries1",
    document.getElementById("dataSeries1").checked
  );
});

$('input[name=dataSeries2]').change(function() {
  updateChart(
    "https://api.myjson.com/bins/48y8m",
    "dataSeries2",
    document.getElementById("dataSeries2").checked
  );
});