Home Forums Chart Support Ajax Refresh

Ajax Refresh

Viewing 2 posts - 1 through 2 (of 2 total)
  • #25544

    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>
    #25556

    @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.
    Live chart with dataPoints from external JSON


    Shashi Ranjan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.