Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

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 rawData = [
				{"y": [10714.7, 10717.95, 10714.3, 10717.5], "x": "2018/01/16 14:26:00"},
				{"y": [10718.0, 10718.0, 10713.45, 10716.2], "x": "2018/01/16 14:27:00"},
				{"y": [10716.6, 10722.0, 10716.1, 10719.15], "x": "2018/01/16 14:28:00"}
				]
for (i = 0; i < 3; i++){rawData[i]["x"]=new Date(rawData[i]["x"]);}



var chart = new CanvasJS.Chart("chartContainer", {
	
	title: {
		text: "Simple & Exponential Moving Average for Candlestick Chart"
	},
	animationEnabled: true,
	zoomEnabled: true,	
	toolTip: {
		shared: true
	},
	axisY: {
		includeZero: false,
		crosshair:{
		 enabled: false}
	},
	axisX: {
		valueFormatString: "DD-MMM-YYYY HH-mm",
		crosshair:{
		 enabled: false}
	},
	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: rawData
	}]
});

calculateSimpleMovingAverage(chart, 5); // 5 Day Simple Moving Average
calculateExponentialMovingAverage(chart, 12); // 12 Day Exponential Moving Average
changeBorderColor(chart);
chart.render();

// function to calculate 5 day Simple moving average
function calculateSimpleMovingAverage(chart, smaPeriod) {
	var total;

	// Return if there are insufficient dataPoints
	if(chart.options.data[0].dataPoints.length <= smaPeriod) return;
	
	else {
		// Add a new line series for  Moving Averages
		chart.options.data.push({
			type: "spline",      
			markerSize: 0,
			name: "SMA",
      yValueFormatString: "#,##0.00",
			showInLegend: true,
			dataPoints: []
		});

		for(var i = smaPeriod; i < chart.options.data[0].dataPoints.length; i++) { 
			total = 0;
			for(var j = (i - smaPeriod); j < i; j++) {
				total +=...