CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by Florent27000

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>
<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>

JavaScript

window.onload = function () {

//Better to construct options first and then pass it as a parameter
var options = {
	title: {
		text: "Spline Chart with Export as Image"
	},
	axisY: {
		title: "cote",
		valueFormatString: "#0,,.",
		suffix: "mm",
		stripLines: [{
      color: "#e94235",
      labelFontColor:"#e94235",
			value: 10,
			label: "maxi"
		},
    {
      color: "#e94235",
      labelFontColor:"#e94235",
			value: 5,
			label: "mini"
		},
    {
      color: "#e94235",
      labelFontColor:"#e94235",
			value: 7,
			label: "Nominale"
		}]
	},
	animationEnabled: true,
	exportEnabled: true,
	data: [
	{
		type: "spline", //change it to line, area, column, pie, etc
		dataPoints: [
			{ x: 10, y: 8 },
			{ x: 20, y: 5 },
			{ x: 30, y: 8 },
			{ x: 40, y: 6 },
			{ x: 50, y: 6 },
			{ x: 60, y: 9 },
			{ x: 70, y: 7 },
			{ x: 80, y: 5 },
			{ x: 90, y: 9 },
			{ x: 100, y: 8 },
			{ x: 110, y: 10 },
			{ x: 120, y: 6 },
			{ x: 130, y: 5 },
			{ x: 140, y: 8 }
		]
	}
	]
};
$("#chartContainer").CanvasJSChart(options);

}