Candlestick Chart from JSON - CanvasJS JavaScript Charts

Candlestick Chart from JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

JavaScript

var options = {
  animationEnabled: true,
  theme: "light2", // "light1", "light2", "dark1", "dark2"
  exportEnabled: true,
  title: {
    text: "Samsung Electronics Co. Ltd. - November 2017"
  },
  subtitles: [{
    text: "Weekly Averages"
  }],
  axisX: {
    valueFormatString: "DD MMM"
  },
  axisY: {
    includeZero: false,
    prefix: "₩",
    title: "Price",
    valueFormatString: "#0.0,,.M"
  }, 
  legend: {
    dockInsidePlotArea: true
  },
  data: [{
    type: "candlestick",
    showInLegend: true,
    legendText: "Currency in KRW - South Korean Won",
    xValueType: "dateTime",
    yValueFormatString: "₩#,#00.##",
    xValueFormatString: "DD MMM",
    risingColor: "#CBE8C8",
    fallingColor: "#FFCCCC",
    dataPoints: []
  }]
};

$("#chartContainer").CanvasJSChart(options);

$.get("https://api.myjson.com/bins/eep90",function(data) {
  for(var i = 0; i < data.length;i ++)
    options.data[0].dataPoints.push({x: data[i].x, y: [data[i].open, data[i].high, data[i].low, data[i].close]});

  $("#chartContainer").CanvasJSChart().render();
});