How can I convert datetime stamp in jQuery of a Highchart to get the correct format in json?

Question

To start with I must confess I have not so good knowledge of jQuery and Json. Basically my json encode reads like this ["2013-06-18 09:42:30",6.21],["2013-06-18 09:44:30",6.57],["2013-06-18 10:01:49",6.61],......these are the results of battery voltage in given date and time which keeps updating. There are hundreds of records. I know this time stamp is not valid while plotting the graph so Yesterday I was trying to tweak the jQuery in jSfiddle to get result and convert it into a chart. While working in Jsfiddle it said my code is fine but I am getting a blank container area.

Can anyone please guide me on how to convert the datetime stamp in UTC so that a graph can be plotted.

The jQuery which I was tweaking looks like this:

    var chart;

    chart = new Highcharts.Chart({
chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        events: {
            load: requestData
        }},
xAxis: {
     type: 'datetime',
     dateTimeLabelFormats: {
     month: '%e. %b',
     year: '%b'
     }
  },
  yAxis: {
     title: {
        text: 'Battery Voltage'
     },
     plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
     }]
  },
  tooltip: {
      formatter: function() {
        return '<b>'+ this.series.name +'</b><br/>'+
          Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x) +' : '+ this.y +" V";
      }
  },

series: [{
     name: 'Battery Volatge',
     data: []
    }]
});



function requestData() {
$.ajax({
    url: 'data.php',
    datatype: "json",
    success: function(data) {

        alert(data);

        chart.series[0].setData(data);

    },
    cache: false
});
}

and my PHP looks like this:

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

     $dbc = mysql_connect('xxxxx','xxxxx','xxxxx') or die(mysql_error());
   mysql_select_db('xxxxx',$dbc) or die(mysql_error());

       $result = mysql_query("SELECT COUNT(*) AS count FROM Station_State");
       $row = mysql_fetch_array($result,MYSQL_ASSOC);

      $SQL = "SELECT ss_Stamp,ss_BatteryStatus FROM Station_State WHERE Station_State_Index > 371298 AND ss_Station_idx = 34 ORDER BY ss_Stamp";

      $result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());

      $i=0;
      while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

     $row[ss_BatteryStatus] = (float) $row[ss_BatteryStatus];

$rows[$i]=array($row[ss_Stamp],$row[ss_BatteryStatus]);

$i++;
  }

     echo json_encode($rows);


 ?>

It is probably a basic question but I am still learning so any advice will be appreciated. Do let me know if you need any more information or anything I mentioned sounds vague.

Thanks

Answer 1

Posting Code which works perfectly. The only problem is the a window pops up with encoded data. jQuery code:

$(function () {

$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
var chart;

chart = new Highcharts.Chart({
chart: {
        renderTo: 'container',
        defaultSeriesType: 'spline',
        borderwidth: 0,
        events: {
            load: requestData
        }},
        title: {
            text: 'Battery Graph'
            },
xAxis: {
     type: 'datetime',
     dateTimeLabelFormats: {
     month: '%e. %b',
     year: '%b'
     }
  },
  yAxis: {
     title: {
        text: 'Battery Performance Voltage'
     },
     plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
     }]
  },
  tooltip: {
      formatter: function() {
        return '<b>'+ this.series.name +'</b><br/>'+
          Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x) +' : '+ this.y +" V";
      }
  },

series: [{
     showInLegend: false,
     name: 'Time vs Volatge',
     data: []
    }]
});


function requestData() {
$.ajax({
    url: 'bdata.php',
    datatype: "json",

    success: function(data) {

        alert(data);
        for (var i = 0; i < data.length; i++ ){ 
       data[i][0] = new Date(data[i][0]).getTime();
       }

       chart.series[0].setData(data);

    },

    cache: false
});
};
});

});

My PHP code looks like this:

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

 $dbc = mysql_connect('xxxx','xxxx','xxxx') or die(mysql_error());
   mysql_select_db('xxxx',$dbc) or die(mysql_error());

$result = mysql_query("SELECT COUNT(*) AS count FROM xxxx");
$row = mysql_fetch_array($result,MYSQL_ASSOC);

$SQL = "SELECT ss_Stamp,ss_BatteryStatus FROM Station_State WHERE Station_State_Index >  377708 AND ss_Station_idx = 34 ORDER BY ss_Stamp";

$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());


$i=0;

while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {

$row[ss_BatteryStatus] = (float) $row[ss_BatteryStatus];

$rows[$i]=array($row[ss_Stamp],$row[ss_BatteryStatus]);

$i++;
}

echo json_encode($rows);

?>

Thank you Pawel. You have been great help.

Answer 2

You can simple preprocess your data. Before setting data loop through all points, and convert that string to timestamp, for example:

for (var i = 0; i < data.length; i++ ){ 
    data[i][0] = new Date(data[i][0]).getTime();
}