Wednesday, June 5, 2024
 Popular · Latest · Hot · Upcoming
35
rated 0 times [  41] [ 6]  / answers: 1 / hits: 41199  / 11 Years ago, fri, june 28, 2013, 12:00:00

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!


More From » asp.net

 Answers
8

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


[#77341] Thursday, June 27, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
nolancampbellc

Total Points: 9
Total Questions: 102
Total Answers: 101

Location: Saint Vincent and the Grenadines
Member since Mon, Jan 16, 2023
1 Year ago
nolancampbellc questions
Thu, Sep 23, 21, 00:00, 3 Years ago
Mon, Nov 23, 20, 00:00, 4 Years ago
;