title: Race condition leading to Highcharts error #13
body: <p>I have some tabs which are generated dynamically. Clicking on any of this tabs loads multiple charts(three or four) like a pie, column or a linechart simultaneously. I append this charts into dynamically generated html divs. All works good if i had to click a tab and wait for all the charts to be loaded. Problem happens when i keep on clicking tabs one after the other and not wait till all the charts are loaded. i get a javascript error inside highcharts.js file which logs Highcharts error #13. As far as i know i am doing proper document ready checks and then loading my charts into the divs. What seems to be the problem ? Is there a race condition happening or due to my code running asynchronously leading to problems? Here is the code:</p>
  
  <pre><code>//Function called on tablick:
  function GetPod(podObj) {
  
          savedPortletsObj = [];
          var objtab = new Array();
          var htmlMarkup = '';
          $('#podHolder').empty();
  
          for (v = 0, pCount = podObj.length; v &lt; pCount; v++) {
              htmlMarkup = "";
              // htmlMarkup = htmlMarkup + " &lt;div  class='table-cell'&gt;";
              htmlMarkup = htmlMarkup + " &lt;article class='db-box bigFont' id='" + podObj[v].id + "_art' style='height: 100%;'&gt;";
              htmlMarkup = htmlMarkup + " &lt;div class='box-head' &gt;&lt;span&gt; &lt;strong&gt;" + podObj[v].title.toString() + "&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;";
              htmlMarkup = htmlMarkup + " &lt;div class='dashboard-container'&gt;";
              htmlMarkup = htmlMarkup + " &lt;div class='tableContentDiv height250 fadeInBox' id='" + podObj[v].id + "'&gt; "; // Charts are appended into this div
              htmlMarkup = htmlMarkup + " &lt;/div&gt;";
              htmlMarkup = htmlMarkup + " &lt;/div&gt;";
              htmlMarkup = htmlMarkup + " &lt;/article&gt;";
              // htmlMarkup = htmlMarkup + " &lt;/div&gt;";
              $(htmlMarkup).appendTo($('#podHolder')); // Finally appending the chart div to the parent div
              buildChart(podObj[v]);
              savedPortletsObj[v] = podObj[v];
          }
  </code></pre>
  
  <p>// Then i call buildChart</p>
  
  <pre><code>function buildChart(podObj) {
          switch (podObj.PodAttributes.type) {
              case "ColumnChart":
                  // chartTypes[podObj.id] = podObj.PodAttributes.type;
                //  requirejs(["HTML5SpendDashboard/includes/js/views/column.chart.js"], function () {
                      var objChart = ColumnChart.getInstance();
                      onSuccessLoadChart(podObj, objChart);
                //  });
                  break;
              case "dataGrid":
                  //  chartTypes[podObj.id] = podObj.PodAttributes.type;
                 // requirejs(["HTML5SpendDashboard/includes/js/views/grid.js"], function () {
                      var objChart = DataGrid.getInstance();
                      onSuccessLoadChart(podObj, objChart);
                 // });
  
                  break;
              case "lineChart":
                 // //  chartTypes[podObj.id] = podObj.PodAttributes.type;
                  //requirejs(["HTML5SpendDashboard/includes/js/views/line.chart.js"], function () {
                      var objChart = LineChart.getInstance();
                      onSuccessLoadChart(podObj, objChart);
                 // });
                  break;
              case "pieChart":
                  //  chartTypes[podObj.id] = podObj.PodAttributes.type;
                 // requirejs(["HTML5SpendDashboard/includes/js/views/pie.chart.js"], function () {
                      var objChart = PieChart.getInstance();
                      onSuccessLoadChart(podObj, objChart);
                //  });
                  break;
          }
      }
      function onSuccessLoadChart(podObj, objChart) {
  
          objChart.BaseViewRef.Variables.ViewProperties = podObj;
          objChart.Build();
  
      }
  </code></pre>
  
  <p>// FInally Build is called after the instance was created for it , For eg: Column chart will be (Have created a separate js files for each chart)</p>
  
  <pre><code>var ColumnChart = (function () {
  var instantiated;
  var chart;
  function init() {
      return {
          "ResultMethodName": "onResultHttpService",
          "Message": "ColumnChartdemo",
          "Build": function () {
              var objServiceLayer = $SL.getInstance();
              var param = {};
              param["QueryID"] = this.BaseViewRef.Variables.ViewProperties.InputParams;
              objServiceLayer.executeMethod("GetPodFilterData", param, "onResultHttpService", this, this.BaseViewRef.Variables.ViewProperties);
  
          },
          "BaseViewRef": $BV.getInstance(),
          "onResultHttpService": function (result, properties) {
              var json_str = Sys.Serialization.JavaScriptSerializer.deserialize(result);
              var data = [];
              var cat = [];
              var categoryField = properties.PodAttributes.categoryField;
              var valueField = properties.PodAttributes.valueField;
              for (var i in json_str) {
                  var serie = new Array(json_str[i][categoryField], json_str[i][valueField]);
                  var tmpCat = new Array(json_str[i][categoryField]);
                  data.push(serie);
                  cat.push(tmpCat);
              }
  
              $(document).ready(function () {
                  chart = new Highcharts.Chart({
                      chart: {
                          renderTo: properties.id,
                          type: 'column'
                      },
                      credits: {
                          enabled: false
                      },
                      title: {
                          text: ''
                      },
                      subtitle: {
                          text: ''
                      },
                      xAxis: {
                          categories: cat
                      },
                      yAxis: {
                          labels: {
                              formatter: function () {
                                  return this.value / properties.PodAttributes.divideBy
                              + properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase();
                              }
                          },
                          min: 0,
                          title: {
                              text: ''
                          }
                      },
                      legend: {
                          layout: 'vertical',
                          backgroundColor: '#FFFFFF',
                          align: 'left',
                          verticalAlign: 'top',
                          x: 100,
                          y: 70,
                          floating: true,
                          shadow: true
                      },
                      tooltip: {
                          formatter: function () {
                              return '' +
                          this.x + ':' + '&lt;/br&gt;' + properties.PodAttributes.dataTipUnitLabel.split('*')[0] +
                          Highcharts.numberFormat(this.y / properties.PodAttributes.divideBy, properties.PodAttributes.dPoint) +
                          properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase();
                          }
                      },
                      plotOptions: {
                          series: {
                              allowPointSelect: true,
                              point: {
                                  events: { click: function () {
                                      //                                    alert(this.category + ' : ' + Highcharts.numberFormat(this.y / properties.PodAttributes.divideBy, properties.PodAttributes.dPoint) +
                                      //                            properties.PodAttributes.dataTipUnitLabel.split('*')[1].toUpperCase());
                                      podsToRefresh = html5SpendDashboard.getInstance().getSavedPodObj();
                                      var objBuildChart = html5SpendDashboard.getInstance();
                                      for (var p = 0, pLen = podsToRefresh.length; p &lt; pLen; p++) {
                                          objBuildChart.buildChart(podsToRefresh[p]);
                                      }
                                  }
                                  }
                              }
                          },
                          column: {
                              pointPadding: 0.2,
                              borderWidth: 0
                          }
                      },
                      series: [{
                          showInLegend: false,
                          data: data
                      }]
                  });
              });         
          }
  
      };
  };
  
  return {
      getInstance: function () {
          return instantiated = init();
      }
  };
  </code></pre>
  
  <p>})();</p>