areaseries

Description

The "areaseries" tag can be used to draw one or more "lineseries" and fill the area under them. It performs exactly the same function as a "stackedbarseries" does for bars, except for lines. Again, as with a Stack bar series you will often use a Key to describe what each layer means.

Valid Children

lineseries* functionseries* splineseries* trendseries* marker* label* line*

Examples

Example: an example of an area series

<axesgraph width="300" height="300">
  <areaseries name="Fruit Consumption by Year">
    <lineseries name="Apples">
      <data x="2004-01-01" y="5" />
      ...
      <data x="2004-12-31" y="7" />
    </lineseries>
    <lineseries name="Oranges">
      <data x="2004-01-01" y="6" />
      ...
      <data x="2004-12-31" y="8" />
    </lineseries>
  </areaseries>
  <key align="right" />
</axesgraph>

See Also

Attributes

XML / Tag Library

Description

Whether the values in the nested line series are already accumulated or not. Using the example at the top of this page, with preacccumlated="false" (the default), the left-most point on the second series will have y=5+6 = 11. With it set to true it will have y=6.

Definition: AreaSeries.setPreAccumulated()

XML / Tag Library

Description

When stacking line series on top of eachother, this attribute controls how negative and positive values are accumulated. If true (the default), negative and positive values accumulate seperately: they grow away from zero on the graph, so they won't overlap. If false, they are simply added together, which may cause them to overlap. See the API docs for the method linked to below for a more complete description.

Definition: AreaSeries.setAwayFromZero()

XML / Tag Library

Description

When data in an AreaSeries includes negative values, this parameter controls whether the bottom of the graph is considered to be where y=0 (if this value is true) or where y=min(y). By default, since 2.4.9, the value of this parameter is true.

Definition: AreaSeries.setZeroStart()

XML / Tag Library

Description

Every item in the graph may have a "name", which is how it appears in the Key (if listed) and for some items, how it's refered to in JavaScript. The name is required for Series and optional for other items like markers.

(top | bottom) (left | right)

XML / Tag Library

Description

Which axes to plot the series against on an AxesGraph. This attribute has a default value of "bottom left", which means the series is plotted against the bottom and left axis, but other valid values would be "top left", "bottom right" or "top right".

Examples

Example: Plotting dates against the bottom axis and days of week against the top

<axesgraph width="300" height="300">
  <axis pos="bottom" type="date">
    <teeth rotate="90" align="left middle" />
  </axis>
  <axis pos="top" type="bar" />
  <lineseries pos="bottom left" name="Amount over the year">
    <data x="2003-01-01" y="20" />
    ...
    <data x="2003-12-31" y="17" />
  </lineseries>
  <barseries pos="top left" name="Average amount per weekday">
    <data x="Sun" y="18" />
    ...
    <data x="Sat" y="21" />
  </barseries>
</axesgraph>