beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
5/24/2011 5:10:24 AM
Title: Help in Zoom and Pan with Flex Chart
Dear Friends,
Can you help me out with a flex and zoom and pan implementation in a Chart with different kind of series? Lets say if this is the example:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Declarations>
<mx:DateFormatter id="timeFormatter" formatString="J-NN-SS"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var myAC:ArrayCollection = new ArrayCollection(
[
{ datetime : new Date("Wed Mar 30 21:52:03:943 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:52:17:224 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:52:18:114 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:52:19:512 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:52:38 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:52:46 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:2.79 },
{ datetime : new Date("Wed Mar 30 21:52:49 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:53:23 GMT+0530 2011"), ask: 2.79, bid: 2.78, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:53:29 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:54:11 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:2.78 },
{ datetime : new Date("Wed Mar 30 21:54:24 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:54:26 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:54:55 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:02 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:05 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:06 GMT+0530 2011"), ask: 2.79, bid: 2.78, execPrice:2.81 },
{ datetime : new Date("Wed Mar 30 21:55:17 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:29 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:31 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:2.82 },
{ datetime : new Date("Wed Mar 30 21:55:41 GMT+0530 2011"), ask: 2.8, bid: 2.79, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:55:52 GMT+0530 2011"), ask: 2.81, bid: 2.8, execPrice:2.8 },
{ datetime : new Date("Wed Mar 30 21:55:58 GMT+0530 2011"), ask: 2.82, bid: 2.81, execPrice:2.81 },
{ datetime : new Date("Wed Mar 30 21:56:05 GMT+0530 2011"), ask: 2.82, bid: 2.81, execPrice:null },
{ datetime : new Date("Wed Mar 30 21:56:37 GMT+0530 2011"), ask: 2.83, bid: 2.82, execPrice:2.82 },
{ datetime : new Date("Wed Mar 30 21:56:40 GMT+0530 2011"), ask: null, bid: null, execPrice:null }
] );
private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
var datNum:Number = Date.parse(item);
var tempDate:Date = new Date(datNum);
return timeFormatter.format(tempDate);
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:LineChart id="tradePriceChart"
showDataTips="true"
dataProvider="{myAC}"
width="80%"
height="60%"
>
<!-- vertical axis -->
<mx:backgroundElements>
<!--<local:PanAndZoom />-->
</mx:backgroundElements>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="Price" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="datetime" title="Time"
labelFunction="categoryAxis_labelFunc"/>
</mx:horizontalAxis>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer canDropLabels="true" axis="{ca}"/>
</mx:horizontalAxisRenderers>
<!-- series -->
<mx:series>
<mx:LineSeries yField="bid"
form="curve" name="Bid"
displayName="Bid"/>
<mx:LineSeries yField="ask"
form="curve"
name="Ask"
displayName="Ask" />
<mx:PlotSeries yField="execPrice"
name="Trade"
displayName="Trade"/>
</mx:series>
</mx:LineChart>
<s:VGroup width="60" height="100%">
<mx:Legend dataProvider="{tradePriceChart}" width="60"/>
<mx:Image source="@Embed(source='img/ZoomIn.png')" left="5" width="21" height="21" toolTip="Zoom In"/>
<mx:Image source="@Embed(source='img/ZoomOut.png')" left="5" width="21" height="21" toolTip="Zoom Out"/>
</s:VGroup>
</s:Application>
1
Hi Ashish you can check the following links to implement zooming into data of flex charts
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_11.html
http://www.flex888.com/894/flex-drill-down-charts.html
let me know if it works for you
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_eventsandeffects_11.html
http://www.flex888.com/894/flex-drill-down-charts.html
let me know if it works for you
Post your Reply