Apparently Google Visualization Pie Charts don't like very small values. I've created a JSfiddle to demonstrate the issue: /
When you load the fiddle, you'll see the pie chart has four categories as one would expect from examining the JS in lines 6-13. Now, try changing the third value in line 13 of the JS from 5 to 1 and then run the fiddle. You'll see that it changes the label on the pie graph to a new label of "other". Can anyone figure out a way around that? (This is particularly problematic in my situation, because we use the label 'other' in some situations to represent a pletely different group in the data.)
To satisfy the SO validator, here's my JS code from the fiddle:
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Race'); data.addColumn('number', 'Percent'); data.addRows(4); data.setValue(0, 0, 'Black, non-Hispanic'); data.setValue(0, 1, 1370); data.setValue(1, 0, 'Hispanic'); data.setValue(1, 1, 40); data.setValue(2, 0, 'White, non-Hispanic'); data.setValue(2, 1, 537); data.setValue(3, 0, 'Suppressed Categories'); data.setValue(3, 1, 5);
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, {
width: 650,
height: 500,
fontSize: 11,
chartArea:{
top:20,
left:100
},
colors:
[
'8d2300','FE9929','D95F0E','000000', ]
});
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
Apparently Google Visualization Pie Charts don't like very small values. I've created a JSfiddle to demonstrate the issue: http://jsfiddle/technotarek/YRKHd/
When you load the fiddle, you'll see the pie chart has four categories as one would expect from examining the JS in lines 6-13. Now, try changing the third value in line 13 of the JS from 5 to 1 and then run the fiddle. You'll see that it changes the label on the pie graph to a new label of "other". Can anyone figure out a way around that? (This is particularly problematic in my situation, because we use the label 'other' in some situations to represent a pletely different group in the data.)
To satisfy the SO validator, here's my JS code from the fiddle:
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Race'); data.addColumn('number', 'Percent'); data.addRows(4); data.setValue(0, 0, 'Black, non-Hispanic'); data.setValue(0, 1, 1370); data.setValue(1, 0, 'Hispanic'); data.setValue(1, 1, 40); data.setValue(2, 0, 'White, non-Hispanic'); data.setValue(2, 1, 537); data.setValue(3, 0, 'Suppressed Categories'); data.setValue(3, 1, 5);
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, {
width: 650,
height: 500,
fontSize: 11,
chartArea:{
top:20,
left:100
},
colors:
[
'8d2300','FE9929','D95F0E','000000', ]
});
}
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
Share
Improve this question
edited Oct 24, 2013 at 17:19
technoTarek
asked Oct 24, 2013 at 16:44
technoTarektechnoTarek
3,2283 gold badges23 silver badges25 bronze badges
1 Answer
Reset to default 8The "Other" category is created to hold all slices that are below the sliceVisibilityThreshold
option's value in proportion to the total (default is 1/720). When the "Suppressed Categories" value is 1, it is 1/1948 of the pie (far below the threshold), and so is grouped in the "Other" category. You can manually set the sliceVisibilityThreshold
option to whatever value you want (0 forces all slices to draw, regardless of their relative size):
chart.draw(data, {
width: 650,
height: 500,
fontSize: 11,
chartArea:{
top:20,
left:100
},
colors:['8d2300','FE9929','D95F0E','000000'],
sliceVisibilityThreshold: 0
});
jsfiddle link: http://jsfiddle/asgallant/YRKHd/10/