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

问题

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,

    }]
  });
}

回答1:

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

来源：https://stackoverflow.com/questions/19828299/how-to-convert-datetime-string-to-utc-to-plot-points-on-highcharts

标签

python

Highcharts