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

Question

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="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 2nd chart shows.

but the first chart doesnt,

both code is in diffrent acsx page!

Answer 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="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="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>
   

3. For chart One:

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

   For chart Two:

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