Menu
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"
412
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')); 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
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
