CODEWITHSUNDEEP
chartscontainers
Mike
Mike

Reputation: 321

"Container is not defined" Google chart

I have solved my issue but can't answer it myself since I am too new to this site:

turns out I needed to use the following:

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));

I was using JQuery to access the element, $('#pie_today_div'). As of now the evidence points to the fact that the PieChart constructor has to have standard JS code, document.getElementById('pie_today_div')

Maybe something else going on, but changing the way I access the container element fixes my code

ORIGINAL ISSUE FOR REFERENCE TO MY SOLUTION

I am getting a "Container is not defined" error when I am trying to instantiate a Google PieChart object.

I validated my page at http://validator.w3.org/ and i get a pretty green banner saying it validates.

I receive no js errors when the page loads. My Ajax call is making a full round trip with the data I want from the DB.

Here is my HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
        <script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
        <title>Call Stats</title>
    </head>
    <body>
        <a href="#" id="pie_today_link">Today Stats</a>
        <div id="pie_today_div"></div>
    </body>
</html>

here is the js:

function drawPieChartToday() {

    $.post('/call/ajax.php5',{
        action:'pieToday'
    }, function(ticketData) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Count');
        data.addColumn('number', 'Topic');
        for (var key in ticketData){
            data.addRow([key, ticketData[key]]);
        }
        options = {
            title: 'Issue Topics'
        };
        alert($('#pie_today_div').attr('id'));
        chart = new google.visualization.PieChart($('#pie_today_div'));
        chart.draw(data, options);
    },'json');     
}

here is my debugging code to make sure the element was being found: alert($('#pie_today_div').attr('id')); <-- alerts "pie_today_div"

Upvotes: 31

Views: 68304

Answers (6)

Shubham padhi
Shubham padhi

Reputation: 1

import { Container } from "react-bootstrap";

Upvotes: 0

Salman Basheer Khan
Salman Basheer Khan

Reputation: 1

use $timeout before init, it works well, else you need to destroy the instance

Upvotes: 0

Tom Stickel
Tom Stickel

Reputation: 20411

A container error is exactly that, It is looking for the ID example:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

You WILL get this error “Container is not defined” for Google Charts if you are missing that ID Thus a Div with that chart_div id would fix this

Upvotes: 17

Akbar
Akbar

Reputation: 11

There must be line where you load the types of visualization you want to have in your web page. It looks like this 

google.load("visualization", "1", {packages: ["corechart"]});

Here I am loading package corechart. Place this line as the first line after in the <script> tag inside your HTML page like index.html. That should solve he problem.

Upvotes: 1

Alkanshel
Alkanshel

Reputation: 4429

Just wanted to mention, this happened for me after a simple mistake. I changed

var data = new google.visualization.DataTable(huh);

to the following in an effort to change the chart type:

var data = new google.visualization.BarChart(huh);

but this is all wrong, you change the chart where you mention the container:

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

Upvotes: -1

abidibo
abidibo

Reputation: 4287

I'm not a jquery fan, but I think that $('#pie_today_div') returns a set of matched elements. The attribute computation works because (from jquery documentation) it "gets the value of an attribute for the first element in the set of matched elements".

So try 

chart = new google.visualization.PieChart($('#pie_today_div')[0]);

or directly

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));

Upvotes: 35

Related Questions