Live data with highcharts
<p>i'm trying to retrieve live data from mysql database and display it with highcharts but something seems to be wrong because all i get is an empty chart</p>

<p>here's my code</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Live Messages&lt;/title&gt;
        &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
        &lt;script src="//code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
        
        &lt;script&gt;
            var chart;
            var dataSource = 'http://localhost/live/data.php?format=json';
            
            function requestData() {
                $.ajax({
                    url: dataSource,
                    success: function(points) {
                
                        chart.series[0].setData(
                            points, 
                            true
                        );
            
                        // refresh after X miliseconds
                        setTimeout(requestData, 1000);    
                    },
                    cache: false
                });
            }
            

        
            $(document).ready(function() {
            
                    //add our div for the chart
                    $("#container").append("&lt;div id=chart-trend&gt;&lt;/div&gt;");
                    
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'chart-trend',
                            defaultSeriesType: 'spline',
                            events: {
                                load: requestData()
                            },
                            animation: {
                                duration:1000
                            }
                        },
                        title: {
                            text: 'temperateur'
                        },
                        subtitle: {
                            text: 'past 24 hours'
                        },
                        xAxis: {
                            type: 'datetime',
                            title: {
                                text: 'date'
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'temp',
                                margin: 10
                            }
                        },
                        series: [{
                            showInLegend: false,
                            data: [],
                           // pointInterval: 3600*1000 / minute
                        }]
                    }); //end chart               
                
            }); //end document.ready
            
            
            
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="container"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>and here is the database connection 
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php


/*
    Get data from the mysql database and return it in json format
*/
    
  
//setup global vars

$format = $_GET['format'];

if($format=='json'){ 
    header("Content-type: text/json"); 
}

$db = new mysqli('localhost', 'root', '', 'hicharts', 3306);

if (mysqli_connect_error()) {
    die('Connect Error (' . mysqli_connect_errno() . ') '
            . mysqli_connect_error());
}


// get data
$sql = "select dat,temp from temperateur";
    

if ($result = $db-&gt;query($sql)) {


    // $row = mysqli_fetch_array($result, MYSQLI_NUM);
    
    while($row = $result-&gt;fetch_array()){
        $rows[] = $row;
    }
    
    foreach($rows as $row){
        
        $datetime = strtotime($row['dat'])*1000;
    
        $temp = (int)$row['temp'];
        
        $data[] = array($datetime, $temp);
    }
    
    echo(json_encode($data));
    
    $result-&gt;close();

} else {
    echo "Error: " . $sql . "&lt;br&gt;" . $db-&gt;error;
}

$db-&gt;close();
?&gt;</code></pre>
</div>
</div>
</p>

<p>any help </p>