KavaChart in Action - Examples and Documentation - AlaCarte
[ Back ] Basic Applet Collection - Line Charts
|
Line charts are one of the most basic and versatile chart types.
They can be used to display trends over time, to correlate one variable
with another, or to find clusters of information. KavaChart's line chart
collection includes charts that handle discontinuities, applets
that zoom and scroll, charts that have time axes, user-labeled axes,
or numeric axes.
The KavaChart AlaCarte Basic applet collection includes these line chart applets:
|
Use the source code to this page as a guide in creating your own line charts.
You can also use the KavaChart
ChartWizard
to design your own line charts.
|
|
This chart uses a simple applet definiton to create a chart describing oil contract prices over time. 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 prices are on a particular contract day. The format of the numbers is defined using applet parameters. 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. |
|
|
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". |
|
|
If you have a large amount of data, you might find the "zoomLine" applet useful. This applet lets you drag your mouse to create a bounding box that zooms into data. An alt-click or right-click will reset the view. Of course, if you're still operating in demo mode, you'll have to add the "appletKey" param to activate your license. |
|
|
If we put the same data into our "scrollingLine" applet, you'll get a scrollbar that lets you window through the data. This is another technique for handling large amounts of data. The KavaChart Enterprise Edition has pre-built applets that will zoom and scroll, as well as tools for creating the custom interactions you're looking for. |
|