Flash Bar-line Combination Chart
Bar\Line Combination Chart
The bar\line combination chart plots a set of values as bars for each specified series in the given dataset. This chart will also plot specified series as lines, using the right axis as a range axis for the line series, and the left axis as the range axis for the bars.
Dataset Guidelines
This chart expects its data as a categorical dataset.
Required Properties
The following properties are required:
chart-type
<chart-type>BarLineChart</chart-type>
bar-series
Add one series element per series that should be plotted as bars.
<bar-series> <series>actual</series> <series>budget</series> </bar-series>
line-series
Add one series element per series that should be plotted as lines.
<line-series> <series>variance</series> </line-series>
The example below contains the full set of additional supported properties with comments on its purpose and valid values. It is recommended that new users start with this example as a starting place for building your first flash chart.
Example
The following chart definition will produce the chart in the example below.
<chart> <!-- Define the chart type --> <chart-type>BarLineChart</chart-type> <!-- Specify the title of the chart --> <title>Chart Title</title> <title-font> <font-family>Arial</font-family> <size>18</size> <is-bold>true</is-bold> </title-font> <!-- Map Series to Chart Type --> <bar-series> <series>TOTAL</series> <series>COST</series> </bar-series> <line-series> <series>MARGIN</series> </line-series> <!-- General Chart Attributes --> <orientation>vertical</orientation> <is-stacked>false</is-stacked> <is-3D>false</is-3D> <height-3d>1</height-3d> <is-glass>true</is-glass> <is-sketch>false</is-sketch> <!-- additional properties specific to sketch charts --> <fun-factor>10</fun-factor> <outline-color-palette> <color>#FF0000</color> <color>#00ff00</color> </outline-color-palette> <!-- General Chart Formatting Propeties --> <chart-background type="color">#FFffff</chart-background> <plot-background type="color">#ffffff</plot-background> <alpha>.70</alpha> <!-- Define what to display in hover tips --> <!-- <tooltip> --> <!-- #top# --> <!-- #bottom# --> <!-- #val# --> <!-- #x_label# --> <!-- #key# --> <!-- </tooltip> --> <!-- X-Axis properties (domain)--> <domain-title>Domain Title</domain-title> <domain-title-font> <font-family>Arial</font-family> <size>14</size> <is-bold>false</is-bold> </domain-title-font> <domain-color>#000000</domain-color> <domain-grid-color>#ffffff</domain-grid-color> <domain-stroke>1</domain-stroke> <!-- Y-Axis properties (range) --> <range-title>Range Title</range-title> <range-title-font> <font-family>Arial</font-family> <size>14</size> <is-bold>false</is-bold> </range-title-font> <range-minimum></range-minimum> <range-maximum></range-maximum> <range-color>#000000</range-color> <range-grid-color>#eaeaea</range-grid-color> <range-stroke>1</range-stroke> <range-steps>6</range-steps> <!-- Secondary Y-Axis properties (line-range) --> <lines-range-minimum>40</lines-range-minimum> <lines-range-maximum>60</lines-range-maximum> <lines-range-color>#000000</lines-range-color> <lines-range-stroke>1</lines-range-stroke> <line-range-steps>6</line-range-steps> <!-- Specify the color palette for the chart --> <color-palette> <color>#0f3765</color> <color>#880a0f</color> <color>#B09A6B</color> <color>#772200</color> <color>#C52F0D</color> <color>#123D82</color> <color>#4A0866</color> <color>#445500</color> <color>#FFAA00</color> <color>#1E8AD3</color> <color>#AA6611</color> <color>#772200</color> <color>#8b2834</color> </color-palette> </chart>