Complex (Composite) Gauges
Overview
In many cases gauges may have a complex structure and one
gauge may "contain" another in it (think of a wrist watches with several dials), or, for example, you may want to have several gauges placed one to one (like on car dashboard).
AnyChart allows to create such gauges using simple and understandable mechanism which is described in this article.
Nested Gauges
All you need to do to put one gauge in another is to give both unique names and specify one as a parent of another. if you do so - a child gauge is placed into parent container and you can set its height, width, x and y according to coordinates of parent gauge.
Actually - all gauges in AnyChart are children of the main <gauge> node and are placed in it by default.
Let's create a simple "Watch" gauge with separate dials for seconds, month and date to understand how everything works.
Create Gauges
First of all we will create three circular gauges and tune them in the proper ways: the main is called "Watch", and the other two - "Day" and "Month".
XML for this looks like that:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
05 |
<circular name="Watch" /> |
06 |
<circular name="Day" /> |
07 |
<circular name="Month" /> |
We will leave actual settings of these gauges aside, you can view them in live sample,
if you'd like to. The only point of interest is the fact that we simply create several circular gauges
at once.
Nest Gauges
When gauges are ready we can nest them to create "watch like" layout:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
05 |
<circular name="Watch" /> |
06 |
<circular name="Day" parent="Watch" x="20" y="20" width="20" height="20" /> |
07 |
<circular name="Month" parent="Watch" x="60" y="20" width="20" height="20" /> |
Setting such nesting gives us a proper result - gauges are nested:
Live Sample: multiple create sample 1
Multiple Gauges on one plot
Some dashboards may consist only of the gauges - you can create such types of Dashboards with AnyChart Dashboard
technology, but if you use only Gauges - you can use another way.
Acting just the same way as in previous sample - we create several
gauges of the required types, configure them and only adjust sizes and position - by
default all gauges are nested in the main gauge plot.
Here is an example of such multiple gauges:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
05 |
<circular x="0" y="0" width="30" height="50" /> |
06 |
<circular x="33.3" y="0" width="30" height="50" /> |
07 |
<circular x="66.6" y="0" width="30" height="50" /> |
08 |
<linear x="0" y="50" width="33.3" height="50" /> |
09 |
<linear x="33.3" y="50" width="33.3" height="50" /> |
10 |
<linear x="66.6" y="50" width="33.3" height="50" /> |
Live Sample: multiple create sample 2
