Line chart reference

Please refer to the basic tutorial for a general introduction to creating a line chart.

Elements of a line-chart

Title, footer, legend, popup, second y-axis and axis caption are optional elements.

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>

Axis labels

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.

  • Category axes can be formatted so that a certain number of characters are shown. The default setting is “*” = all characters. You can also vary between the first, eg. 6 letters (<######) or last, eg. 5 characters (#####>).
  • Date axes are formatted using date formatting patterns.
  • Numeric axes are formatted using number formatting patterns.

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
    // ...

Axis caption

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>')
    // ...

Styling the axis caption

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.

Secondary Y-Axis

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')
    // ...

Determining the number of tickmarks drawn on an axis

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)
    // ...

Turning ValuePoints on / off. Collision checking

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 symbols

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

  • all ValueLines use the same type of ValuePoint-Icon
  • each ValueLine uses its own ValuePoint-icon

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> 

Available ValuePoint types and styles

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.

Altering the line width

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:

Altering the line color

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>

Steps for changing line colors manually

  1. Create a new color_scheme.xml file or alter an existing one.
  2. Change the values of the colors of the desired VALUE_SET_COLOR, let's say from IVORY to FORESTGREEN
  3. Use the altered color_scheme-file with your chart .setColorScheme(“myNewColorScheme.xml”)

Altering the plot area background color

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>

Chart background image

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.

Turning zeroline highlighting on / off

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)
    // ...

Using built-in standard themes with line charts

ArcadiaCharts contains a number of “built-in” standard themes. The following standard themes are available for line charts:

“Smoked glass” theme: “Color sphere” theme:
.setTheme(“theme_standard_smokedglass.xml”) .setTheme(“theme_standard_colorsphere.xml”)
“Velvet” theme: “Classic” theme:
.setTheme(“theme_standard_velvet.xml”) .setTheme(“theme_standard_classic.xml”)
“Business” theme: “Signet” theme:
.setTheme(“theme_standard_business.xml”) .setTheme(“theme_standard_signet.xml”)
“Pastel shade” theme: “Glazed” theme:
.setTheme(“theme_standard_pastelshade.xml”) .setTheme(“theme_standard_glazed.xml”)
“Minimal” theme:
.setTheme(“theme_standard_minimal.xml”)