How to code a Pie Chart to have a varying number of slices?

Cory Huntington

unread,

Dec 18, 2015, 11:34:53 AM12/18/15

to Google Visualization API

Hello;

I have a rather simple 3D pie chart where I read the labels and values from a database query and dump them into an array; this is working fine if I use a set number of results - ie, a top 10 query, etc. For example, the code below I list the top 9 call drivers, and group the remaining values into an "Other" category - so there are always 10 slices to the pie.

What I would like to do is do a loop or somehow allow the chart to draw for an unknown number of elements... for example, a pie chart on users where users change frequently - so one week there may be 7 slices total, the next week 11, then 8, etc.

Is there a way to dynamically adjust the number of slices?

here's my current code with a 10 row array from the database:

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

[' Call Drivers', 'Count'],

['<% =CallDriverArray(0,0) %>', <% =CallDriverArray(0,2) %>],

['<% =CallDriverArray(1,0) %>', <% =CallDriverArray(1,2) %>],

['<% =CallDriverArray(2,0) %>', <% =CallDriverArray(2,2) %>],

['<% =CallDriverArray(3,0) %>', <% =CallDriverArray(3,2) %>],

['<% =CallDriverArray(4,0) %>', <% =CallDriverArray(4,2) %>],

['<% =CallDriverArray(5,0) %>', <% =CallDriverArray(5,2) %>],

['<% =CallDriverArray(6,0) %>', <% =CallDriverArray(6,2) %>],

['<% =CallDriverArray(7,0) %>', <% =CallDriverArray(7,2) %>],

['<% =CallDriverArray(8,0) %>', <% =CallDriverArray(8,2) %>],

['Other', <% =otherTotal %>]

]);

var options = {

title: '',

hAxis: {title: '', titleTextStyle: {color: 'red'}},

fontSize: '11',

is3D: true,

chartArea:{left:10,top:10,width:"95%",height:"90%"},

backgroundColor: '#F8F8F8'

};

var chart = new google.visualization.PieChart(document.getElementById('call_driver'));

chart.draw(data, options);

}

</script>

Daniel LaLiberte

unread,

Dec 18, 2015, 1:24:51 PM12/18/15

to Google Visualization API

Hi Cory,

You didn't say what language you are using to generate the HTML with the embedded scripts, in particular, the part that interprets the <% = ...%> tags, since that is not proper HTML. As you said, you will need a loop to generate a dynamic number of rows of data, and that loop will have to be in this same language of your server-side. You'll probably have to ask someone who knows what you are doing on the server side, since we don't deal with it in the Google Charts library.

--
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 https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/41b9602a-4cee-48f2-bbfe-15a9f7c37194%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Cory Huntington

unread,

Dec 18, 2015, 1:37:48 PM12/18/15

to Google Visualization API

The database reads, etc are classic ASP. However, the loop part needs to be in the chart code. Specifically: