Gauge Charts

Gauge charts are effective when you need to display a single or a number of single variables at some moment in time. These charts are often used as parts of digital dashboards to present key indicators to the end-users.

WebCharts3D Gauge charts use standard MxChartModel with a single row of data representing chart's values. An optional second row can be used to map these values to the different axes as described in this manual.

Changing Dial Style

A Gauge chart consists of outer edge, inner edge, multiple axes, hands and a knob. The following picture shows a basic gauge chart with default attributes. This is a 360 degree dial chart with one axis.

Xml Style: <gauge> </gauge>

WebCharts3D allows you to define the angle for the chart's dial by customizing startAngle and sweepAngle for the dial style. All angles are measured in degrees starting from 3 o'clock position with clockwise angles being positive and counterclockwise ones - negative. For example, the following chart has startAngle of 220 and sweepAngle of -260.

Xml Style: <gauge> <dialStyle startAngle="220" sweepAngle="-260"/> </gauge>

Changing Edges

The Dial is surrounded by two borders which attributes are defined by edge style. The combination of these borders allows you to produce a large number of custom decorations, such as shown in the pictures below:

Xml Style: <gauge> <dialStyle startAngle="220" sweepAngle="-260"> <paint minColor="#333333" maxColor="#CCCCCC"/> </dialStyle> <edgeStyle outerSize="2" outerSide="2" innerSize="3" innerSide="3"> <inner minColor="#CCCCCC" maxColor="#333333"/> </edgeStyle> </gauge>

Xml Style: <gauge> <dialStyle startAngle="220" sweepAngle="-260"> <paint outlineColor="#6699CC" minColor="#99CCFF" maxColor="white" angle="90"/> </dialStyle> <edgeStyle outerSize="7" outerSide="1" innerSize="5" innerSide="10"> <outer minColor="#6699CC" maxColor="white" angle="90"/> <inner minColor="#99CCFF" angle="180"/> </edgeStyle> </gauge>

When you create gauge charts with sweep angles less than 180 degrees you can choose between showing the entire chart, or just the chart's segment by toggling isFull attribute of dial style on or off. Clip attributes in knob style control the hand and knob clipping for such charts.

Customizing Hand and Knob

Hand and knob attributes allow you to further customize the chart. A chart can have only one knob but multiple hands. The default hand attributes are specified by Hand Style. You can override these default attributes by adding more styles to Hand Styles collection. For example, the chart below has three hands with rrow, bar and dot styles.

Xml Style: <gauge> <handStyle tailSize="-40"> <paint shadowColor="#333333" minColor="#FF99CC" maxColor="#CCFF99"/> </handStyle> <handStyles index="1" type="Bar" placement="Inner"> <paint outlineColor="#CCCCCC" minColor="#CC6600" maxColor="white" angle="90"/> </handStyles> <handStyles index="2" type="Dot" placement="Text" tailSize="10"> <paint minColor="#80FF0000"/> </handStyles> <knobStyle size="46"/> </gauge>

Customizing Axes

An axis consists of tick area, label area and optional limit area. The axis's range in case of gauge charts never automatically includes the actual value and should be explicitly specified by scale min and scale max attributes. Unless angle margin is specified the entire range available for the axis is used to draw it.

All axis elements are highly customizable. You can choose label placement and orientation, label format, major and minor tick shape and colors, axis background and define custom limits. The gauge on the right shows three different axis that demonstrate some of the axis's attributes.

Xml Style:

<gauge axisPlacement="Separate">
...
<axisStyles index="0" labelPlacement="Outside" labelCount="5" angleMargin="10" outerMargin="5" labelMargin="2">
   <labelStyle isMultiline="false" orientation="Slanted"/>
   <majorTick width="5" length="12" shape="Pyramid">
       <paint shadowOffsetX="1" shadowOffsetY="1" shadowColor="#666666" minColor="#AAAA00" maxColor="yellow"/>
   </majorTick>
   <minorTick width="2">
      <paint shadowOffsetX="1" shadowOffsetY="1" shadowColor="#999999" minColor="#AA0000" />
   </minorTick>
</axisStyles>

<axisStyles index="1" size="26" labelCount="5" angleMargin="5" outerMargin="20">
   <paint shadowColor="#333333" minColor="#516469" maxColor="#CC6600"/>
   <labelFormat style="Choice" pattern="0 # Low | 25 # Below Average | 50 # Average | 75 # Above Average | 100 # High"/>
   <labelStyle orientation="Parallel"/>
   <majorTick width="4" length="12" shape="Diamong">
      <paint minColor="#00AAAA" maxColor="cyan"/>
   </majorTick>
   <minorTick length="2"/>
</axisStyles>

<axisStyles index="2" size="0" labelPlacement="Hidden" labelCount="5" angleMargin="5" outerMargin="5" limitMargin="5">
   <paint minColor="black"/>
   <majorTick width="8" shape="Circle">
      <paint shadowOffsetX="1" shadowOffsetY="1" shadowColor="#333333" minColor="#AA00AA" maxColor="magenta"/>
   </majorTick>
   <minorTick shape="Block">
      <paint shadowOffsetX="1" shadowOffsetY="1" shadowColor="#333333" minColor="#AA0000" maxColor="red"/>
   </minorTick>
   <limits index="0" minValue="60.0" maxValue="100.0" minWidth="6">
      <paint shadowOffsetX="-1" shadowOffsetY="-1" shadowColor="#333333" minColor="green" maxColor="red"/>
   </limits>
   <limits index="1" maxValue="50.0" maxWidth="0">
      <paint outlineColor="white" minColor="#0000AA" maxColor="yellow"/>
   </limits>
</axisStyles>
</gauge>

Multiple Axes

Gauge charts can have multiple axes. You can create multiple axes by adding new styles to axis styles collection. The axis with the largest index defines the total number of axes.

To bind your data to different axes you need to procide a second row of data in your model. The values in this row will be used as indexes to define what axis the corresponding value should be rendered against.

Multiple axes can be enclosed one inside other or placed side by side as the following two pictures demonstrate.

Titles and Data labels

Each axis can have a title and each hand can have a data label assosiated with it. A title is just a string and a data label is represented by a pattern that can use standard WebCharts3D pseudo-variables such as ${value}. You can control both title and data label placement by using its angle and ratio attributes.

Data labels can be displayed using fonts or emulated 7 or 16 LED. For example, the chart below uses LED7 to display the value as data label. Note that LED7 can be used to display numbers only.

 

<gauge> <handStyle> <dataLabel type="Led7" backColor="#999999" edge="Emboss">$(value)</dataLabel> </handStyle> </gauge>