Home › Forums › Chart Support › Ajax Refresh › Reply To: Ajax Refresh
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