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.

this code should work, not sure what you mean by --> _But When I'm inspecting my other pages_... — WhiteHat, Jan 19 '18 at 12:41
@WhiteHat 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. — Ganesh Aher, Jan 19 '18 at 15:49

score 3 · Accepted Answer · answered Jan 19 '18 at 12:52

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>

Uncaught (in promise) Error: Container is not defined

1 Answers1