Menu
I am trying to run the same code in this jsFiddle locally but I got error from firebug
uncaught exception: Highcharts error #13: www.highcharts.com/errors/13
The included script fiels:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>
<script type="text/javascript" src="test.js"></script> // my js file
same thing happens for this jsFiddle as well.
Anyone know why this happens?
EDIT: I've found the reason for the problem. Actually I have to put the <script type="text/javascript" src="test.js"></script> tag after my <div id="container"></div> tag, otherwise the uncaught exception will be showing even I put the <script> tag in <head>. I never put the script file in the <body> tag before, and this is the first time I met this problem. Can Someone explain me why that happen?
Thanks
543
This means that Highcharts is loaded and the config is loaded, but the renderTo option is wrong, or there is no div with that id in the page. See www.highcharts.com/errors/13.
78
The element/div you are trying to render the chart to is missing
A standard set of logs that I would use to troubleshoot highcharts error #13 are
console.log("JSON: " + JSON.stringify(chartingOptions));
console.log("Render to element with ID : " + chartingOptions.chart.renderTo);
console.log("Number of matching dom elements : " + $("#" + chartingOptions.chart.renderTo).length);
These should be added just before calling the Highcharts constructor
chart = new Highcharts.Chart(chartingOptions);
If all is well you should see the correct element ID, and length as 1.
Troubleshooting highcharts error # 13 | Highchart & Highstock @ jsFiddle
Here is the log that is seen for the demo above
JSON: {"chart":{"renderTo":"container"...}}
Render to element with ID : container
Number of matching dom elements : 1
25
I think I know why you should add that tag after the div /div. If you are using a JSP or any other server-side stuf. You should add your Highcharts script after the declaration of the div container so it can recognize your div's id and then proceed to render it. Just like I did in the example bellow:
<head>
<title>HighCharts :D</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
var myChart = Highcharts.chart('container', {
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>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
