Highcharts Error #16: charts not showing on the same page

i have a website, one page i have successfully added an highchart.

now i copied exactly the same code to the same page, but diffrent asp page, but the first chart has disappeared and the 2nd chart is not showing.

it is giving 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 am getting 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>

the chart that is working has the following code:
 <script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://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 2nd chart shows.

but the first chart doesnt,

both code is in diffrent acsx page!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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="https://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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
  3. For chart One:
    $('#container1').highcharts({//other code

    For chart Two:
     $('#container2').highcharts({//other code

Method 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x