Display Date and time on highcharts

Question

I have the following data

firstData = [  
["2019-11-24", "12:38:54"],
 ["2019-11-21", "07:06:29"],
 ["2019-11-20", "19:26:37"],
 ["2019-09-26", "19:56:00"] ]

secondData = [ 
["2019-09-26", "10:26:00"],
 ["2019-11-20", "06:52:34"],
 ["2019-11-21", "07:06:19"],
 ["2019-11-24", "07:38:54"] ]

I would like to display graph like this. date and time graph

In your data what is an 'x' and what is a 'y' value? Highcharts requires data as an array of arrays or array of objects where nested arrays look like this: [x value, y-value] and nested object looks like this: {x: x-value, y-value}. x-value could be a number or string (for xAxis shown as date or categories etc) and y-value must be a number. — Sebastian Wędzel, Dec 30 '19 at 11:29
x value is full date like " 2019-11-24" and y value is time like "12:38:54". I added a mock graph — John B., Dec 30 '19 at 14:33

score 0 · Accepted Answer · answered Dec 31 '19 at 11:47

So as I mentioned in the comment the y value must be a number. If you want to render it as a time format you will need to convert this string into a proper number, check the function below and the demo: https://jsfiddle.net/BlackLabel/2vc7aphd/1/

function parseToNumber(string) {
  return Date.parse("1-1-1 " + string) - Date.parse('1-1-1 00:00:00')
}

function parseData(data) {
  let output = [];
  data.forEach(d => {
    let x = d[0],
      y = d[1];

    output.push({
      name: x,
      y: parseToNumber(y),
      label: y
    });
  })
  return output;
}

Display Date and time on highcharts

1 Answers1