Below example shows StockChart with OHLC being rendered using data from JSON API & AJAX request. You can also use CSV, XML or any external data source in order to separate data from UI.
window.onload = function () {
var dataPoints1 = [], dataPoints2 = [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
colorSet: "colorSet2",
title:{
text:"Litecoin Price"
},
charts: [{
axisY: {
prefix: "€"
},
data: [{
type: "ohlc",
yValueFormatString: "€#,###.00",
dataPoints : dataPoints1
}]
}],
navigator: {
data: [{
type: "area",
dataPoints: dataPoints2
}],
slider: {
minimum: new Date(2018, 06, 01),
maximum: new Date(2018, 07, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/docs/ltcusd2018.json", function(data) {
for(var i = 0; i < data.length; i++){
dataPoints1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});
dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].close)});
}
stockChart.render();
});
}