Question

Looking to see if this chart is possible with HighCharts before jumping aboard any JS charting library – all advice very much appreciated, such as suggesting alternatives which will definitively support what I need.

• X-axis is a simple timeline.
• Y-axis will have various categories (labels left and right sides)
• For each category I will have zero to many events with start and end dates
• I would like to have a fine horizontal line representing each
  category (display only, no data)
• On each line, I would like to display a thicker bar representing
  events, from start to end date.

Doesn’t sound too complicated, but I haven’t seen an example of this type of graph anywhere on Tinterweb.

Thanks in advance,
Monty

Answer 1

• X-axis is a simple timeline.

The X-axis being a datetime works just fine. Depending on the span of time for the displayed chart it will automatically format the labels. You can modify the default formatting using dateTimeLabelFormats and tickInterval. The datetime can be controlled down to the millisecond.

• Y-axis will have various categories (labels left and right sides)

You can have as many Y-axis as you need. You can place them on either or both sides of the chart. Here is an example of a chart with two Y-axis. You can also have as many series as you need on the chart. You can tie each of them to a specific Y-axis and give them all different types if you want (ex spline, bar, pie and etc).

• For each category I will have zero to many events with start and end dates

If you do have a data point that does not have any data then you can specify it as null. Then continue on with the data points that have data.

• I would like to have a fine horizontal line representing each category (display only, no data)
• On each line, I would like to display a thicker bar representing events, from start to end date.

I think you are referring to grid lines here. If so, then you can change the gridLineWidth. You can also change the color and if needed you can add minor grid lines and manipulate them as you see fit. This can be done on either axis or both.

• Additional Notes

You can also send additional data to a point for displaying in the tooltip. As demonstrated here. In the example the locked, unlocked, and potential are user defined variables. You can draw objects in a chart. You can make your charts zoomable. You can drill down into a chart to show additional data based on data element. And the list goes on. There is a lot you can do. If all else fails you can add your own custom events and function to control anything else.

If I have a question on anything I search through the reference or demos. if I still can’t figure out how to do something I will ask here and get an answer that works for me.