Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

Google Charts "Container is not defined"

I have a snippet of code that works except when it comes to building my chart.

The part that begins with " var options = {" and below is where it errors out.  The error is "Container is not defined".


It all looks fine to me but can't pin-point where the problem is.
It's supposed to look like this http://jsfiddle.net/GTpgA/1/

// Initialize data object to hold chart data
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Planned RIP');
    data.addColumn('number', 'Actual RIP');
    data.addColumn('number', 'Anticipated RIP');

var val1 = dataValues[0][1];
var val2 = dataValues[0][2];
var val3 = dataValues[0][3];

data.addRow(['FY12', dataValues[0][1], null, null]);
data.addRow(['FY12', null, dataValues[0][2], dataValues[0][3]]);

val1 = dataValues[1][1];
val2 = dataValues[1][2];
val3 = dataValues[1][3];

data.addRow(['FY13', dataValues[1][1], null, null]);
data.addRow(['FY13', null, dataValues[1][2], dataValues[1][3]]);		

    var options = {
    	width: 600,
    	height: 400,
    	isStacked: true,
    title: chartTitle,
        titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '15' },
        legend: { textStyle: { color: 'black', fontName: '"Arial"', fontSize: '12' } },
        tooltip: { textStyle: { fontName: '"Arial"' } },
        colors: ["#FFFF00", "green", "blue", "#FF8000", "Red"],
        backgroundColor: {
            fill: '#D8D8D8',
            strokeWidth: '0'
        },
        vAxis: {
            title: "Number of Sites", format: '#',
            titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' },
            gridlines: { count: countVAxis, color: 'black' },
            minValue: minVAxis,
            maxValue: maxVAxis
        },
        hAxis: { title: "Year", titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' } },
          colors: [
            '#FF8080',
            '#8080FF',
            '#FF0000',
            '#0000FF'],
          seriesType: "bars"
    }
    var chart = new google.visualization.ComboChart(document.getElementById(chartType));
    chart.draw(data, options);

Open in new window

SOLUTION
Avatar of worm-getter
worm-getter

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

Ok. You were right.  I just added the container to the page but i still get the same error.
Avatar of Isaac

ASKER

Never mind....I changed it at the wrong place.  I added the right container but my chart is not appearing. :(
Avatar of Isaac

ASKER

I get now errors now but no chart either and there is data.  Here's a image of my data values

User generated image
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
And thats the visual result:
User generated image