<?php 

// First array for purchased product 
$purchased= array(10, 15, 19, 1, 5, 7, 1, 1, 12, 13, 10, 1); 

// Second array for sold product 


// Data to draw graph for purchased products 
$dataPoints = array( 
	array("label"=> "Jan", "y"=> $purchased[0]), 
	array("label"=> "Feb", "y"=> $purchased[1]), 
	array("label"=> "March", "y"=> $purchased[2]), 
	array("label"=> "April", "y"=> $purchased[3]), 
	array("label"=> "May", "y"=> $purchased[4]), 
	array("label"=> "Jun", "y"=> $purchased[5]), 
	array("label"=> "July", "y"=> $purchased[6]), 
	array("label"=> "Aug", "y"=> $purchased[7]), 
	array("label"=> "Sep", "y"=> $purchased[8]), 
	array("label"=> "Oct", "y"=> $purchased[9]), 
	array("label"=> "Nov", "y"=> $purchased[10]), 
	array("label"=> "Dec", "y"=> $purchased[11]) 
); 

// Data to draw graph for sold products 

	
?> 

<!DOCTYPE HTML> 
<html> 
<head> 
	<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> 
	</script> 
	<script> 
		window.onload = function () { 
		
			var chart = new CanvasJS.Chart("chartContainer", { 
				animationEnabled: true, 
				title:{ 
					text: "Monthly Purchased and Sold Product"
				},	 
				axisY: { 
					title: "Purchased", 
					titleFontColor: "#4F81BC", 
					lineColor: "#4F81BC", 
					labelFontColor: "#4F81BC", 
					tickColor: "#4F81BC"
				}, 
					 
				toolTip: { 
					shared: true 
				}, 
				legend: { 
					cursor:"pointer", 
					itemclick: toggleDataSeries 
				}, 
				data: [{ 
					type: "column", 
					name: "Purchased", 
					legendText: "Purchased", 
					showInLegend: true, 
					dataPoints:<?php echo json_encode($dataPoints, 
							JSON_NUMERIC_CHECK); ?> 
				}] 
			}); 
			chart.render(); 
			
			function toggleDataSeries(e) { 
				if (typeof(e.dataSeries.visible) === "undefined"
							|| e.dataSeries.visible) { 
					e.dataSeries.visible = false; 
				} 
				else { 
					e.dataSeries.visible = true; 
				} 
				chart.render(); 
			} 
		
		} 
	</script> 
</head> 

<body> 
	<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html> 
