Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Visualization Issue with Small Values in Pie Chart

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);
like image 719
technoTarek Avatar asked Feb 14 '23 21:02

technoTarek


1 Answers

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/

like image 139
asgallant Avatar answered Feb 20 '23 10:02

asgallant