Dials/Speedometer/Gauges Details

 
Dials and speedometer type visuals are very popular with BI dashboards
 
InfoCaptor Enterprise provides infinite ways to build your unique Dial. It comes with an excellent template that you can build upon and provides a poweful editor to modify the look and feel of the dial.
 
The entire Dial widget is designed like an "Onion". i.e with Layers
 
For e.g
1. You can define how many ranges you want
2. What kind of colors each ranges should be
3. Define additional decorative arcs and circles
4. Define the radius of each arc
5. Define thickness for each range and so on.
 
To understand how to work with dials, there are two basic components.
 
 
1. The angles that defines the shape of the arc
 
2. The range values that are distributed acros the length of the arc
 
How to define the shape of the gauge arc
 
If you look at a circle,  the bottom point is 90 degree angle, the left is 180 degree, top is 270 degree and the right is 360 degree.
 
We will just use this frame of reference and not worry about any type of co-ordinate system, shall we?
 
In the above figure, property #2 ticks_angle_min_max define the arc angle that will house the range of numbers.
 
so the the property #1 range_min_max : [0,50] define the spread of numbers on the arc.
 
In the figure below, the range varies in each type e.g [0,50] , [0,100], [40,160] but the arc angle or the shape remains the same.
 
How to change the shape of the dial.
 
As you see in the below figure, you can customize the shape of the arc by manipulating the arc and the ticks angle. There are two places you need to modify the angles.
 
#2 ticks_angle_min_max and #8 arc_angle. You can have #2 and #8 different angles. For e.g #8 can be defined to show a full circle and the
 
ticks angle #2 can just be a quarter or semi circle. In the below figure the ticks angle and arc angle are kept the same for consistent look.
 
The arc_angle is used to define the outer circle and as we will see below you can define as many concentric circles as you need.
 
How to define ranges
 
In dials/meter there is practice of defining three color ranges. Usually it is red, yellow and green (or Red, Amber, Green => RAG). In InfoCaptor, we can define as many ranges as needed. The minimum requirement is of atleast 1 range.
 
Range is defined using the property#4 ranges: [ [0,20] , [20,40] , [40,60] ]
 
The above property value defines three ranges
 
1st range => 0 to 20
 
2nd range => 20 to 40
 
3rd range => 40 to 60
 
Once we define the range, we can assign colors to each range. This is done using the property #range_color : ["red","yellow","green"]
 
so with the above range definition
 
1st range color => red
 
2nd range color => yellow
 
3rd range color => green
 
In the below figure, you will see that you can also skip a range or create a gap in the arc. In the second example below, the range is defined from
 
0 to 20 and the second range is from 35 to 50. So there is no range defined from 20 to 35 and hence the gap.
 
Another range property is the range_radius and range_thickness.
 
#15 range_radius defines the distance of the range arc from the center of the dial. You can show the red arc appear closer to the circle or further away. Each range arc can be at any distance from the center. If you provide a negative value for the range radius then the actual radius is the sum of dial radius and range radius.
 
#16 range_thickness defines how thick the range arc is. You can define the red arc to be thinner than the yellow arc and so on.
 
 
How to define the dial Pointer value
 
#6. "value_template": "Sales $# value ",
#7. "pointer_value" : [45],
#17."value_display": [0,15],
#22."legend_display": [0,60]
 
#6 value_template defines the way you want to display the pointer value. The # character in the template is replaced with the value referenced by #7 pointer_value.
 
#17 value_display defines the relative coordinates of the string that displays the value template inside the dial. The value [0,0] is the center of the dial, so the value of [0,15] means x is at the center and y is 15 points below the center.
 
The value [0,-30] will mean the x is at the center and y position is 30 points above the center.
 
Same is the case with the x,y cordinates for the legend_display
 
 
How to Data source from Excel and other databases
 
When you provide the data source, pointer_value gets updated from the real time data that you source in. All other formatting remains untouched.
Use online Web Dashboards in the cloud or download and host your own Dashboards