Dynamic Chart from External JSON - CanvasJS JavaScript Charts

Dynamic Chart from External JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <br/>
  <div id="chart" style="width: 816px; height: 150px;"></div>

JavaScript

var dataLength = 0;
var data = [];
var updateInterval = 40;

function sortDataPoints(dps, par)
{
  var swapped;
  do {
    swapped = false;
    for (var i = 0; i < dps.length - 1; i++) {
      if (dps[i][par] > dps[i + 1][par]) {
        var temp = dps[i];
        dps[i] = dps[i + 1];
        dps[i + 1] = temp;
        swapped = true;
      }
    }
  } while (swapped);
}

function updateChart() {
  $.getJSON("https://api.myjson.com/bins/1czifp", function (result) {
    if (dataLength !== result.length) {
      for (var i = dataLength; i < result.length; i++) {
        data.push({
          x: parseInt(result[i].valuex),
          y: parseFloat(result[i].valuey),
        });

        if (data.length > 478) {
          data.shift(); }
      }
      dataLength = result.length;
      sortDataPoints(data, 'x'); // sort dataPoints based on x
      chart.render();
    }
  });
}

CanvasJS.addColorSet("greenShades",
	[//colorSet Array
	"#2F4F4F",
	"#008080",
	"#2E8B57",
	"#3CB371",
	"#90EE90"
	]);
var chart = new CanvasJS.Chart("chart", {
	backgroundColor: "transparent",
	colorSet: "greenShades",
	animationEnabled: true,
	theme: "theme3",
	legend:{
		fontSize: 12,
	},
	
	title: {
		text: "I",
	},
	axisX: {
		lineThickness:0,
		tickThickness:0,
		valueFormatString:" ",//space
	},
	axisY: {
		lineThickness:0,
		tickThickness: 0,
		gridThickness: 0,
	},
	data: [{
		showInLegend: false,
		toolTipContent: null,
		//legendText: valor,
		markerSize: 0,
		color:"black",
		type: "line", 
		dataPoints: data
	}]
});       
setInterval(updateChart,updateInterval);