Main Products Download Purchase Support

Tutorials - Anychart Flash Chart Component

Description | Chart gallery | Tutorials 

Chart combination

Step 1: Set charts types.

To create combined charts we should add two <chart> node into <type> node.

<?xml version='1.0'?>
 <root>
  <type>
   <chart type='2DColumn'>
   </chart>
   <chart type='2DLine'>
   </chart>

  </type>
 </root>

Note: You should adjust all settings for the given chart type are in <chart> node where type attribute is type of the given chart.

Step 2: Set charts data:

<?xml version='1.0'?>
 <root>
  <type>
   <chart type='2DColumn'>
   </chart>
   <chart type='2DLine'>
   </chart>
  </type>
  <data>

   <block chart_type='2DColumn'>
    <!--paste 2d column chart set values here -->
   </block>

   <block chart_type='2DLine'>
    <!--write 2d line chart set values for custom block here -->
   </block>

   <!--write more 2d line blocks here -->


  </data>

 </root>

Step 3: Set different grids for charts

<?xml version='1.0'?>
 <root>
  <type>
   <chart type='2DColumn'>
   </chart>
   <chart type='2DLine'>
   </chart>
   <workspace>
    <grid chart='2DColumn'>
     <!--write 2d column chart grid definition here -->
    </grid>
    <grid chart='2DLine'>
     <!--write 2d line chart grid definition here -->
    </grid>

   </workspace>
  </type>
  <data>
   <block chart_type='2DColumn'>
    <!--write 2d column chart values here -->
   </block>
   <block chart_type='2DLine'>
    <!--write 2d line chart values for custom block here -->
   </block>
   <!--write 2d line blocks here -->
  </data>
 </root>

If you want chart grid step to be the same for both charts - set maximum_value and minimum_value to the same values:

<?xml version='1.0'?>
 <root>
  <type>
   <chart type='2DColumn' minimum_value='0' maximum_value='100'>
   </chart>
   <chart type='2DLine' minimum_value='0' maximum_value='100'>
   </chart>

   <workspace>
    <grid chart='2DColumn'>
     <!--write 2d column chart grid definition here -->
    </grid>
    <grid chart='2DLine'>
     <!--write 2d line chart grid definition here -->
    </grid>
   </workspace>
  </type>
  <data>
   <block chart_type='2DColumn'>
    <!--write 2d column chart values here -->
   </block>
   <block chart_type='2DLine'>
    <!--write 2d line chart values for custom block here -->
   </block>
   <!--write 2d line blocks here -->
  </data>
 </root>

Step 4: Adding objects

Use chart_type attribute of line, trend and area objects to set the type of chart.


Copyright ©2007 AnyChart.Com All rights reserved.