KavaChart in Action - Examples and Documentation - AlaCarte

[ Back ] Timeseries Applet Collection - Area Charts

Area charts are ideal for showing trends, especially trends that consolidate two or more variables. "dateAreaApp" automatically places labels at meaningful increments, like months, weeks, hours, etc.

KavaChart AlaCarte's Timeseries collection uses the applet "com.ve.kavachart.applet.dateAreaApp" to create timeseries area charts.

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.

The "dateAreaApp" applet is ideal for time series that span many observations, such as this tidal prediction plot.

Since our data isn't stacked, we can use a "baseline" value of "0.0" to provide a visual representation of plus and minus tides. A reference line supplies further information about the mean tide.

DateAreaApp uses both X and Y values. The X values are supplied as timestamps, using the param "dataset0dateValues" for datasets 0 through 39, and Y values are supplied using the param "dataset0yValues", for datasets 0 through 39. Another approach is to use the param "customDatasetHandler", which reads comma-delimited columns of data, like this file.

The applet interprets the incoming data using the param "inputDateFormat", which is "yyyy-MM-dd HH:mm" in this case to match our data file. It's worth thinking about how you want to supply this information: in the timezone of the viewer, or the timezone of the local event. In our case, we're using values from Pacific Daylight time, since that's the location for San Francisco's tides. If you're in Tokyo or Brussels, however, The times will obviously be incorrect.

You can adjust timezones using the "timezone" param.


Like other KavaChart applets, you can use "axisStart" and "axisEnd" to provide "hints" about how the axis should scale. In the case of time oriented axes, use "startDate", and "endDate" to provide these hints. You can also supply a "scalingType" to indicate whether increments should occur at minutes, hours, days, etc.

Since the lake water levels stay relatively constant in this chart's display period, we set the Y axis start and end range from 4.0 to 5.0. The default tiny range (4.5 to 4.7) unduly exaggerates the trend.

This chart also reads data from a "customDatasetHandler", to keep the source code to this page brief, but you could easily embed the time stamps and gauge observations into the parameters dataset0dateValues and dataset0yValues.