Highcharts error #13 while instantiating highchart

Question

Possible Duplicate:
HighCharts uncaught exception

I'm trying to instantiate a highcharts objects with this code:

$(function () {
    var chart;
    var json = null;
    $.getJSON('{%  url ajax_search 'pie_chart'  %}?{{request.META.QUERY_STRING}}',
             function(data, textStatus, jqXHR)
            {
                json = data.template;
                            console.log(json);
                chart = new Highcharts.Chart(json);
            });
})

The console logs the returned json appropriately.

When I copy and past in the json to where the (json) is, the chart renders. However, as it is now, it throws the following error: Uncaught Highcharts error #13: www.highcharts.com/errors/13

Following that link it says:

This error occurs if the chart.renderTo option is misconfugured so that Highcharts is unable to find the HTML element to render the chart in

However, again, if I copy and past the json (from the console) to where the variable would otherwise be, it works fine.

I'm sure this is something simple. What am I doing wrong here?

Answer 1

The element/div you are trying to render the chart to is missing, can you share the json that is printed in the console? Additionaly, if you can add the following more logs to give us a better understanding of the picture.

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