KavaChart in Action - Examples and Documentation - ProServe

KavaChart ProServe uses a chartType of "pieApp" for pie charting.

This chart uses a real data 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, you'd likely pull your data from a database and use a DataProvider, or populate the "dataset0yValues" param with live data.

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 style properties.

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 image 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 except the background can be rendered transparent by setting its color to "transparent".

You'll notice that one of the text labels has a comma in it. Since the default delimiter in our properties 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 "|".

Pie labels can appear inside each slice, at the edge of the slice, or connected to a pointer. Labels on the outside of the pie automatically adjust to accomodate dynamic data best. Although the examples to the left work well with any label position, each of the pie charts above represents a typical dynamic data case, with both large and small slices.

Most pie charts should use antialiasing for legible text and smooth edges.

If you examine the JSP source code, you'll also see that the chart tag is operating inside a loop. You can use KavaChart's tag library with scriptlet logic, JSTL, JSF or other coding techniques.