KavaChart in Action - Examples and Documentation - AlaCarte

[ Back ] Basic Applet Collection - Pie Charts

Pie charts are great for comparing the individual values within a single set of data. They can be used to show each data value as a percentage of a whole at a single point in time.

The KavaChart AlaCarte Basic applet collection includes "com.ve.kavachart.applet.pieApp" for pie charting. An alternate applet, "com.ve.kavachart.applet.spinningPie" lets users spin the pie chart around using a mouse.

Use the source code to this page as a guide in creating your own pie charts. You can also use the KavaChart ChartWizard to design your own pie charts.

This chart uses a simple applet to create a chart showing the U.S. population breakdown according to age groups as of the 2000 census. While this chart uses static data, ASP, JSP, and similar technologies would allow us to populate our data parameters dynamically--for example, we could retrieve and display data for any census year, or even process our data before entering it to extrapolate an estimate for non-census years.

The pie labels can show up to three pieces of information, the percentage of the total pie, the actual numeric value, and a text label. By default only the percent label is shown, however here we have decided to also display the text label by setting the parameter "textLabelsOn" = "true". The numeric value of the slice can be seen by placing the mouse pointer over that slice.

This chart also uses a background image to make the overall chart more aesthetically pleasing. Here we are using the image javachart/html/images/blur_circle.jpg, which provides a slight shadow which we can place the actual pie over using the appropriate applet parameters.

Like the first chart, this pie chart also uses U.S. census data, however this time it is the ethnic breakdown of California. Here we've used an exploded slice to highlight a particular value in our data. In this case we've chosen to explode slice number four, by setting the parameter "explodeSlice"="4". The slice numbering actually starts at 0--you can see the slice number of any slice on the pie by placing your mouse pointer over it.

We could also have chosen to explode multiple slices by using the "explodeSlices" parameter, which takes a list of explosion factors for each slice. The explosion factor is how much you want the slice to stick out of the pie. A value of "0" would be no explosion at all, while a value of "0.05" would give you an explosion like the one in this chart.

As you can see, there are some very small slices on this chart. By comparing the labels in the first chart to these labels, you can see that the labels have automatically moved around, and some pointers have been extended to make sure the labels don't overlap. We've changed the starting angle of the first slice using the "startDegrees" parameter to make sure the labels fit nicely in the applet area, as well as changed the default colors of the pie (using "dataset0Colors") to make colors of the small slices more distinct.

The default precision of the percentage labels is 0, meaning that the labels will all be integers like in the first chart. Since there are some very small slices on this chart, the default percentages would be 0. The "percentPrecision" parameter can be used to force a greater decimal precision in your percent labels, as was done here.

Here is a pie chart showing the budget allocations for the state of Maine. This chart uses a legend instead of having the text labels around the pie itself. You can also see the text labels by moving the mouse pointer over a slice.

The legend uses a transparent background so that the legend can overlap the pie without completely covering it. Any chart component can be rendered transparent by setting its color to "transparent". The one limitation on this is that the chart background pane cannot be transparent, since this is not supported in applets (the default grey background would just show through instead of whatever is on the page behind the applet).

This chart also demonstrates two visual features of our pie charts, it's in 3D and the slices use outlining to make them more distinct. Outlining can be turned on by setting the "outlineColor" parameter to your desired color, in this case gray.

You'll notice that one of the text labels has a comma in it. Since the default delimiter in our parameters is a comma, this means we have to change it with the "delimiter" parameter in order to use a comma in our labels. In this case we changed the delimiter to "|".


The best pie charts are those that have fairly equal pie slices, and not more than 4 or 5 slices. In practice, however, it's hard to predict what data you'll get from your dynamic data sources. Using the "labelPosition" parameter, you can determine where your label will appear, but labels on the outside (positions 1 and 2) work the best for dynamic data.