Beautiful HTML5 Charts & Graphs - 0 | JSFiddle Sample Code

Beautiful HTML5 Charts & Graphs - 0 | JSFiddle Sample Code

by cmayo

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/" target="_blank" title="Beautiful HTML5 Charts &amp; Graphs ">https://canvasjs.com/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light1", // "light2", "dark1", "dark2"
	animationEnabled: false, // change to true		
	title:{
		text: "Basic Column Chart"
	},
  axisX:{
      gridThickness: 1,
      valueFormatString: "H:mm" ,
      interval: 1,
      intervalType: "hour",
      labelAngle: -50,
      labelFontSize: 9,
    },
    axisY: {
      title: "Mbps",
      yValueFormatString: "#,##0.##\"%\"",
    },
	data: [
	{
		// Change type to "bar", "area", "spline", "pie",etc.
		type: "line",
		dataPoints: [
			{ x: new Date(2012, 01, 1, 1, 0, 0), y: 27},
      { x: new Date(2012, 01, 1, 2, 0, 0), y: 44},
      { x: new Date(2012, 01, 1, 3, 0, 0), y: 12},
      { x: new Date(2012, 01, 1, 4, 0, 0), y: 23},
      { x: new Date(2012, 01, 1, 5, 0, 0), y: 23},
      { x: new Date(2012, 01, 1, 6, 0, 0), y: 41},
      { x: new Date(2012, 01, 1, 7, 0, 0), y: 34},
      { x: new Date(2012, 01, 1, 8, 0, 0), y: 50},
      { x: new Date(2012, 01, 1, 9, 0, 0), y: 48},
      { x: new Date(2012, 01, 1, 10, 0, 0), y: 7},
      { x: new Date(2012, 01, 1, 11, 0, 0), y: 27},
      { x: new Date(2012, 01, 1, 12, 0, 0), y: 30},
      { x: new Date(2012, 01, 1, 13, 0, 0), y: 26},
      { x: new Date(2012, 01, 1, 14, 0, 0), y: 8},
      { x: new Date(2012, 01, 1, 15, 0, 0), y: 18},
      { x: new Date(2012, 01, 1, 16, 0, 0), y: 45},
      { x: new Date(2012, 01, 1, 17, 0, 0), y: 4},
      { x: new Date(2012, 01, 1, 18, 0, 0), y: 13},
      { x: new Date(2012, 01, 1, 19, 0, 0), y: 32},
      { x: new Date(2012, 01, 1, 20, 0, 0), y: 26},
      { x: new Date(2012, 01, 1, 21, 0, 0), y: 19},
      { x: new Date(2012, 01, 1, 22, 0, 0), y: 9},
      { x: new Date(2012, 01, 1, 23, 0, 0), y: 46},
      { x: new Date(2012, 01, 2, 1, 0, 0), y: 13},
      { x: new Date(2012, 01, 2, 2, 0, 0), y: 8},
      { x: new Date(2012, 01, 2, 3, 0, 0), y: 45},
      { x: new Date(2012, 01, 2, 4, 0, 0), y: 39},
      { x: new Date(2012, 01, 2, 5, 0, 0),...