Candlestick Chart with Simple Moving Averages - CanvasJS JavaScript Charts

Candlestick Chart with Simple Moving Averages - CanvasJS JavaScript Charts

by canvasjs

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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "5 Day Simple Moving Average"
  },
  toolTip: {
    shared: true
  },
  axisY: {
    includeZero: false
  },
  axisX: {
    valueFormatString: "DD-MMM"
  },
  data: [{
    type: "candlestick",
    xValueFormatString: "DD(DDD) MMM",
    name: "Stock Price",
    dataPoints: [
      {x: new Date(2014,05,2 ), y:[184.76, 186.28, 184.67, 185.69]},
      {x: new Date(2014,05,3 ), y:[185.55, 185.76, 184.12, 184.37]},
      {x: new Date(2014,05,4 ), y:[184.71, 185.45, 184.20, 184.51]},
      {x: new Date(2014,05,5 ), y:[184.66, 186.09, 183.92, 185.98]},
      {x: new Date(2014,05,6 ), y:[186.47, 187.65, 185.90, 186.37]},
      {x: new Date(2014,05,9 ), y:[186.22, 187.64, 185.96, 186.22]},
      {x: new Date(2014,05,10), y:[186.20, 186.22, 183.82, 184.29]},
      {x: new Date(2014,05,11), y:[183.64, 184.20, 182.01, 182.25]},
      {x: new Date(2014,05,12), y:[182.48, 182.55, 180.91, 181.22]},
      {x: new Date(2014,05,13), y:[182.00, 183.00, 181.52, 182.56]},
      {x: new Date(2014,05,16), y:[182.40, 182.71, 181.24, 182.35]},
      {x: new Date(2014,05,17), y:[181.90, 182.81, 181.56, 182.26]},
      {x: new Date(2014,05,18), y:[182.04, 183.61, 181.79, 183.60]},
      {x: new Date(2014,05,19), y:[184.12, 184.47, 182.36, 182.82]},
      {x: new Date(2014,05,20), y:[182.59, 182.67, 181.40, 181.55]},
      {x: new Date(2014,05,23), y:[181.92, 182.25, 181.00, 182.14]},
      {x: new Date(2014,05,24), y:[181.50, 183.00, 180.65, 180.88]},
      {x: new Date(2014,05,25), y:[180.25, 180.97, 180.06, 180.72]},
      {x: new Date(2014,05,26), y:[180.87, 181.37, 179.27, 180.37]},
      {x: new Date(2014,05,27), y:[179.77, 182.46, 179.66, 181.71]},
      {x: new Date(2014,05,30), y:[181.33, 181.93, 180.26, 181.27]},
      {x: new Date(2014,06,1 ), y:[181.70, 187.27, 181.70, 186.35]},
      {x: new Date(2014,06,2 ), y:[186.35, 188.99, 186.17, 188.39]},
      {x: new Date(2014,06,3 ), y:[188.39, 188.81, 187.35,...