Geek asks and answers

HighCharts exception thrown

I am trying to run the same code in this jsFiddle locally, but I got an error from firebug

uncaught exception: Highcharts error #13: www.highcharts.com/errors/13

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

the same thing happens for this jsFiddle .

Does anyone know why this is happening?

EDIT . I found the cause of the problem. In fact, I have to put the tag <script type="text/javascript" src="test.js"></script>after the tag <div id="container"></div>, otherwise an uncaught exception will show, even I put the tag <script>in <head>. I have never put a script file in a tag <body>before, and this is the first time I have encountered this problem. Can someone explain to me why this is happening?

thank

+5
source share
3 answers

, Highcharts , renderTo div . . Www.highcharts.com/errors/13.

+18

/div, ,

, # 13, -

        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);

Highcharts

        chart = new Highcharts.Chart(chartingOptions);

, 1.

# 13 | Highchart Highstock @jsFiddle

,

JSON: { "chart": { "renderTo": "container"...}}
:
dom: 1

+2

I think I know why you should add this tag after div / div. If you are using JSP or any other server stuf. You should add your Highcharts script after declaring the div container so that it can recognize your div id and then continue rendering it. As in the example below:

    <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>
+1
source

More articles:


All Articles