Candlestick Chart with Simple Moving Averages - CanvasJS JavaScript Charts

Candlestick Chart with Simple Moving Averages - CanvasJS JavaScript Charts

by d_vineet

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: "Simple & Exponential Moving Average for Candlestick Chart"
	},
	toolTip: {
		shared: true
	},
	axisY: {
		includeZero: false
	},
	axisX: {
		valueFormatString: "DD-MMM"
	},
	legend: {
		cursor: "pointer",
		itemclick: function (e) {
			if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
				e.dataSeries.visible = false;
			} else {
				e.dataSeries.visible = true;
			}

			e.chart.render();
		}
	},
	data: [{
		type: "candlestick",
    risingColor: "blue",
		color: "red",
		xValueFormatString: "DD(DDD) MMM",
    yValueFormatString: "#,##0.00",
		name: "Stock Price",
		showInLegend: true,
		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]...