Flex 4 Gauge Source Code and a Sample Example

As you all required you can download the source code of the Flex 4 Gauge component also here is a sample MXML of how to add the Gauge in your Application



<controls:DegrafaGauge id="gauge"
  diameter="{gaugeDefaultDiameter}"
  liveDragging="false"
  horizontalCenter="0"
  verticalCenter="0"
  styleName="gaugeSkin"
  startAngle="30"
  endAngle="330"
  minimum="0"
  maximum="100"
  labelStyleName="gaugeLabel"
  labelFormatter="{formatter}"
  value="{_counterValue}"
  labelYOffsetRatio="0.7"
  initialize="{gauge.setStyle('startAngle',30); gauge.setStyle('endAngle',330);}"
  mouseOver="{OnMouseOverHandler(event)}"
  mouseOut="{OnMouseOutHandler(event)}">

</controls:DegrafaGauge>

Flex 4 Gauge

Since the release of Flex SDK 4 , I keep on searching for a free Gauge compatible with the new SDK but it ends with nothing. All available gauges were not free or incompatible with flex sdk 4. so i decided to find a way to migrate the most famous free flex gauge to SDK 4 but i faced 2 major problems:

1. The Gauge is based on Degrafa and as known it is not supporting flex sdk 4 till now
2. The beta version of degrafa 4 have major changes in the sdk that previous versions.

So i tried to use some new classes from the degrafa sdk 4 instead of the old ones to do the same functions and i succeed in this but i have a problem with only 1 class which is "ArcLineRepeater" which is responsible for drawing the gauge ticks.

Thanks to google :) i found the whole class action script and i started migrating it to flex sdk4 and the good news the gauge finally works with the same look and feal of the old one but this time is compatibale with flex sdk 4

you can download the new SWC from here