CODEWITHSUNDEEP
javascripthighcharts
acvcu
acvcu

Reputation: 2506

Combine bullet and line chart in highcharts

I'm using highcharts to display 16 line charts on a single web page - a sort of dashboard of data. However, I've been requested to add a 'bullet' chart with a progress indicator as well to go with each of the line charts. This is 32 charts on a single page. I have two questions related to this:

Is there a way to combine a bullet/bar chart and place it on top of the line chart? The main reason would be so that the exporting feature would include both charts. Here is a similar example (this is in fusion charts): http://www.ods.usf.edu/Plans/PPA/dashboard.htm .

Also, performance of the page is choppy when the charts render due to the number being rendered. Does anyone have a technique where I could load the charts 'above the fold' and the others later on to improve user experience?

Thanks!

Upvotes: 0

Views: 858

Answers (1)

jlbriggs
jlbriggs

Reputation: 17800

Any way of combining the two charts would be really hacky and difficult - you have one chart that is inverted, and one that is not. You'd have to recreate the bullet chart as a line instead of a bar, or convert your line data to work with inverted axes.

Both of those things seem undesirable, but if absolutely needed, I would go with creating the bullet out of line series.

You can run it with 2 stacked y axes to keep them on separate plot areas:

http://jsfiddle.net/jlbriggs/TP7tB/2/

You could ajax load the charts, either all on page load, or by capturing scroll events.

But really - that's 32 charts, but they're 32 very small and simple charts. Shouldn't be any problems with performance...

You can save overhead by setting the global chart options once, and only specifying the renderTo and data properties when calling each individual chart.

Also, if you do a search for exporting multiple charts, you should find a method to export your two charts without trying to build them as a single chart.

Upvotes: 1

Related Questions