Your first linear gauge

Overview

In this tutorial we will go through the creation of the basic linear gauge step by step, trying to cover all major elements and pointing to the articles for the further tuning a gauge.

So, a Linear Gauge is a slider, with a single or multiple pointers to show your data value, gauge has some scale, usually colored for easy value quality distinction.

We will start from the scratch adding or configuring gauge elements on the each step, as a result we will create a typical ACME Corp. Monthly Sales Level gauge.

Note: in this sample AnyChart.swf is used, but you can optimize the page with selected chart type if you use custom type dependent swf. These swfs are described in SWFs Guide.

Gauge Sample:

to top

Step 1. Basic Gauge - Choosing Layout

First of all we need to choose a gauge type, in this sample it should be horizontal linear gauge, so we put the following XML settings:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <gauges>
04     <gauge>
05       <linear orientation="horizontal" />
06     </gauge>
07   </gauges>
08 </anychart>

As you can clearly see from this XML Snippet we tell AnyChart to create one linear gauge with horizontal orientation, as a result we get the following output:

Live Sample:  Sample Simple Gauge Step 1

As you can see, by default gauge has no pointers and some default scale with labels and tickmarks, when trying to recreate this sample please note that you should set appropriate size for AnyChart object in you page (height="150" width="500" in our sample). AnyChart Gauges can be resized, but if you want to create the horizontal linear gauge - it is recommended to start with width that is greater than height.

to top

Step 2. Scale Settings and Title

Now we will define the scale of the gauge, let's say that ACME Corp. monthly sales level is measured in thousands of dollars from 0 to 1000 th.

Let's put this into XML:

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <gauges>
04     <gauge>
05       <chart_settings>
06         <title>
07           <text><![CDATA[Monthly Sales Level (th. USD)]]></text>
08         </title>
09       </chart_settings>
10       <linear orientation="horizontal">
11         <axis size="50">
12           <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
13         </axis>
14       </linear>
15     </gauge>
16   </gauges>
17 </anychart>

Note: <axis size="50"> means that we want gauge axis to cover 50% percents of a gauge height - to understand this better you need to study Positioning, Resizing and Axis Overview Tutorials.

Now we will see the following result:

Live Sample:  Sample Simple Gauge Step 2

to top

Step 3. Labels and Tickmarks

When the scale is ready we can set how labels and tickmarks, we will remove decimal digits from labels and minor tickmarks. Only axis node is shown for better comprehension:

XML Syntax
Plain code
01 <axis>
02   <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
03   <labels enabled="true">
04     <font bold="true" />
05     <format><![CDATA[{%Value}{numDecimals:0}]]></format>
06   </labels>
07   <minor_tickmark enabled="false" />
08 </axis>

Now the scale looks this way:

Live Sample:  Sample Simple Gauge Step 3

to top

Step 4. Color Ranges

An essential part of linear gauges are color ranges that are used to distinct the quality of value shown, in our example we will create three color ranges "Bad", "Good" and "Excellent" sales levels. The syntax should be as follows:

XML Syntax
Plain code
01 <axis>
02   <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
03   <labels enabled="true">
04     <font bold="true" />
05     <format><![CDATA[{%Value}{numDecimals:0}]]></format>
06   </labels>
07   <minor_tickmark enabled="false" />
08   <color_ranges>
09     <color_range start="0" end="30" color="Red">
10       <label>
11         <format><![CDATA[Bad]]></format>
12       </label>
13     </color_range>
14     <color_range start="30" end="65" color="Yellow">
15       <label>
16         <format><![CDATA[Good]]></format>
17       </label>
18     </color_range>
19     <color_range start="65" end="100" color="Green">
20       <label>
21         <format><![CDATA[Excellent]]></format>
22       </label>
23     </color_range>
24   </color_ranges>
25 </axis>

Here we are - our gauge is colored:

Live Sample:  Sample Simple Gauge Step 4

to top

Step 5. Adding Markers

Also, it may be useful to point our some special point, for example, planned sales level, we can so that with the custom axis labels, that can have a custom tickmark.

XML Syntax
Plain code
01 <axis>
02   <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" />
03   <labels enabled="true">
04     <font bold="true" />
05     <format><![CDATA[{%Value}{numDecimals:0}]]></format>
06   </labels>
07   <minor_tickmark enabled="false" />
08   <custom_labels>
09     <custom_label value="65" enabled="true">
10       <label enabled="true" align="Outside" padding="20">
11         <format><![CDATA[Planned]]></format>
12       </label>
13       <tickmark enabled="true" shape="Star5" width="20" length="20" align="Outside" padding="-10">
14         <fill color="Yellow" />
15         <border color="DarkColor(Yellow)" />
16       </tickmark>
17     </custom_label>
18   </custom_labels>
19 </axis>

Now we can clearly see planned level on a gauge.

Live Sample:  Sample Simple Gauge Step 5

to top

Step 6. Pointer

One of the last, but one of the main parts of a gauge is a pointer - there are several ways to display it, but we will choose the most typical for this type of the gauges (all previously set nodes are left apart in the snippet):

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <gauges>
04     <gauge>
05       <linear orientation="horizontal">
06         <pointers>
07           <pointer type="bar" value="35" color="Gray" />
08         </pointers>
09       </linear>
10     </gauge>
11   </gauges>
12 </anychart>

Now the current sales level is shown, as you can see from the syntax you can place several pointers on one gauge, they can be of a different shape and placed differently (this fact, by the way, allows to create the Bullet Graphs with AnyChart easily):

Live Sample:  Sample Simple Gauge Step 6

to top

Step 7. Tuning frame and Margins

The final step in gauge creation is the definition of a frame and setting up margins. Frame is a complex graphical element that allows to display really nice-looking gauge. We will remove a general chart background and border, remove margins and configure frame in a desirable way.

XML Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03   <margin all="5" />
04   <gauges>
05     <gauge>
06       <chart_settings>
07         <title>
08           <text><![CDATA[Monthly Sales Level (th. USD)]]></text>
09         </title>
10         <chart_background enabled="false">
11           <border enabled="false" />
12         </chart_background>
13       </chart_settings>
14       <linear>
15         <frame enabled="true">
16           <background enabled="true">
17             <border enabled="true" color="Black" />
18           </background>
19         </frame>
20       </linear>
21     </gauge>
22   </gauges>
23 </anychart>

And here is an output we get:

Live Sample:  Sample Simple Gauge Step 7

to top

Final. Monthly Sales Gauge is Ready

Now you know almost all basic settings and configurations of the gauge, you can go on studying a lot of other parameters that can be changed to create a gauge that will display the data of your choice in a right way.

If you haven't studied any other articles in documentation yet we recommend you to start with the following:

to top