Gauges

Example

  This basic Gauge.Angular element includes:

  • Built-in animation
  • Gauge Ring provides red "danger" zone
  • Gauge Label provides label inside gauge
  • Quicktip option

<Gauge ChartHeight="310" ChartWidth="400" DialBackgroundColor="Black" DialBorderColor="#687D9C" DialBorderThickness="5" ID="RoundGauge1" LowerBound="0" MinorTickFrequency="10" NeedleColor="#8EBAF6" NeedleRadius="75" NeedleThickness="6" StartAngle="135" TickColor="Coral" TickCount="10" TickLabelColor="LightBlue" TickLabelFontSize="18" TickLength="7" TickRadius="140" TickThickness="5" TotalAngle="270" Type="Angular" UpperBound="100" Value="55" TickLabelRadius="-30" MinorTickColor="Coral">
  <GaugeRing Color="#EE1E1E" ID="Ring1" RingEndValue="100" RingRadius="138" RingStartValue="80" RingThickness="10" />
  <GaugeLabel Caption="Pressure" Color="#FFFFFF" FontName="Arial" FontSize="18" Top="60" />
  <Quicktip Description="55 lbs./sq. in." />
</Gauge>
<Gauge ChartHeight="310" ChartWidth="400" DialBackgroundColor="Black" DialBorderColor="#687D9C" DialBorderThickness="5" ID="RoundGauge1" LowerBound="0" MinorTickFrequency="10" NeedleColor="#8EBAF6" NeedleRadius="75" NeedleThickness="6" StartAngle="135" TickColor="Coral" TickCount="10" TickLabelColor="LightBlue" TickLabelFontSize="18" TickLength="7" TickRadius="140" TickThickness="5" TotalAngle="270" Type="Angular" UpperBound="100" Value="55" TickLabelRadius="-30" MinorTickColor="Coral"> <GaugeRing Color="#EE1E1E" ID="Ring1" RingEndValue="100" RingRadius="138" RingStartValue="80" RingThickness="10" /> <GaugeLabel Caption="Pressure" Color="#FFFFFF" FontName="Arial" FontSize="18" Top="60" /> <Quicktip Description="55 lbs./sq. in." /> </Gauge>

  This basic Gauge.Angular element includes:

  • Built-in animation
  • Gauge Ring provides red "danger" zone
  • Gauge Label provides label inside gauge
  • Quicktip option

<Gauge ChartHeight="310" ChartWidth="400" DialBorderColor="Gainsboro" DialBorderThickness="5" ID="RoundGauge2" LowerBound="0" MinorTickFrequency="10" NeedleRadius="75" NeedleThickness="6" StartAngle="135" TickColor="#9F5101" TickCount="10" TickLabelColor="Black" TickLabelFontSize="18" TickLength="7" TickRadius="140" TickThickness="5" TotalAngle="270" Type="Angular" UpperBound="100" Value="72" DialBackgroundColor="White" NeedleColor="Black" IdeDisplayStatus="Collapsed">
  <GaugeRing Color="#EE1E1E" ID="Ring2" RingEndValue="100" RingRadius="140" RingStartValue="80" RingThickness="10" />
  <GaugeLabel Caption="Temperature" Color="Black" FontName="georgia" FontSize="20" Top="60" />
  <Quicktip Description="72 lbs./sq. in." />
</Gauge>
<Gauge ChartHeight="310" ChartWidth="400" DialBorderColor="Gainsboro" DialBorderThickness="5" ID="RoundGauge2" LowerBound="0" MinorTickFrequency="10" NeedleRadius="75" NeedleThickness="6" StartAngle="135" TickColor="#9F5101" TickCount="10" TickLabelColor="Black" TickLabelFontSize="18" TickLength="7" TickRadius="140" TickThickness="5" TotalAngle="270" Type="Angular" UpperBound="100" Value="72" DialBackgroundColor="White" NeedleColor="Black" IdeDisplayStatus="Collapsed"> <GaugeRing Color="#EE1E1E" ID="Ring2" RingEndValue="100" RingRadius="140" RingStartValue="80" RingThickness="10" /> <GaugeLabel Caption="Temperature" Color="Black" FontName="georgia" FontSize="20" Top="60" /> <Quicktip Description="72 lbs./sq. in." /> </Gauge>

  This basic Gauge.Angular element includes:

  • Background color and border
  • Built-in animation
  • Multiple Gauge Rings provide color-coded zones
  • Gauge Label provides label inside gauge

<Gauge BackgroundColor="#E8F6FF" BorderColor="DarkSlateGray" ChartHeight="310" ChartWidth="400" ID="RoundGauge3" LowerBound="0" MinorTickFrequency="3" NeedleColor="#565656" NeedleRadius="80" NeedleThickness="5" StartAngle="105" TickColor="Black" TickCount="10" TickLabelColor="Black" TickLabelFontBold="False" TickLabelFontName="Verdana" TickLabelFontSize="14" TickLabelFormat="" TickLabelRadius="-25" TickLength="7" TickRadius="130" TickThickness="3" Tooltip="RPM: 57,000" TotalAngle="325" Type="Angular" UpperBound="100" Value="44" DialBorderColor="Black">
  <GaugeRing Color="#6495ED" ID="RingTickBkgnd" RingEndValue="100" RingRadius="132" RingStartValue="0" RingThickness="12" />
  <GaugeRing Color="PaleGreen" ID="RingGreen" RingEndValue="60" RingRadius="120" RingStartValue="0" RingThickness="8" />
  <GaugeRing Color="yellow" ID="RingYellow" RingEndValue="80" RingRadius="120" RingStartValue="60" RingThickness="8" />
  <GaugeRing Color="red" ID="RingRed" RingEndValue="100" RingRadius="120" RingStartValue="80" RingThickness="8" />
  <GaugeLabel Caption=" RPM x 1000" Color="Black" FontItalic="True" FontSize="18" ID="Label3" Top="60" />
</Gauge>
<Gauge BackgroundColor="#E8F6FF" BorderColor="DarkSlateGray" ChartHeight="310" ChartWidth="400" ID="RoundGauge3" LowerBound="0" MinorTickFrequency="3" NeedleColor="#565656" NeedleRadius="80" NeedleThickness="5" StartAngle="105" TickColor="Black" TickCount="10" TickLabelColor="Black" TickLabelFontBold="False" TickLabelFontName="Verdana" TickLabelFontSize="14" TickLabelFormat="" TickLabelRadius="-25" TickLength="7" TickRadius="130" TickThickness="3" Tooltip="RPM: 57,000" TotalAngle="325" Type="Angular" UpperBound="100" Value="44" DialBorderColor="Black"> <GaugeRing Color="#6495ED" ID="RingTickBkgnd" RingEndValue="100" RingRadius="132" RingStartValue="0" RingThickness="12" /> <GaugeRing Color="PaleGreen" ID="RingGreen" RingEndValue="60" RingRadius="120" RingStartValue="0" RingThickness="8" /> <GaugeRing Color="yellow" ID="RingYellow" RingEndValue="80" RingRadius="120" RingStartValue="60" RingThickness="8" /> <GaugeRing Color="red" ID="RingRed" RingEndValue="100" RingRadius="120" RingStartValue="80" RingThickness="8" /> <GaugeLabel Caption=" RPM x 1000" Color="Black" FontItalic="True" FontSize="18" ID="Label3" Top="60" /> </Gauge>