JavaScript highcharts: how to have two xAxis categories?

Question

I have a JavaScript array that looks like this:

$scope.myArray = [
(6, '03/02/2016', '10'),
(1, '03/02/2016', '12'),
(1, '03/02/2016', '12'),
(1, '03/02/2016', '12'),
(3, '03/02/2016', '13'),
(1, '03/02/2016', '13'),
(1, '03/02/2016', '14'),
(1, '03/02/2016', '15'),
(2, '03/03/2016', '15'),
(2, '03/08/2016', '09'),
(1, '03/09/2016', '02')];

So the first number in the list is the id, the second number id date and the third number is time (in 24HR format)

Now I am able to display a graph with date on xAxis and the id in the series.

This is what my graph looks like:

But I want it to look like this (Excel):

As shown in graph, I want to group the dates and display the id by time. How can I do that using javascript and highcharts? Thank you :)

PS: I don't know if you are interested in seeing my JavaScript code or not. I can post it if you want, just leave a comment below.

Answer 1

You can use this Grouped Categories plugin for Highcharts. Manipulate your data for Highcharts.xAxis and you are good to go.

Site: Plugin, Demo