7

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 Answer 1

16

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
4
  • 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 Commented Nov 7, 2013 at 5:08
  • 1 question. What does strftime('%s') means? Commented Nov 7, 2013 at 5: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
    Commented Nov 7, 2013 at 5:14
  • 1
    '%s' solution is os-dependent, see p.ex. here
    – alko
    Commented Nov 7, 2013 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.