ChartZoomer
From Openzet
Contents |
ChartZoomer
Introduction
ChartZoomer is a control to specify as the value of annotationElements for any chart component. This class extends HDividedBox. ChartZoomer throws error unless you specify naviateChart and chartData values so you need to make sure to provide them.
Property
navigateChart Specifies the chart’s id to filter data. This property must be assigned its value at any time. Otherwise, this control throws a runtime exception.
chartData Specifies the dataProvider to apply data filtering on. This property must be assigned its value. Otherwise, this controls throws a runtime exception. Property datatype for this property is Arraycollection.
dividerChange Custom event dispatched whenever you move a divider in this control. The event type for this event is ChartZoomerEvent and this event provides leftValue and rightValue properties, which are used to indicate the starting and end indexes of the dataProvider bound with the chart.
Usage
The following is a simple usage for this class.<mx:AreaChart id="myChart2"You can also specify initial values for leftValue and rightValue properties.
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" chartData="{expenses}" dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
<mx:AreaChart id="myChart2"
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" rightValue="10" leftValue="20"
chartData="{expenses}"
dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
Application Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:chart="org.openzet.charts.chartClasses.*"
backgroundColor="0xFFFFFF"
paddingTop="5"
paddingRight="5"
paddingLeft="5"
paddingBottom="5"
creationComplete="creationCompleteHandler();"
initialize="initializeHandler();">
<mx:Script>
<![CDATA[
//-------------------------------------------------------------------------------
//
// Imports
//
//-------------------------------------------------------------------------------
import mx.collections.ArrayCollection;
import org.openzet.events.ChartZoomerEvent;
//-------------------------------------------------------------------------------
//
// Initialize
//
//-------------------------------------------------------------------------------
/**
* @private
*
* initializeHandler
*/
private function initializeHandler():void
{
}
/**
* @private
*
* creationCompleteHandler
*/
private function creationCompleteHandler():void
{
setRandomData();
}
//-------------------------------------------------------------------------------
//
// Variables
//
//-------------------------------------------------------------------------------
[Bindable]
private var expenses:ArrayCollection = new ArrayCollection();
[Bindable]
private var newData:ArrayCollection = new ArrayCollection();
//-------------------------------------------------------------------------------
//
// Methods
//
//-------------------------------------------------------------------------------
/**
* @parivate
*
* setRandomData
* */
private function setRandomData():void
{
var tempAC:ArrayCollection = new ArrayCollection();
expenses = new ArrayCollection();
var i:int;
var n:int = 500;
for (i = 0; i < n; i++)
{
tempAC.addItem({Month: Math.floor(Math.random() * (12 - 1 + 1)) + 1,
Profit: Math.floor(Math.random() * (500 - 300 + 1)) + 300,
Expenses: Math.floor(Math.random() * (500 - 300 + 1)) + 300});
}
expenses = tempAC;
//zoomInControl.chartData = expenses;
}
//-------------------------------------------------------------------------------
//
// EventHandler
//
//-------------------------------------------------------------------------------
private function dividerChangeHandler(event:ChartZoomerEvent):void
{
newData.source = expenses.source.slice(event.leftValue, event.rightValue);
}
]]>
</mx:Script>
<mx:Button label="set Data" click="setRandomData();" />
<mx:AreaChart id="myChart"
dataProvider="{newData}"
showDataTips="true"
width="100%" height="100%">
<mx:verticalAxis>
<mx:LinearAxis />
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis0}" visible="false" />
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis0"
dataProvider="{newData}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis0}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
</mx:AreaChart>
<mx:AreaChart id="myChart2"
dataProvider="{expenses}"
showDataTips="false"
width="100%" height="20%">
<mx:verticalAxis>
<mx:LinearAxis maximum="1000" padding="0"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLine="false"
visible="false" includeInLayout="false"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis
id="axis1"
dataProvider="{expenses}"
categoryField="Month" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{axis1}" showLabels="false" visible="false"
includeInLayout="false">
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:series>
<mx:AreaSeries
yField="Profit"
displayName="Profit"/>
</mx:series>
<mx:annotationElements>
<chart:ChartZoomer
id="zoomInControl"
navigateChart="{myChart2}" chartData="{expenses}" dividerChange="dividerChangeHandler(event);" />
</mx:annotationElements>
</mx:AreaChart>
</mx:Application>
