CODEWITHSUNDEEP
javascriptphpmysqlhighcharts
Sakshi
Sakshi

Reputation: 31

My highchart not showing the correct time on the x-axis

I have to show the real-time power consumption values in a dynamic line chart. I amusing highcharts library for this. I want that both the time on the x-axis and the power on the y-axis are taken from the mysql database. But even after extracting the time and power consumption value from the database properly i am not getting the correct time on the highchart.

For developing the code I made the following tables in database. I have inserted assumed values for developing the code only.

mysql> use sample;
Database changed
mysql> select * from Power_data;
+-------+----------+---------------------+
| SR_NO | POWER_D1 | DATE_TIME           |
+-------+----------+---------------------+
|     1 |  294.975 | 2016-02-04 06:01:00 |
|     2 |  295.837 | 2016-02-04 06:02:00 |
|     3 |   279.45 | 2016-02-04 06:03:00 |
|     4 |  288.765 | 2016-02-04 06:04:00 |
|     5 |   298.08 | 2016-02-04 06:05:00 |
|     6 |  319.297 | 2016-02-04 06:06:00 |
+-------+----------+---------------------+
6 rows in set (0.00 sec)

mysql> select * from counter
    -> ;
+-----+---------+---------+---------+
| cid | select1 | select2 | select3 |
+-----+---------+---------+---------+
|   1 |       1 |       1 |       1 |
+-----+---------+---------+---------+
1 row in set (0.00 sec)

Then I wrote the code for the live server in the file live.php. This code gives me the time correctly in the form of milliseconds as required by highcharts. 

<?php
// Set the JSON header
header("Content-type: text/json");  

$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = 'root';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);

if(! $conn ) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('sample');
$sql1='SELECT select1 FROM counter WHERE cid=1';
$r=mysql_fetch_array(mysql_query($sql1,$conn));
$i=$r['select1'];
//echo $i;

$sql2='SELECT * FROM Power_data WHERE SR_NO='.$i;
$result=mysql_query($sql2,$conn);

if(!$result){
die('Could not get data:' . mysql_error());
}
$i++;
$sql3='UPDATE counter SET select1='.$i.' WHERE cid=1';
mysql_query($sql3,$conn);

while($row=mysql_fetch_array($result)){
extract($row);  
$y=$POWER_D1;
$x=strtotime($DATE_TIME);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret,JSON_NUMERIC_CHECK);

}
 mysql_close($conn);

?>

After this my code which take the live data and displays it in the line charts goes like this. The file name is client.php:

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart;
/**
 * Request data from the server, add it to the graph and set a timeout 
 * to request again
 */
function requestData() {
    $.ajax({
        url: 'live.php',
        success: function(point) {
    //document.write(point);
            var series = chart.series[0],
                shift = series.data.length > 20; // shift if the series is 
                                             // longer than 20

            // add the point
           chart.series[0].addPoint(point, true, shift);

           // call it again after one second
           setTimeout(requestData, 1000);    
        },
        cache: false
    });
}
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});

</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

My highchart is showing wrong values for the time on x-axis. Someone please tell if I am missing on something.

Upvotes: 1

Views: 710

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Try changing your line:

$x=strtotime($DATE_TIME);

To:

$x=strtotime($DATE_TIME)*1000;

Highcharts datetime series expects x-values in the form of timestamps in milliseconds. PHPs strtotime returns a timestamp in seconds.

Upvotes: 1

Related Questions