Column Chart with 7 Day Simple Moving Average - CanvasJS JavaScript Charts
Column Chart with 7 Day Simple Moving Average - 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: "Column Chart with 7 Day Simple Moving Average"
},
toolTip: {
shared: true
},
axisY: {
includeZero: false
},
axisX: {
valueFormatString: "DD-MMM"
},
data: [{
type: "column",
xValueFormatString: "DD(DDD) MMM",
yValueFormatString: "#,##0.00",
name: "Stock Price",
dataPoints: [
{x: new Date(2014,05,2 ), y:185.69 },
{x: new Date(2014,05,3 ), y:184.37 },
{x: new Date(2014,05,4 ), y:184.51 },
{x: new Date(2014,05,5 ), y:185.98 },
{x: new Date(2014,05,6 ), y:186.37 },
{x: new Date(2014,05,9 ), y:186.22 },
{x: new Date(2014,05,10), y:184.29 },
{x: new Date(2014,05,11), y:182.25 },
{x: new Date(2014,05,12), y:181.22 },
{x: new Date(2014,05,13), y:182.56 },
{x: new Date(2014,05,16), y:182.35 },
{x: new Date(2014,05,17), y:182.26 },
{x: new Date(2014,05,18), y:183.60 },
{x: new Date(2014,05,19), y:182.82 },
{x: new Date(2014,05,20), y:181.55 },
{x: new Date(2014,05,23), y:182.14 },
{x: new Date(2014,05,24), y:180.88 },
{x: new Date(2014,05,25), y:180.72 },
{x: new Date(2014,05,26), y:180.37 },
{x: new Date(2014,05,27), y:181.71 },
{x: new Date(2014,05,30), y:181.27 },
{x: new Date(2014,06,1 ), y:186.35 },
{x: new Date(2014,06,2 ), y:188.39 },
{x: new Date(2014,06,3 ), y:188.53 },
{x: new Date(2014,06,7 ), y:188.04 },
{x: new Date(2014,06,8 ), y:187.22 },
{x: new Date(2014,06,9 ), y:188.42 },
{x: new Date(2014,06,10), y:187.70 },
{x: new Date(2014,06,11), y:188.00 },
{x: new Date(2014,06,14), y:189.86 },
{x: new Date(2014,06,15), y:188.49 },
{x: new Date(2014,06,16), y:192.36 },
{x: new Date(2014,06,17), y:192.49 },
{x: new Date(2014,06,18), y:192.50 },
{x: new Date(2014,06,21), y:190.85 },
{x: new Date(2014,06,22), y:194.09 },
{x: new...