score:27

Accepted answer

if you go to Given Error Link

Highcharts Error #16

Highcharts already defined in the page

This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

Check whether you copied the scripts library for highcharts second time your code should contain only one time:

<script src="http://code.highcharts.com/highcharts.js"></script>

Edit

You are trying to show charts in same div as $('#container') Here container is the Id for div. When both ascx render in a page it find the same div with Id container and render the chart which override one of it. so

  1. Make two separate divs:

    <div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

  2. Remove script(following) from ascx and put it in MasterPage.:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

  3. For chart One:

    $('#container1').highcharts({//other code

    For chart Two:

     $('#container2').highcharts({//other code

score:2

You can use this way to wrap the code which runs Highcharts.js library.:

if (!window.HighchartsUniqueName) {
  window.HighchartsUniqueName = true;

  // .. your code which runs Highcharts.js library here ... 

}

I found it here https://stackoverflow.com/a/5154971 and it works for me.

In this way you don't need to put your script in the MasterPage if you don't want.

Be sure to use a very unique name, since it's a global variable.

Also keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file or you can wrap it in the same way.


Related Query

More Query from same tag