someone new someone new - 5 days ago 6
HTML Question

JavaScript highcharts: how to have two xAxis categories?

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:

This is what I have so far

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

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

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

Site: Plugin, Demo

Comments