Highcharts Error # 16: Charts Not Displaying on One Page

Question

I have a website, on one page I have successfully added a high level.

now I copied exactly the same code to the same page, but on a different asp page, but the first diagram disappeared and the second diagram does not appear.

this gives me an error:

Uncaught Highcharts error #16: www.highcharts.com/errors/16 highcharts.js:16 Uncaught SyntaxError: Unexpected token ILLEGAL Dashboard.aspx:657 Uncaught TypeError: Object [object Object] has no method 'highcharts' Dashboard.aspx:405 Uncaught TypeError: Object [object Object] has no method 'draggable' 

any ideas why i get this.

so my code for the new chart i want:

  <script type="text/javascript" $(function () { $('#container').highcharts({ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: ['Apples', 'Bananas', 'Oranges'] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); });​ ></script> 

a working diagram has the following code:

  <script type="text/javascript" src="http://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> <script type="text/javascript"> $(function() { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'Chart' }, xAxis: { categories: array1 }, yAxis: { title: { text: 'aWH' } }, tooltip: { pointFormat: "Value: {point.y:.1f} mm" }, series: [{ name: '2011-2012', color: '#0000FF', data: array }, { name: '2012-2013', color: '#92D050', data: array3 }, { color: '#FF0000', name: '2013-2014', data: array2 }] }); }); </script> 

The second graph is shown.

but the first chart doesn’t,

Both codes are on another acsx page!

Answer 1

if you go to the indicated error link

Highcharts Error # 16

Highcharts already defined on the page

This error occurs the second time that Highcharts or Highstock are loaded onto the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all Highcharts functions are included in Highstock, so if you use a combination of Chart and StockChart in combination, you need to download the highstock.js file.

Check if you copied the library of scripts for high graphs a second time when your code should contain only once:

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

Edit

You are trying to show charts in the same div as $('#container') Here the container is the identifier for the div. When both ascx are rendered on the page, it finds the same div with the Id container and displays a chart that overrides one of them. So

• 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> 

• Remove the script (next) from ascx and put it in MasterPage .:

   <script type="text/javascript" src="http://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> 

• For the first chart:

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

  For chart 2:

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

Answer 2

You can use this method to wrap code that runs the 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/312929/ and it works for me.

This way you do not need to put your script in MasterPage if you do not want to.

Be sure to use a unique name unique , as it is a global variable.

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