Home forums Using CanvasJS How can I use PHP MySQL Dynamic data Reply To: How can I use PHP MySQL Dynamic data

#9540

hrahul
Member

I want my graph to automatically refresh data as it comes in to the database. However, i am getting a blank screen with the following html code. Could you please correct the error?
file t1.php

    <?php
    
    header('Content-Type: application/json');
    
    $con = mysqli_connect("localhost","root","","test1");
    
    // Check connection
    if (mysqli_connect_errno($con))
    {
        echo "Failed to connect to DataBase: " . mysqli_connect_error();
    }else
    {
        $data_points = array();
        
        $result = mysqli_query($con, "SELECT * FROM val");
        
        while($row = mysqli_fetch_array($result))
        {        
            $point = array("label" => $row['rnumber'] ,"y" =>$row['water_level']);
            
            array_push($data_points, $point);        
        }
    	
        
        echo json_encode($data_points, JSON_NUMERIC_CHECK);
    }
    mysqli_close($con);
    
    ?>

    file t2.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="jquery.js"></script>
        <script src="canvasjs.min.js"></script>
    
        <script type="text/javascript">
    	var updateInterval = 10;
    	var dps;
            $(document).ready(function () {
    
                $.getJSON("t1.php", function (result) {
    dps=result;
                    var chart = new CanvasJS.Chart("chartContainer", {
                        data: [
                            {
                                dataPoints: dps
                            }
                        ]
                    });
    
                    chart.render();
                });
    			var updateChart = function () {
    $.getJSON(“t1.php”, function (result) {
    
    chart.options.data[0].dataPoints = result;
    
    });
    
    chart.render();
    };
    
    setInterval(function(){updateChart()}, updateInterval);
            });
        </script>
    </head>
    <body>
    
        <div id="chartContainer" style="width: 800px; height: 380px;"></div>
    
    </body>
    </html>