High charts (Time Series Zoomable) not working with my data

Question

I just started to play around with high charts (Time-Series Zoomable) and I have a JSON data something like this:

[
    {"StartTime":"2018-06-11T00:00:00","TotalReq":10},
    {"StartTime":"2018-06-12T00:00:00","TotalReq":34},
    {"StartTime":"2018-06-15T00:00:00","TotalReq":31},
    {"StartTime":"2018-06-16T00:00:00","TotalReq":2},
    {"StartTime":"2018-06-18T00:00:00","TotalReq":38},
    {"StartTime":"2018-06-19T00:00:00","TotalReq":69},
    {"StartTime":"2018-06-20T00:00:00","TotalReq":39},
    {"StartTime":"2018-06-21T00:00:00","TotalReq":100},
    {"StartTime":"2018-06-22T00:00:00","TotalReq":180},
    {"StartTime":"2018-06-25T00:00:00","TotalReq":104},
    {"StartTime":"2018-06-26T00:00:00","TotalReq":101},
    {"StartTime":"2018-06-27T00:00:00","TotalReq":123}
]

I'm trying to pass the StartTime (dates) as my x-axis parameter and TotalReq (count) as my y-axis parameter.

But for some reason when I pass this data to the graph, it doesn't load the data to the graph (Blank screen). Am I going wrong somewhere? Correct me, if so. Much thanks in advance.

Here is the working example from highcharts that i'm currently working on. Jsfiddle.

Answer 1

Highcharts needs time in milliseconds.

So your options are to convert your string in javascript, like this:

new Date("2018-06-27T00:00:00").getTime()

Which means that for the whole table you would do this:

var arr = [
  {"StartTime":"2018-06-11T00:00:00","TotalReq":10},
  {"StartTime":"2018-06-12T00:00:00","TotalReq":34},
  {"StartTime":"2018-06-15T00:00:00","TotalReq":31},
  {"StartTime":"2018-06-16T00:00:00","TotalReq":2},
  {"StartTime":"2018-06-18T00:00:00","TotalReq":38},
  {"StartTime":"2018-06-19T00:00:00","TotalReq":69},
  {"StartTime":"2018-06-20T00:00:00","TotalReq":39},
  {"StartTime":"2018-06-21T00:00:00","TotalReq":100},
  {"StartTime":"2018-06-22T00:00:00","TotalReq":180},
  {"StartTime":"2018-06-25T00:00:00","TotalReq":104},
  {"StartTime":"2018-06-26T00:00:00","TotalReq":101},
  {"StartTime":"2018-06-27T00:00:00","TotalReq":123}]

arr.map(function(data) { return {x: new Date(data.StartTime).getTime(), y: data.TotalReq }})

Which returns the millisecond value for that date. Or to do it in c#.

Working JSFiddle example: https://jsfiddle.net/ewolden/rxLkn2u5/