I have a dynamic data array that contains 3 ints that are used to build a pie chart. In most cases it works fine IE: [5, 10, 3]. The pie chart renders correctly and you see all the pieces.

However in some cases the numbers can be widely different. IE [1,500,250] or [400,1,2]. When this is the case you will only see the larger of the pie pieces and the smaller ones bee so small they can not be seen; or clicked.

I need some way of correcting the data array for these cases. I have the ability to retain the true value while adjusting the display value so the pieces show up. What I am looking for is a check to see if it's necessary and then a relative number to adjust it by based on the other values.

Suggestions?

I have a dynamic data array that contains 3 ints that are used to build a pie chart. In most cases it works fine IE: [5, 10, 3]. The pie chart renders correctly and you see all the pieces.

However in some cases the numbers can be widely different. IE [1,500,250] or [400,1,2]. When this is the case you will only see the larger of the pie pieces and the smaller ones bee so small they can not be seen; or clicked.

I need some way of correcting the data array for these cases. I have the ability to retain the true value while adjusting the display value so the pieces show up. What I am looking for is a check to see if it's necessary and then a relative number to adjust it by based on the other values.

Suggestions?

• javascript
• jquery
• highcharts

4 Answers 4

Well firstly I'd say you aren't so much "correcting" the data as fudging the data to meet your requirements.

Basically, there is a minimum percentage for which a slice of that proportion will be clickable and you will need to bring all pieces up to at least this size.

Of course - this can't work at the most extreme examples. If you had 1,000,000 slices all of the same value then no matter how you scaled them, some of them are going to be too small (or all of them).

You also need to be aware of how scaling certain very small slices will throw out the apparent proportions between other, larger, slices.

But - a very crude way of doing it could be something like...

var minPC = 0.5 ,    // the minimum %age slice visible
    total;         // total should be set to the sum of the values of all your slices

var minValue = total / 100 * minPC; // The smallest value visible (given the current total)

for (var slice in slices) { //assuming slices is a standard JS 'array'
   if ( slices[slice] < minValue ) slices[slice] = minValue;
}

of course making the slices bigger like this will in turn increase the total - meaning that the small slices will still be less than the minimum visible percentage. You will need to make minPC sufficiently large to cope with this. And of course the more very small slices you have the worse this effect will be. You could account for this be re-scaling the larger slices.

However - I would advise you find a better way of the user interacting with the data by letting them select on/off slices - or by having slices 'explode'.

You seem to want to resize the segments of the pie if they are too small to make them visible/clickable.

May I suggest that instead of solving the problem this way (which would give an invalid representation of the data), you could instead use labels outside of the pie chart to point at the segments? These labels could then, themselves, be made clickable.

The sum of the values in your array represent the entire "size" of the pie. The percentage of the pie each value has is the visual weight of that piece. You probably want to set a minimum threshold for the percentage size of each piece (the minimum threshold would be related to the diameter of your chart).

ie. [500, 490, 10] -> [500/1000, 490/1000, 10/1000] -> [50%, 49%, 1%]

If any value is less than your minimum threshold, you need to increase it to the minimum threshold and adjust your other values accordingly, so they all add up to 100%

It is related with fact that all points are sum and each value is calculated to pixels.