KavaChart in Action - Examples and Documentation - ProServe

[ Back ] Timeseries Charts - 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 ProServe's Timeseries collection uses the object "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" object 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 property "dataset0dateValues" for datasets 0 through 39, and Y values are supplied using the property "dataset0yValues", for datasets 0 through 39. Other approaches include using a DataProvider or a web service to acquire the data. These techniques are generally much better, but require a slightly deeper understanding of the page construction process. See the tag and scriptlet examples for several code samples you can adapt to your own data.

For these samples, we use the property "customDatasetHandler", which reads comma-delimited columns of data, like this file.

The object interprets the incoming data using the property "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" property.

Like other KavaChart objects, 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 properties dataset0dateValues and dataset0yValues.