Multiple Axes

Overview

You can have not a single axes but lots of. It is useful when you want your axes to have different orientation, have a various tickmarks step or more than one unit of measuring.

to top

Adding multiple axes

When you want to add one or more additional axes it is obligatory that you create an extra_axes subnode that will hold all of your additional axes. Than you should create an node and use all the attributes that you used for your primary axis. The only difference is that every extra axis should have a unique name. Typical XML for extra axes look like this:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <gauges>
04     <gauge>
05       <axis />
06       <extra_axes>
07         <axis name="additional_1" />
08         <axis name="additional 2" />
09       </extra_axes>
10     </gauge>
11   </gauges>
12 </anychart>

to top

Sample of multiple axes usage

Here are some samples of multiple axes usage.

Speedometer sample

Let's create a speedometer that will show temperature in Kilometers per Hour (kmph) and Miles per Hour (mph). Lets make the main axis show kmph speed. We need to define major_interval, minimum and maximum for the scale:

XML Syntax
Plain code
01 <scale minimum="0" maximum="120" major_interval="24" />

Then we change labels format so that they show kmph :

XML Syntax
Plain code
01 <labels enabled="true" align="Outside">
02   <font size="12" />
03   <format><![CDATA[{%Value}{numDecimals:0} kmph]]></format>
04 </labels>

Now we create a mph axis. We simply define axis name and adjust its radius:

XML Syntax
Plain code
01 <extra_axes>
02   <axis name="miles" radius="45" start_angle="90" sweep_angle="180" />
03 </extra_axes>

Now we need to set scaling for our new axis. We know that 1 kilometer is equal to 1.609 miles. And that 200 kilometers (our main axis maximum) is equal to 193.08 miles. So after performing simple calculations we find out that our major_interval for miles axis will be 96.54 (half of maximum) So, the full XML for ,miles extra axis is as follows:

XML Syntax
Plain code
01 <axis name="miles" radius="45" start_angle="90" sweep_angle="180">
02   <scale minimum="0" maximum="193.08" major_interval="96.54" />
03   <scale_bar enabled="true" size="10">
04     <fill enabled="true" type="solid" color="#66CCCC" opacity="0.5" />
05   </scale_bar>
06   <labels enabled="true" align="Inside">
07     <font size="12" />
08     <format><![CDATA[{%Value}{numDecimals:2} mph]]></format>
09   </labels>
10   <major_tickmark enabled="true" />
11   <minor_tickmark enabled="false" />
12 </axis>

And finally we get a speedometer with 2 scales of speed measuring:

Live Sample:  Circular multiple axes sample 1

to top

Different pointers on axes examples

Let's create two different axes with pointers that belong to the certain axis. For the beginning let's configure the primary axis the following way:

XML Syntax
Plain code
01 <scale minimum="0" maximum="10000" major_interval="2500" />

And set labels formatting so that they display "$" sign as suffix:

XML Syntax
Plain code
01 <labels enabled="true" rotate_circular="true" align="Center" auto_orientation="true">
02   <font size="12" />
03   <format><![CDATA[{%Value}{numDecimals:0} $]]></format>
04 </labels>

Now we add additional axis that will be named the same way: "additional" and will be scaled in percents:

XML Syntax
Plain code
01 <extra_axes>
02   <axis name="miles" radius="45">
03     <scale minimum="0" maximum="100" major_interval="25" />
04     <scale_bar enabled="true" size="10">
05       <fill enabled="true" type="solid" color="#66CCCC" opacity="0.5" />
06     </scale_bar>
07     <labels enabled="true" align="Inside" show_first="false" rotate_circular="true" auto_orientation="true">
08       <font size="12" />
09       <format><![CDATA[{%Value}{numDecimals:2} %]]></format>
10     </labels>
11     <major_tickmark enabled="true" />
12     <minor_tickmark enabled="true" />
13   </axis>
14 </extra_axes>

And as the final step we create two pointers. One of them will be attached to main axis, and another - to additional. XML for main pointer is:

XML Syntax
Plain code
01 <pointer type="marker" value="100" color="red">
02   <marker_pointer_style shape="TriangleUp" align="Outside" width="15" height="15" />
03 </pointer>

And for additional:

XML Syntax
Plain code
01 <pointer type="marker" value="140" color="Yellow" axis="miles">
02   <marker_pointer_style shape="TriangleUp" align="Inside" width="16" height="16" />
03 </pointer>

Note that we have added axis attribute to second pointer node and specified it: we wrote our additional axis name there. Now in the beginning both pointers show values of the appropriate axis. Then place both pointer nodes in pointers. The result is as follows:

Live Sample:  circular multiple axes sample 2

to top