CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Uncaught Error: Container Is Not Defined - Google Charts

I'm trying to load a google chart and am getting the following answer:

Uncaught Error: Container is not defined

I've read the other questions about this message for Google charts and the most common problem seems to be if getElementById isn't working correctly.

However, I don't believe this is the issue for me, or at least not an issue in the same way it is for others.

This is the Google Charts code I have:

google.load('visualization', '1.0', {'packages':['gauge']});

google.setOnLoadCallback(drawChart);

function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["Label", "Value"],
            ["Match", state.greens[0].score]
        ]);

        var options = {
            redFrom: 90, redTo: 100,
            yellowFrom: 75, yellowTo: 90,
            minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById("chart-div"));
        chart.draw(data, options);

        setInterval(function() {
            data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
            chart.draw(data, options);
            }, 13000);
};

This is almost point blank what Google has in their Gauge chart reference: https://developers.google.com/chart/interactive/docs/gallery/gauge

I'm literally just trying to use the most straightforward example from their docs to generate a chart with my data.

Here's the html I have:

<div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <div class="chart-div">
                    </div>
                </div>
            </div>

I have the javascript in a separate file, and load the api in the head of my html file.

What am I missing?

Upvotes: 2

Views: 5631

Answers (2)

Downgoat
Downgoat

Reputation: 14371

Along with the previous answer. You can still keep it a class but do:

document.querySelector(".chart-div");

Or if you want to have more support:

var elems = document.layers || document.all || document.getElementsByTagName("*");
//          Netscape           < IE 6          All Other
for (var i = 0; i < elems.length; i += 1) {
    if (elems[i].className === 'chart-div') {
        // Do something with those elements
    }
}

I think this supports as back down as Netscape 5 but don't hold me on that.

Upvotes: 2

vol7ron
vol7ron

Reputation: 42139

document.getElementById("chart-div") looks for an element with an id set to chart-div. Your div is using the class attribute instead of the id attribute. Change <div class="chart-div"></div> to <div id="chart-div"></div>

Alternatively, you can do document.getElementsByClassName('chart-div')[0], where 0 is the ordinal of the element you want. This way may be preferred, since you could post multiple charts on a page; but note getElementsByClassName is not supported in older browsers (pre IE-9)

Upvotes: 2

Related Questions