Big Faceless Graph Library 2.3 Tag Documentation - Copyright © 2006 Big Faceless Organization

barseries

Description

The "barseries" tag creates a regular series of bars. Bars are slightly different from other types of series in that they represent discrete data indexed by strings rather than continuous data (as with a line). Consequently the "x" value on the barseries' "data" objects may be a String (bars will be ordered in the order they appear in the XML). Each bar data must have an "x", which may be a String or a Date, and either a "y" or a "min" and "max" attribute.

Bars can be plotted against a Date axis, but a couple of rules need to be remembered. First, the "x" value of the data must match exactly the date as it would be formatted by the Date axis. For example, if your axis is date("yyyy-MM") then the "x" value of the data must be like "2001-01", "2001-02" etc. - "2001-Jan" will give undefined results. The "barsatnoon" attribute on the "axis" may also be helpful when plotting bars.

Valid Children

data+ marker* label* line*

Examples

Example: Plotting normal bars
<axesgraph width="300" height="300">
  <barseries name="Comparing apples and oranges">
    <data x="Apples" y="20" />
    <data x="Oranges" y="30" />
  </barseries>
</axesgraph>
Example: Plotting dates bars
<axesgraph width="300" height="300">
  <axis pos="bottom" type="date(yyyy-MM)" />
  <barseries name="Amount per month">
    <data x="2003-01" y="20" />
    <data x="2003-02" y="30" />
  </barseries>
</axesgraph>
Example: Plotting two rows of bars
<axesgraph width="300" height="300">
  <barseries name="2001">
    <data x="Apples" y="20" />
    <data x="Oranges" y="30" />
  </barseries>
  <barseries name="2002">
    <data x="Apples" y="25" />
    <data x="Oranges" y="35" />
  </barseries>
</axesgraph>

See Also

Attributes

roundbars boolean optional XML / Tag Library

Description

When plotting bars, setting this value to true results in Cylinders being drawn, rather than Boxes.
barwidth Real > 0 <= 1 optional XML / Tag Library

Description

The width of a bar. A value of "1" means the bars are so wide they touch eachother.
bardepth Real > 0 <= 1 optional XML / Tag Library

Description

The depth of a bar, for when bars are displayed in 3D. A value of "1" means the bars are so deep neighbouring rows touch eachother.
labelformat String optional XML / Tag Library

Description

This causes the values of the y-axis to be displayed on the bars in the format specified by this attribute. The format can be any valid DecimalFormat value.

Examples

Example: Use labelformat to set the numbers on the bars to have a trailing % sign
<axesgraph width="300" height="300">
  <barseries name="My Bars" labelformat="0%">
     ...
  </barseries>
</axesgraph>
topbarwidth Real >= 0 <= 1 optional XML / Tag Library

Description

The topbarwidth and bottombarwidth attributes can be set to shape the bar into a "pyramid" shape. Both attributes must be specified, and the middlebarwidth may also be specified to create a "funnel" shape. A value of 1 means full width, a value of 0 means the box will taper to a point. This attribute can be set on an individual barseries or on a stackedbarseries to auto-set the width values for its barseries.

Examples

Example: Use topbarwidth and bottombarwidth to create a funnel chart
<axesgraph width="300" height="300" autocolors="#800000, #FFE0E0" xrotation="20" yrotation="10">
  <stackedbarseries name="Funnel" bargap="0.5">
    <barseries name="2005" topbarwidth="0.2" bottombarwidth="0.05"><data x="x" y="5" /></barseries>
    <barseries name="2004" topbarwidth="0.45" bottombarwidth="0.2"><data x="x" y="5" /></barseries>
    <barseries name="2003" topbarwidth="0.5" bottombarwidth="0.45"><data x="x" y="5" /></barseries>
    <barseries name="2002" topbarwidth="0.8" bottombarwidth="0.5"><data x="x" y="5" /></barseries>
    <barseries name="2001" topbarwidth="0.9" bottombarwidth="0.8"><data x="x" y="5" /></barseries>
  </stackedbarseries>
  <axis pos="left" type="null" color="none" /> 
  <axis pos="bottom" type="null" color="none" />
</axesgraph>
bottombarwidth Real >= 0 <= 1 optional XML / Tag Library

Description

The topbarwidth and bottombarwidth attributes can be set to shape the bar into a "pyramid" shape. See the topbarwidth attribute for more information and an example.
middlebarwidth Real >= 0 <= 1 optional XML / Tag Library

Description

When used along with the topbarwidth and bottombarwidth, this attribute sets the width of the middle of the bar, which can be used to create a "funnel" shape. Unlike those attributes this cannot be used on a stackedbarseries, only on a barseries used inside a stackedbarseries

Examples

Example: Use topbarwidth and bottombarwidth to create a pyramid chart
<axesgraph width="300" height="300" autocolors="#408040, #D0FFD0">
  <stackedbarseries name="Funnel" topbarwidth="0.9" bottombarwidth="0.15" bargap="1">
    <barseries name="2001" middlebarwidth="0.2" bottombarwidth="0.2">
      <data x="Data" y="5" />
      <label x="Data" y="2.5" align="center middle">Purchases</label>
    </barseries>
    <barseries name="2002">
      <data x="Data" y="8" />
      <label x="Data" y="4" align="center middle">Inquries</label>
    </barseries>
    <barseries name="2003">
      <data x="Data" y="18" />
      <label x="Data" y="9" align="center middle">Signups</label>
    </barseries>
    <barseries name="2004">
      <data x="Data" y="12" />
      <label x="Data" y="6" align="center middle">Visitors</label>
    </barseries>
  </stackedbarseries>
</axesgraph>
name String mandatory 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.
pos (top | bottom) (left | right) optional 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>
color Paint optional XML / Tag Library

Description

The paint to use as the fill color for the specified object
bordercolor Color optional XML / Tag Library

Description

The color to use as the border color for the specified object. May be "none" to not draw a border for this object.
linethickness Real > 0 optional XML / Tag Library

Description

The thickness to draw the borders for this object, except for lineseries and functionseries objects when the graph is being drawn in 2D, in which case this attribute, as you would expect, sets the thickness of the lines.
Big Faceless Graph Library 2.3 Tag Documentation - Copyright © 2006 Big Faceless Organization