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_piled_default_module.js:66)

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

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

at new gvjs_9K (jsapi_piled_ui_module.js:1010)

at drawChart (landlordAdd:648)

at landlordAdd:623

at

My Chart Code:

<script type="text/javascript" src=".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 wele, thanks in advance.

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_piled_default_module.js:66)

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

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

at new gvjs_9K (jsapi_piled_ui_module.js:1010)

at drawChart (landlordAdd:648)

at landlordAdd:623

at

My Chart Code:

<script type="text/javascript" src="https://www.gstatic./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 wele, thanks in advance.

• javascript
• jquery
• ajax
• google-visualization
• pygooglechart

Share Improve this question Follow edited Jan 19, 2018 at 12:34 Ganesh Aher asked Jan 19, 2018 at 3:52 Ganesh AherGanesh Aher 1,12633 gold badges2424 silver badges5252 bronze badges 3

• @WhiteHat Yes, I just update my question, please check it. – Ganesh Aher Commented Jan 19, 2018 at 12:34
• this code should work, not sure what you mean by --> But When I'm inspecting my other pages... – WhiteHat Commented Jan 19, 2018 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 Commented Jan 19, 2018 at 15:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

remend a little different setup...

<script type="text/javascript" src="https://www.gstatic./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./charts/loader.js"></script>
<script src="https://ajax.googleapis./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>