CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by Ufuk Ozdemir

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://www.lokumatolyesi.com.tr/admin/view/javascript/jquery/jquery-2.1.1.min.js"></script>
<div id="chartContainer" style="height: 400px; width: 100%;"></div>

JavaScript

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
		theme: "light2",
		title:{
			text: "Site Trafik"
		},
		axisX:{
			valueFormatString: "DD MMM",
			crosshair: {
				enabled: false,
				snapToDataPoint: true
			}
		},
		axisY: {
			title: "Sayfa Görüntüleme ve Ziyaretçi",
			crosshair: {
				enabled: false
			}
		},
		toolTip:{
			shared:true
		},  
		legend:{
			cursor:"pointer",
			verticalAlign: "bottom",
			horizontalAlign: "left",
			dockInsidePlotArea: true,
			itemclick: toogleDataSeries
		},
		data: [{
			type: "line",
			showInLegend: true,
			name: "Görüntülenme",
			markerType: "square",
			color: "#F08080",
			dataPoints: [{label:"01.05.2020",y:153},{label:"02.05.2020",y:211},{label:"03.05.2020",y:210},{label:"04.05.2020",y:211}]
		},
		{
			type: "line",
			showInLegend: true,
			name: "Ziyaretçi",
			lineDashType: "dash",
			dataPoints: [{label:"01.05.2020",y:838},{label:"02.05.2020",y:1325},{label:"03.05.2020",y:1245},{label:"04.05.2020",y:1186}]
		}]
	});
	chart.render();

	function toogleDataSeries(e){
		if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
			e.dataSeries.visible = false;
		} else{
			e.dataSeries.visible = true;
		}
		chart.render();
	}

}