Solved

Google Charts "Container is not defined"

Posted on 2013-05-19
6
3,156 Views
Last Modified: 2013-05-19
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

0
Comment
Question by:Isaac
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 6

Assisted Solution

by:worm-getter
worm-getter earned 250 total points
ID: 39179582
Container not defined generally means it can't find the corresponding div id on the page – because it probably does not exist.
Check the load order of objects.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39179605
Ok. You were right.  I just added the container to the page but i still get the same error.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39179613
Never mind....I changed it at the wrong place.  I added the right container but my chart is not appearing. :(
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

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

datavalues
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 250 total points
ID: 39179635
Hi,
there are some errors in your statements, e.g. using a combination of single AND double quotation marks.
Please ensure that all variables you use are initialized (e.g. minVAxis ...)

I have replaced the data values with hard coded numbers, but this code runs on my SP2010 as Content Editor web part:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
	function GenerateMyChart() {
		// RAINERJ Area: I had to add because these variables have been used in org code
		var chartTitle = 'My Chart Title';
		var countVAxis = 5;
		var minVAxis = 0;
		var maxVAxis = 15;
		
		// 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');

		data.addRow(['FY12', 5, null, null]);
		data.addRow(['FY12', null, 4, 3]);

		data.addRow(['FY13', 10, null, null]);
		data.addRow(['FY13', null, 6, 8]);		

		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('HereComesMyChart'));
			chart.draw(data, options);
	}
	google.setOnLoadCallback(GenerateMyChart);
</script>
<div id="HereComesMyChart"></div>

Open in new window


If you have IE 9 or 10, you might want to use the developer tools - there should be some JS error, and the tools will just show the detailed error.

HTH
Rainer
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39179637
And thats the visual result:
Result from adjusted code
0

Featured Post

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question