KavaChart in Action - Examples and Documentation - ProServe

The KavaChart ProServe collection includes these line chart types:

• lineApp
• disLineApp
• regressApp (scatter plots)
• labelLineApp

This chart describes oil contract prices over time. In production, this chart's data parameters would likely be created by a database connection, but we're just putting the strings in directly. This means that in production 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 prices are on a particular contract day. The format of the numbers is defined using dwell properties.

A reference line at "12.5" describes our contract purchase price so we can tell at a glance whether this contract is making money or not.

Using exactly the same parameters, but with "regressApp" instead of "lineApp", we get a scatter plot and regression analysis of our data.

Either of these applets can be used to create scatter plots by adding the param "plotLinesOff", while leaving line markers visible. You can also select different markers, or even choose an image ("dataset0Image") to use as a marker on the plot line. Markers and lines both appear on the chart's legend.

LineApp and regressApp both use numeric X and Y axes, which work well with many or few points. Numeric axes can also be scaled logarithmically (yAxisOptions|xAxisOptions=logAxis) for data that covers extremely large ranges.

Note that we also enabled antialiasing to make a very smooth regression line. A line like this would appear quite jagged without antialiasing.

Line charts can also include disontinuities, or breaks in the lines. Discontinuities provide a visual cue that a trend is interrupted by some significant event.

This sample is essentially the same as our first example, except that we've added some discontinuities in the data by using "x" instead of a number in the list of values for "dataset0yValues". We also changed some colors, and re-arranged the axes and legend.

We also changed the Y axis scaling to logarithmic. For scientific and financial data, it's sometimes important to see whether the data increases in an exponential fashion, which appears as a more or less straight line with logarithmic scaling.

Line chart variants that understand discontinuity handling include "disLineApp", "disLabelLineApp".

Another line chart variant is "labelLineApp". This chart takes textual label definitions for the X axis. If you don't define "xAxisLabels", they're derived from the first dataset's labels. If those don't exist, the first dataset's values are used for labels.

This chart is particularly useful for trends that don't have a strictly numeric or time oriented X axis. You can define the axis start and end values, and by setting the "xAxisOptions" to include "noAutoScale", you can define the number of labels, ticks, and grids. Since this approach gives you complete labelling and scaling control over the X axis, this chart is sometimes easier to use than "dateLineApp" (part of the timeseries collection) for creating time oriented charts, as well. This is especially true when your date/time values include missing data, like weekends and evenings.

Notice the Y axis on this chart. It uses percentage labels, in a format appropriate for your locale. Any line chart can use percentage or currency labels by adding the appropriate options to "yAxisOptions" or "xAxisOptions".