CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by Ufuk Ozdemir

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title:{
		text: "Aylık Sayfa Görüntüleme ve Ziyaretçi Sayısı"
	},
	axisY :{
		includeZero: false,
		prefix: ""
	},
	toolTip: {
		shared: true
	},
	legend: {
		fontSize: 13
	},
	data: [{
		type: "splineArea",
		showInLegend: true,
		name: "Ziyaretçi",
		yValueFormatString: "#.###",
		xValueFormatString: "DD MMM",
		dataPoints: [
			{ x: new Date(2020, 0), y: 389 },
			{ x: new Date(2020, 1), y: 390 },
			{ x: new Date(2020, 2), y: 300 },
			{ x: new Date(2020, 3), y: 350 },
			{ x: new Date(2020, 4), y: 300 },
			{ x: new Date(2020, 5), y: 304 },
			{ x: new Date(2020, 6), y: 209 },
			{ x: new Date(2020, 7), y: 310 },
			{ x: new Date(2020, 8), y: 302 },
			{ x: new Date(2020, 9), y: 300 },
			{ x: new Date(2020, 10), y: 330 },
			{ x: new Date(2020, 11), y: 380 }
		]
 	},
	{
		type: "splineArea", 
		showInLegend: true,
		name: "Sayfa Görüntülenme",
		yValueFormatString: "#.###",
		xValueFormatString: "DD MMM",
		dataPoints: [
			{ x: new Date(2020, 0), y: 260 },
			{ x: new Date(2020, 1), y: 250 },
			{ x: new Date(2020, 2), y: 201 },
			{ x: new Date(2020, 3), y: 160 },
			{ x: new Date(2020, 4), y: 140 },
			{ x: new Date(2020, 5), y: 180 },
			{ x: new Date(2020, 6), y: 180 },
			{ x: new Date(2020, 7), y: 210 },
			{ x: new Date(2020, 8), y: 220 },
			{ x: new Date(2020, 9), y: 250 },
			{ x: new Date(2020, 10), y: 230 },
			{ x: new Date(2020, 11), y: 250 }
		]
 	}]
});
chart.render();

}