How to convert datetime string to UTC to plot points on Highcharts

Question

I'm working on HighCharts Spline Irregular Data. Here the data is passed as

data: [
      [Date.UTC(1970,  9, 27), 0   ],
      [Date.UTC(1970, 10, 10), 0.6 ],
      [Date.UTC(1970, 10, 18), 0.7 ],
      [Date.UTC(1970, 11,  2), 0.8 ],
      [Date.UTC(1970, 11,  9), 0.6 ],
      [Date.UTC(1970, 11, 16), 0.6 ],
      ]

But, I'm sending the data from the python backend via AJAX call as

data: [
      "2013-11-07 00:10:27", 0   ],
      "2013-11-07 00:10:27", 1   ],
      "2013-11-07 00:10:27", 2   ],
      "2013-11-07 00:10:27", 3   ],
      "2013-11-07 00:10:27", 4   ],
      "2013-11-07 00:10:27", 5   ],
      ]

So, the data points does not gets plotted. How do I convert the datetime to UTC or any other format of datetime at the backend(python), which will enable Highcharts to plot the correct X and Y-axis points.?

Here is what I've tried. Since the UTC time Date.UTC(1970, 9, 27) returns the number of seconds, hence I'm converting the time to the total number of secs passed since 1970-1-1 behind the scenes.

time = "2013-11-06 18:00:00"
time = ((datetime.datetime.strptime(time, '%Y-%m-%d %H:%M:%S'))-datetime.datetime(1970,1,1)).total_seconds()

and then passing it to the UI., hence my data is send as

[[1383760800.0, 1870.2000000000007], [1383762600.0, 0.30000000000000004], [1383761700.0, 4.299999999999802]]

Now when I pass this data to the highcharts, the Y-axis shows correct value but the X-axis(on which the datetime needed to plotted) shows time as 05:52.

How can I correct it?

Here is my Highcharts code.

function comparison_chart(result) {
  var MAXPOINTS = 20;

  Highcharts.setOptions({
      global: {
          useUTC: false,
      }
  });

$('#container').highcharts({
    chart: {
      events: {
      load: function() {

          // set up the updating of the chart each second
          var series = this.series[0];


          setInterval(function() {
              var x = (new Date()).getTime(), // current time
                  y = Math.random();
              if(series.data.length > MAXPOINTS){
                series.addPoint([x, y], true, true);  
              }
              else{
                series.addPoint([x, y], true, false);
              }



          },5000);
      },
  }

    },
    title: {
        text: 'Energy Chart'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        }
    },

    tooltip: {
        formatter: function() {
            var s;
                s = this.y + 'kWh';
            return s;
        }
    },

    series: [{
        type: 'spline',
        name: 'Random data',
        data: result,
        showInLegend: true,

    }]
  });
}

sberry · Accepted Answer · 2013-11-07T05:08:46.287

15

The problem is that HighCharts expects time series data to be given in milliseconds, not seconds so you will need to put in a multiplier of 1000.

You can convert from your strings to milliseconds since epoch like so:

>>> int(datetime.datetime.strptime("2013-11-07 00:10:27", "%Y-%m-%d %H:%M:%S").strftime('%s')) * 1000
1383811827000

edited Nov 07 '13 at 05:08

answered Nov 07 '13 at 05:03

sberry

128,281
18
138
165

So, you mean to say I should multiply this statement by 1000? `time = ((datetime.datetime.strptime(time, '%Y-%m-%d %H:%M:%S'))-datetime.datetime(1970,1,1)).total_seconds()*1000 ` – python-coder Nov 07 '13 at 05:08
1 question. What does `strftime('%s')` means? – python-coder Nov 07 '13 at 05:13
Well, I would suggest looking at the docs for `time`, but it converts a datetime object to a string of the seconds since the epoch (Jan 1, 1970) – sberry Nov 07 '13 at 05:14
1

'%s' solution is os-dependent, see p.ex. [here](http://stackoverflow.com/a/11743262/1265154) – alko Nov 07 '13 at 06:50

How to convert datetime string to UTC to plot points on Highcharts

1 Answers1

Linked