CanvasJS Graphing
Graphing canvasJS adding new points over time
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="chart" style="height: 360px; width: 100%;"></div>
JavaScript
$(function() {
//empty out anything left over from graph
$('#chart').empty();
var lineChart = null;
var dataPoints = [];
$.get("https://min-api.cryptocompare.com/data/histominute?fsym=LTC&tsym=USD&limit=60&aggregate=1&e=CCCAGG", function(data) {
$.each(data.Data, function(k,v) {
var getTime = new Date(0);
getTime.setUTCSeconds(v.time);
dataPoints.push({x: getTime, y: v.close});
});
lineChart = new CanvasJS.Chart("chart", {
theme: "light2",
zoomEnabled: true,
exportEnabled: false,
animationEnabled: true,
backgroundColor: "transparent",
title: {
text: "LTC"
},
legend: {
horizontalAlign: "center",
verticalAlign: "bottom",
fontSize: 14
},
toolTip: {
contentFormatter: function (e) {
return e.entries[0].dataSeries.name + ": " + e.entries[0].dataPoint.y + ", Time: " + CanvasJS.formatDate(e.entries[0].dataPoint.x, "hh:mm TT");
}
},
axisY: {
labelFormatter: function(e){
return "$ " + e.value;
},
includeZero: false,
labelFontSize: 14,
},
axisX: {
intervalType: "minute",
valueFormatString: "hh:mm TT",
labelFontSize: 14,
},
data: [
{
type: "area",
name: "Price",
showInLegend: true,
legendText: "LTC",
color: "#6abedb",
fillOpacity: .5,
xValueType: "dateTime",
dataPoints: dataPoints
}
]
});
lineChart.render();
});
var num = 0;
updateLineChart();
function updateLineChart() {
if (num === 0) {
num++;
} else {
$.get("https://min-api.cryptocompare.com/data/histominute?fsym=LTC&tsym=USD&limit=1&aggregate=1&e=CCCAGG", function (data) {
var getTime = new Date(0);
getTime.setUTCSeconds(data.Data[1].time);
dataPoints.push({x: getTime, y: data.Data[1].close});
console.log(dataPoints.length);
/*
if (dataPoints.length > 60) {
delete dataPoints[0];
}
*/
...