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://canvasjs.com/assets/script/canvasjs.min.js”></script> </body>
</div>
</html>
@danwel,
Please check this sample project to create dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page to create a Live Updating Charts from JSON API & AJAX.
If this doesn’t help you resolve the issue you are facing, kindly share sample project along with sample database over Google Drive / Onedrive so that we can run it locally at our end, understand the scenario better and help you resolve it.
— Shashi Ranjan Team CanvasJS
You must be logged in to reply to this topic. Login/Register