Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<?php
 
$dataPoints = array();
include('conn.php');

 $queryCountStudent=mysqli_query($conn,"SELECT `ModuleCode`,COUNT(`StudentNumber`) FROM `studentmodule` group BY `ModuleCode`; ");
 $result=mysqli_fetch_all($queryCountStudent);
	
 
	
 foreach ($result as list($ModuleCode, $count)){
    array_push($dataPoints, array("x"=> $ModuleCode, "y"=>$count));
    }
?>


<html>
<head>  

</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<?php echo "body".json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
</body>
</html>

JavaScript

window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text: "My First Chart in CanvasJS"   },
		data: [ {type: "column",
			dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>	}
                      ]
	});
	chart.render();
}