<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.anychart.*" creationComplete="onCreationComplete();" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
private var gauge1RndFirst:Randomizer=new Randomizer(45,0,100,1);
private var gauge1RndSecond:Randomizer=new Randomizer(31,0,100,1);
private var gauge2RndFirst:Randomizer=new Randomizer(16,0,100,1);
private var gauge2RndSecond:Randomizer=new Randomizer(44,0,100,1);
private var gauge3RndFirst:Randomizer=new Randomizer(34,0,100,1);
private var gauge3RndSecond:Randomizer=new Randomizer(9,0,100,1);
private var timer:Timer=new Timer(50);
private function onCreationComplete():void
{
this.linearGauge1.anychartXML=createLinearGauge(45,31);
this.linearGauge2.anychartXML=createLinearGauge(16,44);
this.linearGauge3.anychartXML=createLinearGauge(34,9);
timer.addEventListener(TimerEvent.TIMER,onTimer);
timer.start();
}
private function onTimer(e:TimerEvent):void
{
var value:Number=Math.round(gauge1RndFirst.GenerateNextValue());
this.linearGauge1.updatePointerData("linearGauge","firstValue",value);
this.lbGauge1Value1.text="Value1: "+value.toString()+"%";
value=Math.round(gauge1RndSecond.GenerateNextValue());
this.linearGauge1.updatePointerData("linearGauge","secondValue",value);
this.lbGauge1Value2.text="Value2: "+value.toString()+"%";
value=Math.round(gauge2RndFirst.GenerateNextValue());
this.linearGauge2.updatePointerData("linearGauge","firstValue",value);
this.lbGauge2Value1.text="Value1: "+value.toString()+"%";
value=Math.round(gauge2RndSecond.GenerateNextValue());
this.linearGauge2.updatePointerData("linearGauge","secondValue",value);
this.lbGauge2Value2.text="Value2: "+value.toString()+"%";
value=Math.round(gauge3RndFirst.GenerateNextValue());
this.linearGauge3.updatePointerData("linearGauge","firstValue",value);
this.lbGauge3Value1.text="Value1: "+value.toString()+"%";
value=Math.round(gauge3RndSecond.GenerateNextValue());
this.linearGauge3.updatePointerData("linearGauge","secondValue",value);
this.lbGauge3Value2.text="Value2: "+value.toString()+"%";
}
private function createLinearGauge(value1:Number,value2:Number):XML
{
var linearGaugeXML:XML=
<anychart>
<margin all="10" />
<settings>
<animation enabled="true" />
</settings>
<gauges>
<gauge>
<chart_settings>
<title enabled="false"/>
<chart_background enabled="false"/>
</chart_settings>
<linear name="linearGauge" orientation="Vertical">
<axis size="15" position="60">
<scale_bar>
<effects enabled="false"/>
</scale_bar>
<color_ranges>
<color_range start="70" end="100" align="Outside" padding="2" start_size="0" end_size="10">
<fill type="Gradient">
<gradient angle="90">
<key color="Red"/>
<key color="Yellow"/>
<key color="Green"/>
</gradient>
</fill>
</color_range>
</color_ranges>
<labels>
<format>{"{%Value}{numDecimals:0}%"}</format>
</labels>
</axis>
<frame enabled="true" type="Rectangular">
<corners type="Rounded" all="5"/>
<outer_stroke enabled="true" thickness="3">
<fill type="Gradient">
<gradient>
<key color="#FEFEFE"/>
<key color="#CECECE"/>
</gradient>
</fill>
<border enabled="true" color="Black" opacity="0.1"/>
</outer_stroke>
<inner_stroke enabled="false"/>
<background>
<fill type="Solid" color="White">
<gradient>
<key position="0" color="#FFFFFF"/>
<key position="0.3" color="#EEEEEE"/>
<key position="1" color="#FEFEFE"/>
</gradient>
</fill>
<border enabled="false" type="Gradient" thickness="6"/>
<effects enabled="true">
<inner_shadow enabled="true" distance="3" opacity="0.2"/>
</effects>
</background>
<effects enabled="true">
<drop_shadow enabled="true" distance="1" opacity="0.3"/>
</effects>
</frame>
<pointers>
<pointer name="firstValue" type="Bar" value={value1} color="CornflowerBlue">
<bar_pointer_style width="%AxisSize*0.7">
<border enabled="true" type="Solid" color="DarkColor(%Color)"/>
<effects enabled="true">
<bevel enabled="true" distance="2" highlight_opacity="0.3" shadow_opacity="0.3"/>
</effects>
</bar_pointer_style>
</pointer>
<pointer name="secondValue" type="Marker" value={value2} color="Black">
<marker_pointer_style align="Outside" padding="0" width="10" height="10"/>
</pointer>
</pointers>
</linear>
</gauge>
</gauges>
</anychart>;
return linearGaugeXML;
}
]]>
</mx:Script>
<mx:Panel width="430" height="506" layout="absolute" title="Linear Gauges" horizontalCenter="0" verticalCenter="-3">
<ns1:AnyChartFlex x="29" y="32" width="113" id="linearGauge1" height="384"/>
<ns1:AnyChartFlex x="150" y="32" width="113" id="linearGauge2" height="384"/>
<ns1:AnyChartFlex x="271" y="32" width="113" id="linearGauge3" height="384"/>
<mx:Label x="302" y="13" text="Gauge 3" fontWeight="bold"/>
<mx:Label x="59" y="13" text="Gauge 1" fontWeight="bold"/>
<mx:Label x="180" y="13" text="Gauge 2" fontWeight="bold"/>
<mx:Label x="45" y="418" text="Value 1:" id="lbGauge1Value1" fontWeight="bold"/>
<mx:Label x="45" y="436" text="Value 2:" id="lbGauge1Value2" fontWeight="bold"/>
<mx:Label x="168" y="418" text="Value 1:" id="lbGauge2Value1" fontWeight="bold"/>
<mx:Label x="168" y="436" text="Value 2:" id="lbGauge2Value2" fontWeight="bold"/>
<mx:Label x="290" y="418" text="Value 1:" id="lbGauge3Value1" fontWeight="bold"/>
<mx:Label x="290" y="436" text="Value 2:" id="lbGauge3Value2" fontWeight="bold"/>
</mx:Panel>
</mx:Application>