How to put two charts on the same page with different modules?

2
votes

I've put two charts on one page. The first chart (scatter) was created using a Highcharts and the second chart (line) was created using a Highstock. As the Highcharts is included in the Highstock so I use this:

<script src="resources/chart/Highstock/js/highstock.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

The part of my page looks like this:

<script src="resources/chart/Highstock/js/highstock.js"></script>
<script src="resources/chart/Highstock/js/modules/boost.js"></script>   
<script src="resources/chart/Highstock/js/modules/exporting.js"></script>

<script type="text/javascript"> create the chart using the highcharts and put it in a containerForHighchart </script>
<script type="text/javascript"> create the chart using the highstock and put it in a containerForHighstock </script>

<div id="containerForHighchart" style="height: 700px; width: 100%; margin: 0 auto;"></div>
<div id="containerForHighstock" style="height: 700px; width: 100%; margin: 0 auto;"></div>

Now: I'd like to achieve something like this:

  • The first chart (highcharts) should use the boost.js module.
  • The second chart (highstock) shouldn't use the boost.js module.

Why? Due to performance and some bug. Both charts have to display a lot of data.

When I use boost.js and put only one chart on the page:

  • the chart of highstock is loading very slowly, most of the time the browser inform me that the page isn't responding and at the end I can only see a navigator without the chart;
  • the chart of highchart is loading fast.

When I don't use boost.js and put only one chart on the page:

  • the chart of highstock is loading fast;
  • the chart of highchart is loading too long and is very slow.

Is there any way to only one of the two charts use the boost.js module on the same page?

1
javascripthighchartshighstock
The boost.js file overwrites some methods form Highcharts, so you cannot choose if chart should be build-in by boost or not. Anyway this is a good idea, so I advice you to post your suggestion in our uservoice here: highcharts.uservoice.com – Sebastian Bochan
Thanks for your feedback. I'll do it. BTW: Is there any way to the scatter chart from Highstock without the boost.js module run as fast as the scatter chart from Highcharts with the boost.js module? The scatter chart from Highstock with the boost.js module run very slow (I read the advices about setting options here but the chart still works bad. It run very slow as well if I don't use the boost.js module (in my case the dataGrouping option has to be false) . – Robert

1 Answers

1
votes

One solution you could try is to put the charts in separate web pages (by themselves) and use <iframe> tags to place them both in a single HTML document. That way, you could control which chart gets which libraries, and they shouldn't conflict with one another.