Multi Level Pie Chart in Java

ml1_1

Update !

This pie chart compoment has now been moved into the Iceberg Charts project . Please use Iceberg Charts for a more complete charting experience.

Pie charts are pretty boring. I hadn’t found anything out there which resembled a multi level pie chart. A multi level pie chart, is basically a pie chart with a number of levels (Excel 2016 has something similar called Sunburst charts). Each level is in effect an expansion of the slice below it. A multi level pie chart basically represents a tree structure, where each node has a magnitude. The component I have written requires a tree structure of Segment objects. A typical real world scenario where you would use a multi level pie chart would be to view the disk usage on a computer. A simplistic example I created is shown below.

ml2_1

The code I needed to generate the above chart is just this :

In order for it to not look like a multi colored mess, I have applied a gradient-like effect, by darkening the colors sequentially after the initial color is set for a segment. My darken method is simply :

I think this is quite effective, but there may be other ways or algorithms to implement a set of related colors. You could experiment with incrementally adjusting the hue, saturation or a rgb value.

A bit about the design of this component :

For a simple pie chart there are really only three things to consider for a pie slice. They are

  1. the starting angle (calculated from what slices have previously been drawn),
  2. the magnitude (if it is a percent it needs to be converted to an angle)
  3. and of course the color.

ml3

This is simple enough to implement. However for a multi level pie slice there are many other things to consider :

  • Relative start angle.The start angle needs to be converted, because this pie slice may not be the first level, and therefore a scaling would need to be applied.
  • Parent. The slice will have a parent, if it is not on the first level.
  • Relative magnitude. The angle, or percent, needs to be scaled based on what its parent is. If the parent represents 50% and the parents parent is on the first level and represents 50%, then the scalings would have to be combined to 25%. This 25% would then have to be applied to the original magnitude.

 

ml4

Also to consider would be

  • Circle1 – a circle that represents the outer rim of the slice.
  • Circle2 – a circle that would need to be subtracted from the arch created from circle1.

These circles would need to be calculated depending on a number of factors. The extend and starting point would of course need to be taken into account, and the number of circles needed would also depend on the total depth of the tree structure.

Given all these things to consider, the segment is a special type of object. Omitting the getters and setters for clarity, here is the class I came up with for a segment. A lot of the values need to be calculated.

(jar file is here)

If you would like to use this component in a project, or would like to look at the source code, please contact me 


Posted in Swing, Swing Components | Tagged , , , | 4 Comments

4 Responses to Multi Level Pie Chart in Java

  1. Mery says:

    I need to display some statistics with a multilevel pie but I can not find any example on the Internet, can I have the code for this example it is exactly what I want.
    Thank you,

  2. Bhargav Pulleti says:

    Can I get the source code please????

  3. Bhargav Pulleti says:

    Can I get the source code please????
    Bhargav9900@gmail.com

  4. felixzacat says:

    Hi Bhargav, you will find the multi level charts in icebergCharts here :

    http://www.frontangle.com/icharts/#/

    There are examples on how to use them

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

THREE_COLUMN_PAGE