3
votes

Apparently Google Visualization Pie Charts don't like very small values. I've created a JSfiddle to demonstrate the issue: http://jsfiddle.net/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 completely 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);
1

1 Answers

7
votes

The "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.net/asgallant/YRKHd/10/