FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › using database data to draw charts › Reply To: using database data to draw charts

September 25, 2018 at 11:00 am #22735

Vishwas R

@mikehellen,

You can retrieve the data points from the database and pass it on chart options as shown in below code snippet.

<?php
$dataPoints = array();

$con=mysqli_connect("localhost","root","","test"); //mysqli_connect("host","username","password","db"); - Refer https://www.w3schools.com/php/func_mysqli_connect.asp for more info

if (mysqli_connect_errno()) {
	echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="SELECT xval,yval FROM datapoints";

if ($result=mysqli_query($con,$sql)){	  
	foreach($result as $row){
		array_push($dataPoints, array("x"=> $row["xval"], "y"=> $row["yval"]));
	}
}

mysqli_close($con);
?>

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () { 
	var chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
		exportEnabled: true,
		theme: "light1", // "light1", "light2", "dark1", "dark2"
        exportEnabled: true,
		title:{
			text: "PHP Column Chart from Database - MySQLi"
		},
		data: [{
			type: "column", //change type to bar, line, area, pie, etc  
			dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart.render(); 
}
</script>
</head>
<body>
	<div id="chartContainer" style="height: 360px; width: 50%; margin: auto;"></div>
	<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Please take a look at this Sample Project for complete working sample.

PHP Column Chart from Database - MySQLi

—
Vishwas R
Team CanvasJS