Flex UI Component for graphical Disk Space Usage status indicator

Question

I am creating a plugin for VMWare vSphere Web Client using Flex 4.6.

I am trying to create a disk usage status indicator which looks something like this:

I tried using ProgressBar Control (As the usage status will be shaded only after the page is loaded) and then got struck there itself.

<mx:ProgressBar id="storageStatusBar" width="300" height="18" 
    label="USED %1 Gb" indeterminate="false" labelPlacement="bottom"
    mode="polled" initialize="storageStatusBar_initializeHandler()"/>

Initializer Function:

private function storageStatusBar_initializeHandler():void
{
    storageStatusBar.setProgress(100,200);
}

I realized that this a bad idea because I didn't and I don't know what should I set for source attribute of progressbar.

I am new to flex, so it'll be great if someone can guide me on which component control is best suitable for creating this UI.

Answer 1

Set the ProgressBar mode to "manual", and you can control the values through Actionscript, no source needed.