You must be logged in to post your query.
Home › Forums › Chart Support › Ajax Refresh
Hello,
I am using your line graph to graph data from a database. As more data is added to the database, I want to that data on the graph. To do this, I need to run the query on the database again. I want to use:
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="responds1"></div>
<script>
$(document).ready(function() {
var refreshId = setInterval(function() {
$("#responds1").load("dynamicgraph.php");
}, 1000);
$.ajaxSetup({ cache: true });
});
</script>
This will be on my page where the graphs are displayed. The graphs themselves are in a different file, and by using this Ajax method, I can refresh the graphs without ending the session.
Here’s my problem: when I run the program, the graphs will not show up, just my search bar. If I don’t use that code they show up fine.
How can I make the graphs show up? Is there an easier way to get the php up update and send the new data points to the graph?
Here’s my code:
<html>
<head>
<script>
window.onload = function() {
var dataPoints = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>;
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
title: {
text: "Live Internet Speed"
},
axisX:{
title: "Time in millisecond"
},
axisY:{
includeZero: false,
suffix: " Mbps"
},
data: [{
type: "line",
yValueFormatString: "#,##0.0#",
toolTipContent: "{y} Mbps",
dataPoints: dataPoints
}]
});
setInterval(function(){
var xValue = dataPoints.length;
var yValue = dataPoints[dataPoints.length - 2].y;
dataPoints.push({ x: xValue, y: yValue });
xValue++;
chart.render();
},1000);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</div>
</html>
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
You must be logged in to reply to this topic.