Highcharts error 13 - Исправление ошибок и поиск оптимальных решений проблем

I use highchart so, the user can close and open the chart page and redraw the chart, in some case give me this error, how can I fix it, Thanks
Here is my code

 function populateGraph(graph1data1,graph1data2,id,time,bottomText,tickinterval){
$(function () {
  $('#'+id).highcharts({
      chart: {
          type: 'line'
      },
      xAxis: {
        tickWidth: 0,
        categories: ['1,2,3,4']
      },
      yAxis: {
        gridLineColor: '#fff',
          title: {
              text: ''
          },
          labels: {
              formatter: function() {
                  return '';
              }
          }              
      },
      navigation: {
        buttonOptions: {
            enabled: false
        }
    },
      series: [{
          name: 'This ',
          data: [1,2,3,4],
          color: '#1e71ef'     
      }, {
          name: 'Last ',
          data: [5,6,7,8],
          color:'#dfe0e1'
      }]
  });
});
}
}




       function loadOnlineDashboardChannel(channel){
          $.ajax({
          type: "get",
          dataType: 'html',
          data: {},
          url: "/companies/2/online_dashboard_channel",
          success: function(data, status){ 
          var obj = JSON.parse(data);
          var template_data = { 
            measures_list:   
              obj.measures         
          };
          $(function() { 
        var tmplHTML_measures = '{{#measures_list}} <div class="col-lg-11  col-lg-offset-1"><p class="indicator-title gray-bottom-border">{{name}}</br></p><div><p><span class="font30px">{{total}} </span> Total {{name}}<br><span class="green-text">{{increase}}%</span> from last <span class="metric_time"></span></p></div><div class="graph-header"><h3>{{this_interval}} </h3><p>New {{name}}</p><p class="percentage-graph green-text">{{percentag e}}%<p></div><div id={{graph_id}} class="graph"></div> </div>{{/measures_list}}';   
          Handlebars.render = function(tmpl, data){data = data || {};return                                                       Handlebars.compile(tmpl)(data);};  
      $("#template").empty().append(Handlebars.render(tmplHTML_measures,template_data) );
      var data_graph;
      for ( var i = 0; i < obj.measures.length; i++ ) {
        data_graph=obj.measures[i];
                      populateGraph(data_graph.this_interval_detail,data_graph.last_interval_detail,data_graph.graph_id,time,obj.bottom_graph_text,parseInt($('#timeframe-select').find(":selected").attr('interval')) );
      }              
     })


  },
  error: function(error) {

}
});

return this;
};

I use handlebar so in this part
in
var tmplHTML_measures
I create the div, in the for I call the function to draw the chart.

Thanks, I repeat sometimes it works perfectly and sometimes fail give me the error #13

1) Solution

I faced the same error and what I got to know is that Error#13 occurs when HighCharts.js tries to access an element which is not present in the DOM.

How I fixed it?
I made sure that the HightCharts method is called only after my targeted element is created in the DOM. Bingo!!!! Everything worked fine.

2) Solution

I had the same issue and fixed it using the correct container:

In my case I used the following:

// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
  // Create standard Highcharts chart with options:
  Highcharts.chart('Charts', {
    chart: {
      renderTo: 'container',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },....
  }.....
}

Template.body.helpers({
  createChart: function () {...}

and in the HTML file:

<div id='Charts'>
    {{createChart}}
</div>

I found the fix from Highcharts: http://forum.highcharts.com/viewtopic.php?f=9&t=15610

Regards.

3) Solution

For me error was resolved when I placed the calling script after the HTML element.

Like;

<div id="container"></div>

<script>    
Highcharts.chart('container', {
// some script here
});
</script>

Also if you check on high chart site it says:

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

https://www.highcharts.com/errors/13

4) Solution

Categories needs to be a collection, it was like this:

categories: xaxis

Change it to this:

categories: ['xaxis']

Some of the data fields need to be enclosed in single quotes like this:

data: 'blue'

Here is a fiddle without any errors for you:

http://jsfiddle.net/MVcBe/

Good luck with the rest.

ps I sometimes find it easier to edit a working fiddle from the highcharts site and adapt it to what you need. Like this one:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

5) Solution

Perhaps a bit late to the party, but the default name for the container in Highcharts example was ‘container’. The browser didn’t seem to like that, name clash perhaps, changing to ‘Chart’ did the trick.

6) Solution

This is an old question, but none of the answers are really satisfactory in my opinion.

I would suggest checking to make sure the chart div exists before rendering the chart.

if($('#'+id).length){ $('#'+id).highcharts({});}

7) Solution

Highcharts cannot find the div with a specified ID. It usually occurs when the library is trying to render the chart, but the div is not yet created in the DOM.

You’ve to debug your code and try to find the information whether that element is present on your site at the moment when Highcharts need to use it.

Solution

I loaded script codes after document ready function, and it worked fine.

$(document).ready(function(){
});

9) Solution

I also run into the same error code, but in my case the reason was my data was too large to supported

10) Solution

Also, make sure «highcharts-more.js» is declared in your HTML.

<script src="https://code.highcharts.com/highcharts-more.js"></script>

Comments Section

Hi, I change my post and add some code, Sometimes work and sometimes not, the element id is ok, thanks

Sorry that’s not my issue, I receive xaxis like a parameter, I change the code with a static xaxis, my problem is related with the id, sometimes find the id and sometimes not, sometimes work perfectly and sometimes give me this error, the error #13 highcharts.com/errors/13 (http://www.highcharts.com/errors/13)

@Marion The code all looks good to me, no errors. Pls can you post your html?

If highcharts is throwing that error than the jquery selector $('#id') is returning nothing. My guess would have been that you didn’t have your .highcharts call wrapped in a $(function () but in the code above you have that. Although you have an extra } at the end that doesn’t belong. Are you sure that the div id is unique? id="id" seems like a poor naming convention.

yes my id is unique, I create it dynamically with a unique name, I use handlebar for that

So you need to have also this name in highcharts, the id of div need to be the same as name of selector which you use to create highcharts

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — From Review (/review/low-quality-posts/12676571)

Thanks a lot for the advice. Updating the answer

Using Ionic, this means that you should not initialize the object in the constructor. You have to do it in ionViewDidLoad()

My issue was using a jQuery tag to reference an element, '#mainChartDiv' instead of just 'mainChartDiv'. The latter worked properly.

That’s it we need to specifie inside wdiv id=»» eather a barchart or linechar etc

This better post as a comment instead of an answer. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don’t require clarification from the asker.

should i delete this anwser ?

This would just not show the error in the console.

right, the error is thrown because the chart div is not present in the DOM. that’s an issue that could be caused by any number of things. you can address that in an else statement if need be in whatever way is sufficient for your application.

Related Topics
html
javascript
highcharts
handlebars.js
highstock

Mentions
Community
Sathia
Jay
Huang Botao
Lecorbu
Aamir Shahzad
Hutchonoid
Marion
Michael Couck

References
https://stackoverflow.com/questions/21536233/how-can-i-fix-highcharts-error-13

Источник

Answer by Martha Watts

You’ve to debug your code and try to find the information whether that element is present on your site at the moment when Highcharts need to use it.,Highcharts cannot find the div with a specified ID. It usually occurs when the library is trying to render the chart, but the div is not yet created in the DOM.,How I fixed it?
I made sure that the HightCharts method is called only after my targeted element is created in the DOM. Bingo!!!! Everything worked fine.,I use handlebar so in this part

in
var tmplHTML_measures
I create the div, in the for I call the function to draw the chart.

In my case I used the following:

// Use Meteor.defer() to create chart after DOM is ready:
Meteor.defer(function() {
  // Create standard Highcharts chart with options:
  Highcharts.chart('Charts', {
    chart: {
      renderTo: 'container',
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },....
  }.....
}

Template.body.helpers({
  createChart: function () {...}

and in the HTML file:

<div id='Charts'>
    {{createChart}}
</div>

Answer by Hattie Peck

A standard set of logs that I would use to troubleshoot highcharts error #13 are,Troubleshooting highcharts error # 13 | Highchart & Highstock @ jsFiddle ,These should be added just before calling the Highcharts constructor,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

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

Answer by Brianna Garza

Same problem over here. Ah apparently there is a PR fixing the problem, but the reference is not showing here. See #224 for the fix.,Uncaught Highcharts error #13: www.highcharts.com/errors/13,And off course there’s nowhere the listener is unattached, and the callbacks stack for each visit on the page with the chart.,

The text was updated successfully, but these errors were encountered:

                             <script type="text/javascript">
                      (function() {

                        document.addEventListener("turbolinks:load", function() {
                                  var options = { "title": { "text": "Average task completion for Hello World" },"legend": { "align": "right","verticalAlign": "top","y": 75,"x": -50,"layout": "vertical" },"xAxis": { "categories": [ "2016-10-11","2016-10-12","2016-10-13","2016-10-14" ],"title": { "text": null } },"yAxis": { "title": "Time in seconds" },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": {  } },"chart": { "defaultSeriesType": "column","renderTo": "project_raw_0" },"subtitle": {  },"series": [{ "name": "enrichment","yAxis": 0,"data": [ 18513.25,15254.0,30805.0,11741.0 ] },{ "name": "qc","yAxis": 0,"data": [ 28.25,33.5,1177.0 ] }] };

                      window.chart_project_raw_0 = new Highcharts.Chart(options);

                        });
                              })()
                      </script>