Pie chart quick start example does not work

468 views
Skip to first unread message

Timothy Makobu

unread,
May 13, 2013, 3:21:46 AM5/13/13
to google-visua...@googlegroups.com
Hello all,

I'm getting started with GCT. The pie chart on the quickstart wont render though. Below is the error:

Timestamp: 5/13/2013 10:16:15 AM
Error: Error: Container is not defined
Line: 850

And here's my code:
    <script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart']});
   
    function drawChart(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
    ]);
   
    var options = {
    'title':'How much pizza I ate last night',
    'width':400,
    'height':300,
    }
   
    var chart = new google.visualization.PieChart(document.getElementById('slices_of_pie'));
    chart.draw(data, options);
    }
    google.setOnLoadCallback(drawChart);
   
   
    </script>

What I'm I doing wrong?

Daniel LaLiberte

unread,
May 13, 2013, 8:11:55 AM5/13/13
to google-visua...@googlegroups.com
Timothy,

You need an element in your page with id="'slices_of_pie" to serve as the container of the pie chart.  The error message sounds like it is saying this element is missing.

dan


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
dlaliberte@Google.com   562D 5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Timothy Makobu

unread,
May 13, 2013, 9:11:58 AM5/13/13
to google-visua...@googlegroups.com

Hi,

The div with that id is definitely there.

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1I1x9iP8PFU/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

asgallant

unread,
May 13, 2013, 9:30:04 AM5/13/13
to google-visua...@googlegroups.com
Post the full HTML that you are using and I will take a look.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 
dlali...@Google.com   562D 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1I1x9iP8PFU/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

Timothy Makobu

unread,
May 14, 2013, 3:36:27 AM5/14/13
to google-visua...@googlegroups.com
It seems its when I mix this code with jquery that it stops working. I was using $.getJSON to get "data" as in the code below:

$(document).load(
$.getJSON('/data/thedata.json', function(data){
console.log(data)
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Node Count');
data.addRows(data);
var options = {'title':'Tor Nodes by Country',
          'width':800,
          'height':600};
var chart = new google.visualization.PieChart(document.getElementById('nodes'));
chart.draw(data, options);
}
}
)
)


withouth the jquery, and a hard coded list fed to data.addRows, it runs fine. Is there a google js api alternative to $.getJSON? Or how can I make the above work?




To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Timothy Makobu

unread,
May 14, 2013, 5:28:50 AM5/14/13
to google-visua...@googlegroups.com
The data /data/thedata.json returns is "[[\"Canada\", 66], [\"Turkey\", 10], [\"Hungary\", 23], [\"Italy\", 49]]" 

Whats the best way to feed it to data.addRows();

asgallant

unread,
May 14, 2013, 9:53:11 AM5/14/13
to google-visua...@googlegroups.com
The google API doesn't like being loaded inside other functions.  Try this instead:

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON('/data/thedata.json', function(data){
console.log(data);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Node Count');
data.addRows(data);
var options = {
title: 'Tor Nodes by Country',
width: 800,
height: 600
};
var chart = new google.visualization.PieChart(document.getElementById('nodes'));
chart.draw(data, options);
});
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
dlali...@Google.com   562D 5CC, Cambridge MA
daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1I1x9iP8PFU/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/1I1x9iP8PFU/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages