Page Comparison

{scrollbar}

h2. Bar\Line Combination Chart

{anchor:barlinechart}
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.

h3. Dataset Guidelines

This chart expects its data as a [categorical dataset|The Categorical Dataset].

h3. Required Properties

The following properties are required:

*chart-type*
{code:XML}
<chart-type>BarLineChart</chart-type>
{code}
*bar-series*

Add one *series* element per series that should be plotted as bars.
{code}
<bar-series>
  <series>actual</series>
  <series>budget</series>
</bar-series>
{code}
*line-series*

Add one *series* element per series that should be plotted as lines.
{code}
<line-series>
  <series>variance</series>
</line-series>
{code}
The example below contains the full set of additional supported properties with comments on its purpose and valid values.&nbsp; It is recommended that new users start with this example as a starting place for building your first flash chart.

h3. Example

The following chart definition will produce the chart in the example below.
{code:XML}
<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>false</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) -->
	  <line-range-title>Line Range Title</line-range-title>
 	 <line-range-title-font>

     <font-family>Arial</font-family>
  	  <size>14</size>
	    <is-bold>false</is-bold>
  	</line-range-title-font>
	  <line-range-minimum>0</line-range-minimum>
	  <line-range-maximum>1</line-range-maximum>
 	 <line-range-color>#000000</line-range-color>
 	 <line-range-grid-color></line-range-grid-color>
 	 <line-range-stroke>1</line-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>
{code}