Uncaught (in promise) Error: Container is not defined

Question

I'm using a google chart (pie chart) in my Code-Igniter application. I'm displaying charts on my Dashboard view page, and I'm getting proper result. But When I'm inspecting my other pages then I got an error

Uncaught (in promise) Error: Container is not defined.

error:

Uncaught (in promise) Error: Container is not defined

at gvjs_3m (jsapi_compiled_default_module.js:66)

at gvjs_9K.gvjs_7p [as constructor] (jsapi_compiled_default_module.js:232)

at gvjs_9K.gvjs_8K [as constructor] (jsapi_compiled_ui_module.js:979)

at new gvjs_9K (jsapi_compiled_ui_module.js:1010)

at drawChart (landlordAdd:648)

at landlordAdd:623

at

My Chart Code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $.ajax({
        url: "<?php echo base_url().'Dashboard/chartData'; ?>",
        dataType: "JSON",
        success:function(result){
          google.charts.load('current',{
            'packages':['corechart']
          });
          google.charts.setOnLoadCallback(function(){
            drawChart(result);
          });
          //alert(result);
        }
      });

      function drawChart(result) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'defects');

        var dataArray = [];

        $.each(result, function(i, obj) {
          dataArray.push([obj.name, parseInt(obj.defects)]);
        });

        data.addRows(dataArray);

        var piechart_options = {
          title : 'Defects Registered',
          width : 500,
          height: 300,
          is3D: true,
        };
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);
      }
    });
  </script>

HTML CODE:

<div class="box-body">
    <table class="columns">
        <tr>
            <td>
                <div class="col-md-6" id="piechart_div"></div>
            </td>
            <td>
                <div class="col-md-6" id="donutchart_div"></div>
            </td>
        </tr>
    </table>
</div>

I'm confuse why I'm getting that error on other pages rather getting error on dashboard?

Any kind of help is welcome, thanks in advance.

Answer 1

although this probably won't resolve your issue,
you can actually use google.charts.load instead of --> $(document).ready
by default, google.charts.load will wait until the document is ready

recommend a little different setup...

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $.ajax({
    url: "<?php echo base_url().'Dashboard/chartData'; ?>",
    dataType: "JSON",
    success:function(result){
      drawChart(result);
    }
  });

  function drawChart(result) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'defects');

    var dataArray = [];

    $.each(result, function(i, obj) {
      dataArray.push([obj.name, parseInt(obj.defects)]);
    });

    data.addRows(dataArray);

    var piechart_options = {
      title : 'Defects Registered',
      width : 500,
      height: 300,
      is3D: true,
    };
    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
    piechart.draw(data, piechart_options);
  }
});

</script>

---

but you need to check that all pages throwing the error,
have a div element with the id used when drawing the chart...

// check for div with proper id
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));

---

substituting hard-coded data in the error callback,
the code you posted works fine...

see following working snippet

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $.ajax({
    url: "<?php echo base_url().'Dashboard/chartData'; ?>",
    dataType: "JSON",
    success: function(result){
      drawChart(result);
    },
    error: function () {
      var result = [
        {name: 'defect 1', defects: '1'},
        {name: 'defect 2', defects: '2'},
        {name: 'defect 3', defects: '3'},
        {name: 'defect 4', defects: '4'},
        {name: 'defect 5', defects: '5'}
      ];

      drawChart(result);
    }
  });

  function drawChart(result) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'defects');

    var dataArray = [];

    $.each(result, function(i, obj) {
      dataArray.push([obj.name, parseInt(obj.defects)]);
    });

    data.addRows(dataArray);

    var piechart_options = {
      title : 'Defects Registered',
      width : 500,
      height: 300,
      is3D: true,
    };
    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
    piechart.draw(data, piechart_options);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="box-body">
    <table class="columns">
        <tr>
            <td>
                <div class="col-md-6" id="piechart_div"></div>
            </td>
            <td>
                <div class="col-md-6" id="donutchart_div"></div>
            </td>
        </tr>
    </table>
</div>