KavaChart in Action - Examples and Documentation - AlaCarte

[ Back ] Basic Applet Collection - Area Charts

Area charts are ideal for showing trends, especially trends that consolidate two or more variables. "areaApp" doesn't really use X values, laying out the observations evenly across the X axis, with one label at each observation. This is convenient for constructing charts that have regular periods.

The KavaChart AlaCarte Basic Collection Area Chart applet is "com.ve.kavachart.applet.areaApp".

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

This chart uses a simple applet definiton to create a chart describing revenue trends for four months. In production, this chart's data parameters would likely be created by a database connection, using ASP, JSP, or some similar mechanism. This means that the chart, like the rest of the data in your page will be completely dynamic.

Placing your mouse over a region in the chart will show what the actual data values are for that period's ski or snowboard rentals. The format of the numbers is defined using applet parameters.

A reference line at "400000" describes a break-even point. Because an area chart stacks values, we can see that our breakeven amount was exceded in every month but March.

One of the significant advantages of using applets is the ability to automatically refresh chart data.

This chart is similar to the previous one, except that it polls URLs to get chart data. Since we don't have a real server, we used the keyword "fake" for our dataset URLs, which supplies random numbers.

The parameter "networkInterval" determines how often to check the URLs for new data. The data streamed from your URLs is simply a comma-delimited list of numbers. The applet takes care of replacing existing data, rescaling axes, and repainting the chart when data has updated.

We also spruced this chart up a little by setting a default color palette, "presentation_deep". We also added a Y axis grid, and a Y axis title with the yAxisOptions PARAM.

Area charts can also include a baseline, from which areas ascend or descend. Areas can be stacked or un-stacked, and can be 2-D or 3-D.

Since the layers on un-stacked areas can obscure one another, it's a good idea to use semi-transparent colors to make sure you can see the lower layers.