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();
  });
}