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.

Enceladus

@WhiteHat Yes, I just update my question, please check it. – Enceladus

this code should work, not sure what you mean by --> But When I'm inspecting my other pages... – Monocycle

@Monocycle I'm using google charts on my app's Dashboard page, When I'm other page (ex. Add Item page), and when I'm inspecting it using google chrome DevTools, it shows that error. – Enceladus

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>

Monocycle