今天学习anychart，在慧都控件网上看有关文档，模仿试着做了个demo，发现慧都空间网的“Flash图表AnyChart应用教程六：创建圆形仪表”里的指针“<pointer type="bar" value="35" color="Gray" />”有误，应该为：type="needle"。还是看英文原文可靠啊！附英文文档网址：http://www.anychart.com/products/anychart/docs/users-guide/index.html?gauges.html
Your first circular gauge
- Overview
- Step 1. Basic Gauge - Creating Circular Gauge
- Step 2. Scale Settings and Title
- Step 3. Labels and Tickmarks
- Step 4. Color Ranges
- Step 5. Adding Markers
- Step 6. Pointer
- Step 7. Tuning frame and Margins
- Final. Monthly Sales Gauge is Ready
Overview
In this tutorial we will go through the creation of the basic circular gauge step by step, trying to cover all major elements and pointing to the articles for the further tuning a gauge.
So, a Circular Gauge is as minimum a radial scale that sweeps any angle from 0 to 360 degrees and a pointer, Needle or Knob that indicates values on that scale. Gauge scale is 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 speedometer 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:
- Launch the sample
- Download the sample
Step 1. Basic Gauge - Creating Circular Gauge
First of all we need to choose a gauge type, in this sample it should be circular gauge, so we put the following XML settings:
01 | <?xml version="1.0" encoding="UTF-8"?> |
<?xml version="1.0" encoding="UTF-8"?> <anychart> <gauges> <gauge> <circular /> </gauge> </gauges> </anychart>
As you can clearly see from this XML Snippet we tell AnyChart just to create one circular gauge, as a result we get the following output:
Live Sample: Sample Circular Gauge Step 1
As you can see, by default gauge has no pointers and some default 360 degrees 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="300" width="300" in our sample). AnyChart Gauges can be resized, but if you want to create the chart with a single circular gauge on it - it is recommended to start with width that is equal to the height.
Step 2. Scale Settings and Title
Now we will define the scale of the gauge, let's say that our speedometer shows value from 0 to 120 miles per hour.
Let's put this into XML:
01 | <?xml version="1.0" encoding="UTF-8"?> |
07 | <text><![CDATA[MPH Speedometer]]></text> |
11 | <axis radius="50" start_angle="90" sweep_angle="180"> |
12 | <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> |
<?xml version="1.0" encoding="UTF-8"?> <anychart> <gauges> <gauge> <chart_settings> <title> <text>MPH Speedometer</text> </title> </chart_settings> <circular> <axis radius="50" start_angle="90" sweep_angle="180"> <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> </axis> </circular> </gauge> </gauges> </anychart>
Note: <axis radius="50"> means that we want gauge axis to cover 50% percents of a gauge size - to understand this better you need to study Positioning, Resizing and Axis Overview Tutorials. start_angle sets the angle from which your scale should be drawn. The point from which the calculation starts is in the lowest points of your circular gauge and the direction is CW. sweep_angle is an actual angle of your circular gauge. In our example we will create a so-called "semi-radial" 180 degrees speedometer.
Now we will see the following result:
Live Sample: Sample Circular Gauge Step 2
We have created a semi-radial speedometer. However if you want your speedometer to remain circular you should set type attribute of frame node to "circular". By default it is set to "Auto" and crops unused space.
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. We also add a "mph" suffix to our labels. Only axis node is shown for better comprehension:
01 | <axis radius="50" start_angle="90" sweep_angle="180"> |
02 | <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> |
03 | <labels enabled="true"> |
05 | <format><![CDATA[{%Value}{numDecimals:0} mph]]></format> |
07 | <minor_tickmark enabled="false" /> |
<axis radius="50" start_angle="90" sweep_angle="180"> <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> <labels enabled="true"> <font bold="true" /> <format>{%Value}{numDecimals:0} mph</format> </labels> <minor_tickmark enabled="false" /> </axis>
Now the scale looks this way:
Live Sample: Sample Circular Gauge Step 3
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 "Slow", "Average" and "Fast" speed levels. The syntax should be as follows:
01 | <axis radius="50" start_angle="90" sweep_angle="180"> |
02 | <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> |
03 | <scale_bar enabled="false" /> |
04 | <labels enabled="true"> |
06 | <format><![CDATA[{%Value}{numDecimals:0} mph]]></format> |
08 | <minor_tickmark enabled="false" /> |
10 | <color_range start="0" end="40" color="Green" /> |
11 | <color_range start="40" end="80" color="Yellow" /> |
12 | <color_range start="80" end="120" color="Red" /> |
<axis radius="50" start_angle="90" sweep_angle="180"> <scale minimum="0" maximum="120" major_interval="20" minor_interval="5" /> <scale_bar enabled="false" /> <labels enabled="true"> <font bold="true" /> <format>{%Value}{numDecimals:0} mph</format> </labels> <minor_tickmark enabled="false" /> <color_ranges> <color_range start="0" end="40" color="Green" /> <color_range start="40" end="80" color="Yellow" /> <color_range start="80" end="120" color="Red" /> </color_ranges> </axis>
Here we are - our gauge is colored:
Live Sample: Sample Circular Gauge Step 4
Note that as we have added color ranges we no longer need scale_bar. So we have disabled it.
Step 5. Adding Markers
Also, it may be useful to point our some special point, for example, the optimal speed, we can so that with the custom axis labels, that can have a custom tickmark.
02 | <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" /> |
03 | <labels enabled="true"> |
05 | <format><![CDATA[{%Value}{numDecimals:0}]]></format> |
07 | <minor_tickmark enabled="false" /> |
09 | <custom_label value="65" enabled="true"> |
10 | <label enabled="true" align="Outside" padding="20"> |
11 | <format><![CDATA[Optimal]]></format> |
13 | <tickmark enabled="true" shape="Star5" auto_rotate="false" width="10" length="10" align="Inside" padding="-12"> |
15 | <border color="DarkColor(Yellow)" /> |
<axis> <scale minimum="0" maximum="100" major_interval="10" minor_interval="2" /> <labels enabled="true"> <font bold="true" /> <format>{%Value}{numDecimals:0}</format> </labels> <minor_tickmark enabled="false" /> <custom_labels> <custom_label value="65" enabled="true"> <label enabled="true" align="Outside" padding="20"> <format>Optimal</format> </label> <tickmark enabled="true" shape="Star5" width="10" length="10" align="Inside" padding="-12"> <fill color="Blue" /> <border color="DarkColor(Yellow)" /> </tickmark> </custom_label> </custom_labels> </axis>
Now we can clearly see optimal speed on the gauge.
Live Sample: Sample Circular Gauge Step 5
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):
01 | <?xml version="1.0" encoding="UTF-8"?> |
07 | <pointer type="bar" value="35" color="Gray" /> |
<?xml version="1.0" encoding="UTF-8"?> <anychart> <gauges> <gauge> <circular> <pointers> <pointer type="bar" value="35" color="Gray" /> </pointers> </circular> </gauge> </gauges> </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 Circular Gauge Step 6
Note that the view of our needle pointer is far from the ideal. We have simply changed its color without thoroughly examining its numerous attributes. For further information refer to Pointers Tutorial.
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. The frame by default is enabled and has inner_stroke and outer_stroke. If you want you can disable your frame by setting "False" value to enabled attribute.
01 | <?xml version="1.0" encoding="UTF-8"?> |
08 | <text><![CDATA[MPH Speedometer]]></text> |
10 | <chart_background enabled="false"> |
11 | <border enabled="false" /> |
<?xml version="1.0" encoding="UTF-8"?> <anychart> <margin all="5" /> <gauges> <gauge> <chart_settings> <title> <text>MPH Speedometer</text> </title> <chart_background enabled="false"> <border enabled="false" /> </chart_background> </chart_settings> </gauge> </gauges> </anychart>
And here is an output we get:
Live Sample: Sample Circular Gauge Step 7
Final Mph Speedometer Gauge is Ready
Now you know almost all basic settings and configurations of the circular 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:
- Architecture
- Positioning
- Resizing
- Visual Appearance
- Axis
Current Page Online URL: Your first circular gauge
