Reply To: Ajax Refresh

[Shashi Ranjan]

@danwel,

As we do not have a working sample project that we can run locally to understand the issue better, we can suggest a few modifications you can make to your files for creating a dynamic chart in PHP using data from MySQL database. We will first start with php service dynamicgraph.php which will provide data from the database. Please take a look at below code snippet for dynamicgraph.php service:

$username = "root";
$password = "";
$dbname = "test";

// Create connection
$conn = new mysqli('',$username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT Label, y_value FROM chart_table";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
	$obj = array();
    while($row = $result->fetch_assoc()) {
		$element = array($row["Label"],$row["y_value"]);
       	array_push($obj,$element);
	}
	echo json_encode($obj);
} else {
    echo "0 results";
}
$conn->close();

You can call dynamicgraph.php service at certain interval using AJAX call and render the chart with data received from the service. Please take a look the below code snippet for the same:

window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",{
		title:{
			text:"Rendering Chart from database"
		},
		data: [{
			type: "line",
			dataPoints : [],
		}
		]
	});
		
	$.getJSON("dynamicgraph.php", function(data) {  
		$.each((data), function(key, value){
			chart.options.data[0].dataPoints.push({label: value[0], y: parseInt(value[1])});		
		});
		chart.render();
		updateChart();
	});

	function updateChart() {
		$.getJSON("dynamicgraph.php", function(data) {		
			chart.options.data[0].dataPoints = [];
			$.each((data), function(key, value){
				chart.options.data[0].dataPoints.push({label: value[0], y: parseInt(value[1])});		
			});
			
			chart.render();
		});
	}
	
	setInterval(function(){updateChart()}, 1000);
}

Please check this sample project for a working example with sample code for creating dynamic charts using data from MySQL database in PHP.

Also, please refer to this documentation page for step to step tutorial to create a Live Updating Charts from JSON API & AJAX.

—
Shashi Ranjan
Team CanvasJS