Please refer to the basic tutorial for a general introduction to creating a line chart.
The following example demonstrates the creation of a very simple line-chart
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <body> <div id="chart"></div> </body> <script type="text/javascript" src="arcadiacharts/arcadiacharts.nocache.js"></script> <script type="text/javascript"> // Create a variable with some data for the chart. The string format is CSV. var myData = "Day,Units sold,Units produced\n" + "Mon, 12,15\n" + "Tue, 14,15\n" + "Wed, 15,16\n" + "Thu, 17,15\n" + "Fri, 19,16"; document.onChartLibLoaded = function() { // This function is called as soon as the chartlib has finished loading. new ac.ACLineChartBuilder() // Create new instance of builder. .setData( myData ) // Attach CSV-Data to the chart. .setTitle( "Unit Sales and Production" ) // Give the chart a title. .build() // Build the chart. .addToDom('chart'); // Add chart to HTML (to the DIV named "chart"). } </script> </html>
An axis label displays the value of the current tickmark.
Axis labels can be formatted with the same formatting patterns used for the other elements in arcadiaCharts. To apply a format to an axis the command setAxisTickmarkFormattingPattern
is used as in the example below. The formatting pattern depends of the type of axis used.
In the example below the X-axis is a category axis, Y-axis is date and secondary Y axis is numeric.
new ac.ACLineChartBuilder() // ... .setAxisTickmarkFormattingPattern(ac.AxisIdentity.X_AXIS, '<####') // Category axis .setAxisTickmarkFormattingPattern(ac.AxisIdentity.Y_AXIS, 'MMM') // Date axis .setAxisTickmarkFormattingPattern(ac.AxisIdentity.Y2_AXIS, '#0 mm') // Numeric axis // ...
The axis caption is a text displayed alongside the axis. It can be set for first and secondary Y-axes using the command
setAxisCaption( AxisIdentity, StringToDisplay)
.
The example below sets the axis caption for the first and second Y-axes. The second command uses a custom style element which is described further below:
new ac.ACLineChartBuilder() // ... .setAxisCaption(ac.AxisIdentity.Y_AXIS, 'Gold Price per Ounce') .setAxisCaption(ac.AxisIdentity.Y2_AXIS, 'Crude Oil Price <MyCustomStyle>per Barrel</MyCustomStyle>') // ...
The axis caption can include the same markup elements as the other label elements of arcadiacharts. You can also use your own style. Please refer to the markup elements section of this manual for further details.
The secondary Y-Axis (or Y2_AXIS) is an additional axis usually placed on the right-hand side of the plot area. A secondary axis can be useful for the display of ValueSets with highly divergent value ranges in one chart together. The two examples below display exactly the same data. The left one has only one Y-Axis, while the right chart demonstrates how the display changes when one of the two value sets is attached to a secondary Y-axis.
The assignment of a ValueSet to a second Y-axis is achieved with the command:
new ac.ACLineChartBuilder() // ... .addToSecondaryAxisByTitle('ValueSetTitle') // ...
Tickmarks are the little marks drawn on the axes. You can manually determine the number of tickmarks that are shown on an axis. This is especially useful in situations where the tickmark labels are quite long. The axis renderer tries to attach a number of tickmarks to the axis as close as possible to the number of tickmarks specified by the user.
The example below manually sets the number of axis tickmarks to be added to the axis to 4.
new ac.ACLineChartBuilder() // ... .setAxisDesiredTickmarks(ac.AxisIdentity.X_AXIS, 4) // ...
A ValuePoint is a little graphic icon which is displayed on the ValueLine.
arcadiaCharts has a built-in ValuePoint collision detection which suppresses display of ValuePoint symbols if too many ValuePoints are present and they start to overlap.
The collision check can be manually turned on / off with setAxisCheckForCollisions( AxisIdentity , boolean )
.
new ac.ACLineChartBuilder() // ... // Turns collision check off for the X-axis. .setAxisCheckForCollisions(ac.AxisIdentity.X_AXIS, false) // ...
According to the principle of separating presentation and content the preferred location to disable ValuePoints should be the theme used by your chart:
<theme> <chartOptions> <!-- ... --> <valuePoint> <size>0</size> </valuePoint> <!-- ... --> </chartOptions> </theme>
Find out more about working with themes here.
Sometimes you need to disable ValuePoints in one chart only. However, you want to use the same theme in other charts with enabled ValuePoints. In this case ValuePoints can be manually turned off with the setDrawValuePoints
method of the ACLineChartBuilder.
new ac.ACLineChartBuilder() // ... // Turns ValuePoint display off for the current chart. .setDrawValuePoints(false) // ...
Changing ValuePoint size and appearance requires making changes to a theme file. If you are not already familiar with this you can find out more here.
The theme specifies whether
ValuePoint icons and size are defined in the theme file. In order to change them you have to locate the <valuePoint>
code block in the theme and alter <style>
and <type>
. If you would like to use different ValuePoint styles for each ValueLine you can specify a “valueSetIndex” within the <valuePoint>
tag. In the example below the ValuePoints of the first ValueLine are set to a different type.
<theme> <chartOptions> <!-- ... --> <valuePoint > <style>three_d</style> <size>0.01333 * $chartWidth</size> <shadow>true</shadow> <type>circle</type> </valuePoint> <valuePoint valueSetIndex="1" > <style>three_d</style> <size>0.01333 * $chartWidth</size> <shadow>true</shadow> <type>square</type> </valuePoint> <!-- ... --> </chartOptions> </theme>
The table below lists all available ValuePoint types and styles
Please note: In contrast to other chart types only the three styles plain, beveled and three_d can be used in a line-chart.
The line width is changed in the theme file in the section <valueLine> of the block <chartoptions>
<theme> <chartOptions> <!-- ... --> <valueLine> <lineWidth>0.01333 * $chartWidth</lineWidth> </valueLine> <!-- ... --> </chartOptions> </theme>
The pictures below show the effect of changing the line width:
The line colors of a line-chart are set in the ColorScheme you use with your chart. Normally it is not necessary to change line colors manually since the different ColorSchemes supplied with arcadiaCHARTS offer a wide array of different color configurations.
ArcadiaCharts uses a simple color inheritance mechanism to define the colors shown in the chart. The rgb-values of the colors are defined in the palette.xml file. The color names are attached to ValueSet numbers in the color_scheme.xml file. The principle is outlined in the sketch below:
<theme> <variables> <!-- ... --> <variable type="color" name="VALUE_SET_COLOR_0" inherits="IVORY" /> <variable type="color" name="VALUE_SET_COLOR_1" inherits="DARKORANGE" /> <variable type="color" name="VALUE_SET_COLOR_2" inherits="ROYALBLUE" /> <!-- ... --> </variables> <!-- ... --> </theme>
VALUE_SET_COLOR
, let's say from IVORY
to FORESTGREEN
.setColorScheme(“myNewColorScheme.xml”)
The plot area color can be changed within the theme file
<theme> <!-- ... --> <chartOptions> <plotArea> <color>rgba(255,255,255,0.25)</color> </plotArea> <!-- ... --> </chartOptions> </theme>
A chart's background image is set in the theme in the <variables>
section.
<?xml version="1.0" encoding="UTF-8"?> <theme> <variables> <!-- ... --> <variable name="BACKGROUND_IMAGE" type="image" value="mypics/myimage.jpg" /> <!-- ... --> </variables> <!-- ... --> </theme>
Please see the using images section of this manual for a detailed description on using images with your chart. Please see the using themes section of this manual on how to use themes for changing the layout of a chart.
Zeroline highlighting is a feature in charts with negative and positive values. In these charts the gridline at the Y-value of 0 can be highlighted as shown in the example below:
The following sample code turns highlighting of the zero-line on:
new ac.ACLineChartBuilder() // ... .setHighlightZeroLine(true) // ...
ArcadiaCharts contains a number of “built-in” standard themes. The following standard themes are available for line charts: