Beautiful HTML5 Charts & Graphs - 0 | JSFiddle Sample Code

Beautiful HTML5 Charts & Graphs - 0 | JSFiddle Sample Code

HTML

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

<div id="demo">
</div>
</div>
<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 () {

let text = "";
for (let i = 1; i <= 12; i++) {
	
  //text += i + ":00" + Math.floor(Math.random() * (50 - 30 + 30) + 1) + "<br>";
  
  //{ x: 1501048673000, y: 35.939 },
  
  text += "{ x: new Date(2012, 01, 1, " + i + ", 0, 0), y: " + Math.floor(Math.random() * (50 - 30 + 30) + 1) + "}, <br/>\n"
  
}

//document.getElementById("demo").innerHTML = text;



var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light1", // "light2", "dark1", "dark2"
	animationEnabled: false, // change to true		
	title:{
		text: "Basic Column Chart"
	},
	data: [
	{
		// Change type to "bar", "area", "spline", "pie",etc.
		type: "line",
		dataPoints: [
			text
		]
	}
	]
});
chart.render();

}