[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3372
  • Last Modified:

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

0
Isaac
Asked:
Isaac
  • 3
  • 2
2 Solutions
 
worm-getterCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Ok. You were right.  I just added the container to the page but i still get the same error.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Never mind....I changed it at the wrong place.  I added the right container but my chart is not appearing. :(
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
IsaacSharePoint Client Side DeveloperAuthor Commented:
I get now errors now but no chart either and there is data.  Here's a image of my data values

datavalues
0
 
Rainer JeschorCommented:
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
 
Rainer JeschorCommented:
And thats the visual result:
Result from adjusted code
0

Featured Post

Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now