Google Git
Sign in
apache / flex-site / HEAD / . / content / doc / flex / using / flx_charts_eventsandeffects_che.html
blob: 454ddf0e1a5cf7b57993ca8f061fc9ba2ecadb57 [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us">
<head>
<meta name="DC.Type" content="topic"/>
<meta name="DC.Title" content="Events and effects in charts"/>
<meta name="DC.Format" content="XHTML"/>
<meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7c66_verapache"/>
<title>Events and effects in charts</title>
</head>
<body id="WS2db454920e96a9e51e63e3d11c0bf69084-7c66_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c66_verapache"><!-- --></a>
<div>
<p>You can use Flex charting
controls to make interesting and engaging charts. Important factors
to consider are how users' interactions with your applications trigger
effects and events. </p>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff_verapache"><!-- --></a>
<h2 class="topictitle2">Handling user interactions with
charts</h2>
<div>
<p>Chart controls accept many kinds of user interactions,
from moving the mouse over a data point to clicking or double-clicking
on that data point. You can create an event handler for each of
these interactions and use the Event object in that handler to access
the data related to that interaction. For example, if a user clicks on
a column in a ColumnChart control, you can access that column's
data in the click event handler of that chart.</p>
<p>The chart controls support the mouse events that are inherited
from the <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">UIComponent</a> class: <samp class="codeph">mouseMove</samp>, <samp class="codeph">mouseOver</samp>, <samp class="codeph">mouseUp</samp>, <samp class="codeph">mouseDown</samp>,
and <samp class="codeph">mouseOut</samp>. These events are of type <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/MouseEvent.html" target="_blank">MouseEvent</a>.
In addition, the base class for all chart controls, <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/ChartBase.html" target="_blank">ChartBase</a>,
adds support for the the <a href="https://flex.apache.org/asdoc/mx/charts/events/ChartEvent.html" target="_blank">ChartEvent</a> and <a href="https://flex.apache.org/asdoc/mx/charts/events/ChartItemEvent.html" target="_blank">ChartItemEvent</a> events. </p>
<p>The ChartItemEvent class defines events that are specific to
the chart components, such as when the user clicks a data item in
a chart. The ChartEvent class defines events that occur when the
user clicks or double-clicks on a chart control, but not on a chart
item in that chart control.</p>
<p>The
following table describes the ChartEvent event types:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e93">
<p>Chart event type</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e99">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e93 ">
<div class="p">
<pre class="codeblock">chartClick</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e99 ">
<p>Broadcast when the user clicks the mouse
button while the mouse pointer is over a chart but not on a chart item.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e93 ">
<div class="p">
<pre class="codeblock">chartDoubleClick</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e99 ">
<p>Broadcast when the user double-clicks the
mouse button while the mouse pointer is over a chart but not on
a chart item.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>The
following table describes the ChartItemEvent event types:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e167">
<p>Chart data event type</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e173">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">change</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Dispatched when the selected item or items
changes in the chart.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemClick</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the user clicks the mouse
button while over a data point.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemDoubleClick</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the user double-clicks the
mouse button while over a data point.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemMouseDown</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the mouse button is down
while over a data point.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemMouseMove</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the user moves the mouse
pointer while over a data point. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemMouseUp</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the user releases the mouse
button while over a data point.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemRollOut</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the closest data point under
the mouse pointer changes. </p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e167 ">
<div class="p">
<pre class="codeblock">itemRollOver</pre>
</div>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e173 ">
<p>Broadcast when the user moves the mouse
pointer over a new data point. </p>
</td>
</tr>
</tbody>
</table>
</div>
<p>In addition to the ChartEvent and ChartItemEvent classes, there
is also the <a href="https://flex.apache.org/asdoc/mx/charts/events/LegendMouseEvent.html" target="_blank">LegendMouseEvent</a>.
This class defines events that are broadcast when the user clicks
on legend items or mouses over them.</p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffe_verapache"><!-- --></a>
<h3 class="topictitle3">About chart events</h3>
<div>
<p>Chart events are triggered when the user clicks or double-clicks
the mouse button while the mouse pointer is over a chart control,
but not over a chart item in that chart control. These events are
dispatched only if the hit data set is empty.</p>
<p>Chart events are of type ChartEvent. Because ChartEvent events
are part of the charts package, and not part of the events package,
you must import the appropriate classes in the mx.charts.events
package to use a ChartEvent event.</p>
<p>The following example logs a ChartEvent when you click or double-click
the chart control, but only if you are not over a chart item or
within it's range, as determined by its <samp class="codeph">mouseSensitivity</samp> property.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/BasicChartEvent.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600" width="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.events.ChartEvent;
private function chartEventHandler(event:ChartEvent):void {
/*
* The ChartEvent will only be dispatched if the mouse is _not_ over a
* chart item or if it is outside of the range defined by the
* mouseSensitivity property.
*/
ta1.text += "Event of type " + event.type + " was triggered.\n";
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Style&gt;
@namespace s "library://ns.adobe.com/flex/spark";
s|Panel {
paddingLeft:5;
paddingRight:5;
paddingTop:5;
paddingBottom:5;
}
&lt;/fx:Style&gt;
&lt;s:Panel title="Chart click events"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:HGroup&gt;
&lt;mx:PlotChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
mouseSensitivity="10"
doubleClickEnabled="true"
chartClick="chartEventHandler(event)"
chartDoubleClick="chartEventHandler(event)"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries
xField="expenses"
yField="profit"
displayName="Plot 1"/&gt;
&lt;mx:PlotSeries
xField="amount"
yField="expenses"
displayName="Plot 2"/&gt;
&lt;mx:PlotSeries
xField="profit"
yField="amount"
displayName="Plot 3"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;s:TextArea id="ta1" width="150" height="300"/&gt;
&lt;/s:HGroup&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd1_verapache"><!-- --></a>
<h3 class="topictitle3">About chart data events</h3>
<div>
<p>Chart data events are triggered only when the user moves
the mouse pointer over a data point, whereas UIComponent events
are triggered by any mouse interaction with a control. </p>
<p>The chart data events are of type ChartItemEvent. Because ChartItemEvent events
are part of the charts package, and not part of the events package,
you must import the appropriate classes in the mx.charts.events
package to use a ChartItemEvent event.</p>
<p>The following example opens an alert when the user clicks a data
point (a column) in the chart:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/DataPointAlert.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.controls.Alert;
import mx.charts.events.ChartItemEvent;
public function myHandler(e:ChartItemEvent):void {
Alert.show("Chart data was clicked");
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Clickable Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
itemClick="myHandler(event)"
dataProvider="{srv.lastResult.data.result}"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries yField="expenses" displayName="Expenses"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c10_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c10_verapache"><!-- --></a>
<h3 class="topictitle3">Using the HitData object</h3>
<div>
<p>Flex
dispatches a <a href="https://flex.apache.org/asdoc/mx/charts/events/ChartItemEvent.html" target="_blank">ChartItemEvent</a> object
for each chart data event such as when you click on an item in the
series. In addition to the standard <samp class="codeph">target</samp> and <samp class="codeph">type</samp> properties
that all Event objects have, Flex adds the <samp class="codeph">hitData</samp> property
to the ChartItemEvent object. This property is an object instance
of the <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> class. The <samp class="codeph">hitData</samp> property
contains information about the data point that is closest to the
mouse pointer at the time of the mouse event.</p>
<p>The <samp class="codeph">item</samp> property of the <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> object
refers to the data point. You can use that property to access its
value by its name, as the previous example shows. The <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a>
<em>x</em> and <em>y</em> properties
refer to the screen coordinates of the data point. </p>
<p>Only data points within the radius determined by the <samp class="codeph">mouseSensitivity</samp> property
can trigger an event on that data point. For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c11_verapache">Changing
mouse sensitivity</a>.</p>
<p>The following example uses the <samp class="codeph">itemDoubleClick</samp> event
handler to display HitData information for data points in a column
chart when the user clicks on a column. Because each column in the <a href="https://flex.apache.org/asdoc/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> control
is associated with a single data point value, clicking the mouse
anywhere in a column displays the same information for the x and
y coordinates.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/HitDataOnClick.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();init()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.events.ChartItemEvent;
// Define the event handler.
public function myListener(e:ChartItemEvent):void {
ti1.text = e.hitData.item.expenses;
ti2.text = String(e.hitData.x) + ", " + String(e.hitData.y);
}
// Define event listeners when the application initializes.
public function init():void {
myChart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK, myListener);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Accessing HitData Object in Event Handlers"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
doubleClickEnabled="true"
showDataTips="true"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries yField="expenses"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;s:Form width="100%"&gt;
&lt;!--Define a form to display the event information.--&gt;
&lt;s:FormItem label="Expenses:"&gt;
&lt;s:TextInput id="ti1" width="100%"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="x/y:"&gt;
&lt;s:TextInput id="ti2" width="100%"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffc_verapache"><!-- --></a>
<h4 class="topictitle4">Getting chart elements</h4>
<div>
<p>The <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> object
accesses the chart's <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> objects.
These objects represent data points on the screen. In addition to
providing access to the data of data points, ChartItem objects provide
information about the size and position of graphical elements that
make up the chart. For example, you can get the <em>x</em> and <em>y</em> positions
of columns in a ColumnChart.</p>
<p>The following example uses a semitransparent <a href="https://flex.apache.org/asdoc/mx/containers/Canvas.html" target="_blank">Canvas</a> container
to highlight the data point that the user clicks on with the mouse.
The application also accesses the ChartItem object to get the current
value to display in a ToolTip on that Canvas: </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/ChartItemObjectAccess.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();init()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Style&gt;
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ToolTip {
fontSize:24;
}
mx|ColumnChart {
gutterLeft: 54;
}
&lt;/fx:Style&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.core.IFlexDisplayObject;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.series.ColumnSeries;
import mx.effects.Move;
import mx.charts.HitData;
public var m:mx.effects.Move;
public var hitData:mx.charts.HitData;
public var chartItem:ColumnSeriesItem;
public var renderer:IFlexDisplayObject;
public var series:ColumnSeries;
public var chartItemPoint:Point;
public var highlightBoxPoint:Point;
public var leftAdjust:Number;
private function init():void {
m = new Move(highlightBox);
/* This is used to adjust the x location of
highlightBox to account for the left gutter width. */
leftAdjust = myChart.getStyle("gutterLeft") - 14;
trace("leftAdjust: " + leftAdjust);
}
private function overData(event:ChartItemEvent):void {
hitData = event.hitData;
chartItem = ColumnSeriesItem(hitData.chartItem);
renderer = chartItem.itemRenderer;
series = ColumnSeries(hitData.element);
/* Add 10 pixels to give it horizontal overlap. */
highlightBox.width = renderer.width * 2 + 10;
/* Add 20 pixels to give it vertical overlap. */
highlightBox.height = renderer.height + 20;
highlightBoxPoint = new Point(highlightBox.x,
highlightBox.y);
/* Convert the ChartItem's pixel values from local
(relative to the component) to global (relative
to the stage). This enables you to place the Canvas
container using the x and y values of the stage. */
chartItemPoint = myChart.localToGlobal(new Point(chartItem.x, chartItem.y));
/* Define the parameters of the move effect and play the effect. */
m.xTo = chartItemPoint.x + leftAdjust;
m.yTo = chartItemPoint.y;
m.duration = 500;
m.play();
highlightBox.toolTip = "$" + chartItem.yValue.toString();
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Highlighted Columns"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
itemClick="overData(event)"
mouseSensitivity="0"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
displayName="Expenses"
yField="expenses"/&gt;
&lt;mx:ColumnSeries
displayName="Profit"
yField="profit"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;!-- Define the canvas control that will be used as a highlight. --&gt;
&lt;mx:Canvas id="highlightBox"
y="0" x="0"
backgroundColor="0xFFFF00"
alpha=".5"/&gt;
&lt;/s:Application&gt;</pre>
<p>For information about changing the appearance of ChartItem objects,
see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c52_verapache">Skinning
ChartItem objects</a>.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache"><!-- --></a>
<h4 class="topictitle4">Getting data with coordinates</h4>
<div>
<p>When you create charts, you can use the coordinates on
the screen to get the nearest data point or data points, or conversely,
to pass the data point and get the coordinates. </p>
<p>The <samp class="codeph">findDataPoints()</samp> and <samp class="codeph">localToData()</samp> methods
take coordinates and return data. The <samp class="codeph">findDataPoints()</samp> method
returns a <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> object. The <samp class="codeph">localToData()</samp> method
returns an Array of the data. </p>
<p>You can also pass the data itself and get the coordinates with
the <samp class="codeph">dataToLocal()</samp> method. </p>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c07_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c07_verapache"><!-- --></a><h5 class="sectiontitle">Using
the findDataPoints() method</h5>
<p>You can use the chart control's <samp class="codeph">findDataPoints()</samp> method
to get an Array of <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> objects
by passing in x and y coordinates. If the coordinates do not correspond
to the location of a data point, the <samp class="codeph">findDataPoints()</samp> method
returns <samp class="codeph">null</samp>. Otherwise, the <samp class="codeph">findDataPoints()</samp> method
returns an Array of HitData objects.</p>
<p>The <samp class="codeph">findDataPoints()</samp> method
has the following signature:</p>
<pre class="codeblock"> findDataPoints(<em>x</em>:Number, <em>y</em>:Number):Array</pre>
<p>The
following example creates a <a href="https://flex.apache.org/asdoc/mx/charts/PlotChart.html" target="_blank">PlotChart</a> control
and records the location of the mouse pointer as the user moves
the mouse over the chart. It uses the <samp class="codeph">findDataPoints()</samp> method
to get an Array of HitData objects, and then displays some of the
first object's properties.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/FindDataPoints.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.HitData;
public function handleMouseMove(e:MouseEvent):void {
// Use coordinates to get HitData object of
// current data point.
var hda:Array =
chart.findDataPoints(e.currentTarget.mouseX,
e.currentTarget.mouseY);
if (hda[0]) {
ta.text = "Found data point " +
hda[0].chartItem.index + " (x/y):" +
Math.round(hda[0].x) + "," +
Math.round(hda[0].y) + "\n";
ta.text += "Expenses:" + hda[0].item.expenses;
} else {
ta.text = "No data point found (x/y):" +
Math.round(e.currentTarget.mouseX) +
"/" + Math.round(e.currentTarget.mouseY);
}
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Plot Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="chart"
mouseMove="handleMouseMove(event)"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
mouseSensitivity="5"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries
xField="profit"
yField="expenses"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;/s:Panel&gt;
&lt;s:TextArea id="ta" width="300" height="50"/&gt;
&lt;/s:Application&gt;</pre>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c06_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c06_verapache"><!-- --></a><h5 class="sectiontitle">Using
the localToData() method</h5>
<p>The <samp class="codeph">localToData()</samp> method
takes a <a href="https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Point.html" target="_blank">Point</a> object
that represents the x and y coordinates you want to get the data
for and returns an Array of data values, regardless of whether any
data items are at or near that point. You call this method on the
series.</p>
<p>The following example creates a Point object from
the mouse pointer's location on the screen and displays the data
values associated with that point:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/LocalToData.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
public var p:Point;
private function updateDetails(e:MouseEvent):void {
p = new Point(myChart.mouseX, myChart.mouseY);
mpos.text = "(" + p.x + "," + p.y + ")";
var d:Array = series1.localToData(p);
var da:Date = new Date(d[0]);
// Round y coordinate value on column to two places.
var v:Number = int((d[1])*100)/100;
dval.text = "(" + daxis.formatForScreen(da) + ", " + v + ")";
p = series1.dataToLocal(d[0], d[1]);
dpos.text ="(" + Math.floor(p.x) + ", " + Math.floor(p.y) + ")";
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
mouseMove="updateDetails(event)"
showDataTips="true"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:DateTimeAxis id="daxis" dataUnits="days"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
xField="date"
yField="close"
displayName="Close"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;s:Form width="300"&gt;
&lt;s:FormItem label="Mouse Position:"&gt;
&lt;s:Label id="mpos"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Data Position:"&gt;
&lt;s:Label id="dpos"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Data:"&gt;
&lt;s:Label id="dval"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;/s:Application&gt;</pre>
<p>The chart type determines how
coordinates are mapped, and how many values are returned in the
Array. The values returned are typically numeric values.</p>
<p>In
a chart that is based on the <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/CartesianChart.html" target="_blank">CartesianChart</a> class
(for example, a <a href="https://flex.apache.org/asdoc/mx/charts/BarChart.html" target="_blank">BarChart</a> or <a href="https://flex.apache.org/asdoc/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> control),
the first item in the returned Array is the value of the <em>x</em>-coordinate
along the horizontal axis, and the second item is the value of the <em>y</em>-coordinate
along the vertical axis. </p>
<p>In a chart based on the <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/PolarChart.html" target="_blank">PolarChart</a> class
(such as <a href="https://flex.apache.org/asdoc/mx/charts/PieChart.html" target="_blank">PieChart</a>),
the returned Array maps the coordinates to a set of polar coordinates—an
angle around the center of the chart, and a distance from the center.
Those values are mapped to data values that use the first (angular)
and second (radial) axes of the chart.</p>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c05_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ffb_verapache__WS2db454920e96a9e51e63e3d11c0bf69084-7c05_verapache"><!-- --></a><h5 class="sectiontitle">Using
the dataToLocal() method</h5>
<p>The <samp class="codeph">dataToLocal()</samp> method
converts a set of values to x and y coordinates on the screen.
The values you give the method are in the "data space" of the chart; this
method converts these values to coordinates. The <em>data space</em> is
the collection of all possible combinations of data values that
a chart can represent.</p>
<p>The number and meaning of arguments
passed to the <samp class="codeph">dataToLocal()</samp> method depend on the
chart type. For <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/CartesianChart.html" target="_blank">CartesianChart</a> controls,
such as the <a href="https://flex.apache.org/asdoc/mx/charts/BarChart.html" target="_blank">BarChart</a> and <a href="https://flex.apache.org/asdoc/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> controls,
the first value is used to map along the x axis, and the second
value is used to map along the y axis. </p>
<p>For <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/PolarChart.html" target="_blank">PolarChart</a> controls,
such as the <a href="https://flex.apache.org/asdoc/mx/charts/PieChart.html" target="_blank">PieChart</a> control,
the first value maps to the angle around the center of the chart,
and the second value maps to the distance from the center of the
chart along the radius.</p>
<p>The coordinates returned are based
on 0,0 being the upper-left corner of the chart. For a ColumnChart
control, for example, the height of the column is inversely related
to the x coordinate that is returned.</p>
</div>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c11_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c11_verapache"><!-- --></a>
<h3 class="topictitle3">Changing mouse sensitivity</h3>
<div>
<p>You use the <samp class="codeph">mouseSensitivity</samp> property
of the chart control to determine when the mouse pointer is considered
to be over a data point; for example:</p>
<pre class="codeblock"> &lt;mx:ColumnChart id="chart" dataProvider="{dataSet}" mouseSensitivity="30"&gt;</pre>
<p>The current data point is the nearest data
point to the mouse pointer that is less than or equal to the number
of pixels that the <samp class="codeph">mouseSensitivity</samp> property specifies.
</p>
<p>The default value of the <samp class="codeph">mouseSensitivity</samp> property
is 3 pixels. If the mouse pointer is 4 or more pixels away from
a data point, Flex does not trigger a ChartItemEvent (of types such
as <samp class="codeph">itemRollOver</samp> or <samp class="codeph">itemClick</samp>).
Flex still responds to events such as <samp class="codeph">mouseOver</samp> and <samp class="codeph">click</samp> by
generating a ChartEvent object of type <samp class="codeph">chartClick</samp> or <samp class="codeph">chartDoubleClick</samp>.</p>
<p>The following example initially sets the <samp class="codeph">mouseSensitivity</samp> property
to 20, but lets the user change this value with the HSlider control: </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/MouseSensitivity.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Mouse Sensitivity"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
mouseSensitivity="{mySlider.value}"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries
xField="expenses"
yField="profit"
displayName="Plot 1"/&gt;
&lt;mx:PlotSeries
xField="amount"
yField="expenses"
displayName="Plot 2"/&gt;
&lt;mx:PlotSeries
xField="profit"
yField="amount"
displayName="Plot 3"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;s:HGroup&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="Mouse Sensitivity:"/&gt;
&lt;mx:HSlider id="mySlider"
minimum="0"
maximum="300"
value="20"
dataTipPlacement="top"
tickColor="black"
snapInterval="1"
tickInterval="20"
labels="['0','300']"
allowTrackClick="true"
liveDragging="true"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>You can use the <samp class="codeph">mouseSensitivity</samp> property to
increase the area that triggers <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/DataTip.html" target="_blank">DataTip</a> events
or emits chart-related events. If the mouse pointer is within the
range of multiple data points, Flex chooses the closest data point.
For DataTip events, if you have multiple DataTip controls enabled,
Flex displays all DataTip controls within range. For more information,
see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c04_verapache">Showing
multiple DataTip objects</a>. </p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff6_verapache"><!-- --></a>
<h3 class="topictitle3">Disabling interactivity</h3>
<div>
<p>You
can make the series in a chart ignore all mouse events by setting
the <samp class="codeph">interactive</samp> property to <samp class="codeph">false</samp> for
that series. The default value is <samp class="codeph">true</samp>. This lets
you disable mouse interactions for one series while allowing it
for another.</p>
<p>The following example disables interactivity for events on the
first and third <a href="https://flex.apache.org/asdoc/mx/charts/series/PlotSeries.html" target="_blank">PlotSeries</a> objects: </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/DisableInteractivity.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Disable Interactivity"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries
xField="expenses"
yField="profit"
displayName="Plot 1"
interactive="false"/&gt;
&lt;mx:PlotSeries
xField="amount"
yField="expenses"
displayName="Plot 2"/&gt;
&lt;mx:PlotSeries
xField="profit"
yField="amount"
displayName="Plot 3"
interactive="false"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>Disabling the series interactivity has the following results: </p>
<ul>
<li>
<p>The series does not show <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/DataTip.html" target="_blank">DataTip</a> controls.</p>
</li>
<li>
<p>The series does not generate a <samp class="codeph">hitData</samp> structure
on any chart data event.</p>
</li>
<li>
<p>The series does not return a <samp class="codeph">hitData</samp> structure
when you call the <samp class="codeph">findDataPoints()</samp> method on the
chart.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff5_verapache"><!-- --></a>
<h2 class="topictitle2">Using effects with charts</h2>
<div>
<p>Chart
controls support the standard Flex effects such as <a href="https://flex.apache.org/asdoc/mx/effects/Zoom.html" target="_blank">Zoom</a> and <a href="https://flex.apache.org/asdoc/mx/effects/Fade.html" target="_blank">Fade</a>. You can use
these effects to make the entire chart control zoom in or fade out
in your applications. In addition, chart data series support the
following effect classes that apply to the data in the chart:</p>
<ul>
<li>
<p>
<a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesInterpolate.html" target="_blank">SeriesInterpolate</a>
</p>
</li>
<li>
<p>
<a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesSlide.html" target="_blank">SeriesSlide</a>
</p>
</li>
<li>
<p>
<a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesZoom.html" target="_blank">SeriesZoom</a>
</p>
</li>
</ul>
<p>These effects zoom or slide the chart items inside the chart
control. These classes are in the mx.charts.effects.effects.* package.
The base class for chart effects is <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesEffect.html" target="_blank">SeriesEffect</a>. </p>
<p>All chart controls and series support the standard Flex triggers
and effects that are inherited from <a href="https://flex.apache.org/asdoc/mx/core/UIComponent.html" target="_blank">UIComponent</a>.
These triggers include <samp class="codeph">focusInEffect</samp>, <samp class="codeph">focusOutEffect</samp>, <samp class="codeph">moveEffect</samp>, <samp class="codeph">showEffect</samp>,
and <samp class="codeph">hideEffect</samp>. The charting controls also include
the <samp class="codeph">showDataEffect</samp> and <samp class="codeph">hideDataEffect</samp> triggers.</p>
<p>For information on creating complex effects, see <a href="flx_behaviors_be.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fec_verapache">Introduction
to effects</a>.</p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff4_verapache"><!-- --></a>
<h3 class="topictitle3">Using standard effect triggers</h3>
<div>
<p>Chart controls support standard effects triggers, such
as <samp class="codeph">showEffect</samp> and <samp class="codeph">hideEffect</samp>. </p>
<p>The following example defines a set of wipe effects that Flex
executes when the user toggles the chart's visibility by using the <a href="https://flex.apache.org/asdoc/mx/controls/Button.html" target="_blank">Button</a> control.
Also, Flex fades in the chart when it is created.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/StandardEffectTriggers.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;!-- Define the effects --&gt;
&lt;mx:Parallel id="showEffects"&gt;
&lt;mx:WipeRight duration="2000"/&gt;
&lt;mx:Fade alphaFrom="0" alphaTo="1" duration="4000"/&gt;
&lt;/mx:Parallel&gt;
&lt;mx:Parallel id="hideEffects"&gt;
&lt;mx:Fade alphaFrom="1" alphaTo="0" duration="2500"/&gt;
&lt;mx:WipeLeft duration="3000"/&gt;
&lt;/mx:Parallel&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Area Chart with Effects"&gt;
&lt;s:layout&gt;
&lt;s:HorizontalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:AreaChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
creationCompleteEffect="showEffects"
hideEffect="hideEffects"
showEffect="showEffects"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:AreaSeries yField="profit" displayName="Profit"/&gt;
&lt;mx:AreaSeries yField="expenses" displayName="Expenses"/&gt;
&lt;/mx:series&gt;
&lt;/mx:AreaChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;s:Button label="Toggle visibility"
click="myChart.visible=!myChart.visible"/&gt;
&lt;/s:Application&gt;</pre>
<p>A negative aspect of using standard effect triggers with charts
is that the effects are applied to the entire chart control, and
not just the data in the chart control. The result is that an effect
such as Fade causes the chart's axes, gridlines, labels, and other
chart elements, in addition to the chart's data, to fade in or out
during the effect. To solve this, you use special charting effect
triggers (see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c03_verapache">Using charting
effect triggers</a>).</p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c03_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c03_verapache"><!-- --></a>
<h3 class="topictitle3">Using charting effect triggers</h3>
<div>
<p>Charts have two unique effect triggers: <samp class="codeph">hideDataEffect</samp> and <samp class="codeph">showDataEffect</samp>.
You set these triggers on the data series for the chart. Whenever
the data for a chart changes, Flex executes these triggers in succession on
the chart's data. The chart control's other elements, such as gridlines,
axis lines, and labels are not affected by the effect. </p>
<p>The <samp class="codeph">hideDataEffect</samp> trigger defines the effect
that Flex uses as it hides the current data from view. The <samp class="codeph">showDataEffect</samp> trigger
defines the effect that Flex uses as it moves the current data into
its final position on the screen.</p>
<p>Because Flex triggers the effects associated with <samp class="codeph">hideDataEffect</samp> and <samp class="codeph">showDataEffect</samp> when
the data changes, there is "old" data and "new" data. The effect
associated with the <samp class="codeph">hideDataEffect</samp> trigger is the
"old" data that will be replaced by the new data.</p>
<p>The order of events is:</p>
<ol>
<li>
<p>Flex first uses the <samp class="codeph">hideDataEffect</samp> trigger
to invoke the effect set for each element of a chart that is about
to change. These triggers execute at the same time. </p>
</li>
<li>
<p>Flex then updates the chart with its new data. Any elements
(including the grid lines and axes) that do not have effects associated
with them are updated immediately with their new values.</p>
</li>
<li>
<p>Flex then invokes the effect set with the <samp class="codeph">showDataEffect</samp> trigger
for each element associated with them. Flex animates the new data
in the chart.</p>
</li>
</ol>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff2_verapache"><!-- --></a>
<h3 class="topictitle3">Charting effects with data series</h3>
<div>
<p>Three effects classes are unique to charting: <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesInterpolate.html" target="_blank">SeriesInterpolate</a>, <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesSlide.html" target="_blank">SeriesSlide</a>,
and <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesZoom.html" target="_blank">SeriesZoom</a>.
You use these effects on a data series to achieve an effect when
the data in that series changes. These effects can have a great
deal of visual impact. Data series do not support other Flex effects.</p>
<p>The following example shows the SeriesSlide effect making the
data slide in and out of a screen when the data changes. You can
trigger changes to data in a chart series in many ways. Most commonly,
you trigger an effect when the data provider changes for a chart
control. In the following example, when the user clicks the button,
the chart control's data provider changes, triggering the effect:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/BasicSeriesSlideEffect.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv_fred.send();srv_strk.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --&gt;
&lt;!-- View source of the following pages to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv_fred" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=FRED"/&gt;
&lt;mx:HTTPService id="srv_strk" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=STRK"/&gt;
&lt;!-- Define chart effects --&gt;
&lt;mx:SeriesSlide
id="slideIn"
duration="1000"
direction="up"/&gt;
&lt;mx:SeriesSlide
id="slideOut"
duration="1000"
direction="down"/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
public function changeProvider():void {
if (series1.displayName == "STRK") {
myChart.dataProvider = srv_fred.lastResult.data.result;
series1.displayName = "FRED";
lbl.text = "Ticker: " + series1.displayName;
} else {
myChart.dataProvider = srv_strk.lastResult.data.result;
series1.displayName = "STRK";
lbl.text = "Ticker: " + series1.displayName;
}
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart with Basic Series Slide Effect"
height="493"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Label id="lbl" text="Ticker: FRED"
width="233.5" height="44"
fontSize="24" color="#091D96"
top="5" right="10"/&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv_fred.lastResult.data.result}"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:DateTimeAxis dataUnits="days"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:verticalAxis&gt;
&lt;mx:LinearAxis minimum="0" maximum="100"/&gt;
&lt;/mx:verticalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
xField="date" yField="close"
displayName="FRED"
showDataEffect="slideIn"
hideDataEffect="slideOut"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}" bottom="0"/&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="changeProvider()" label="Toggle Ticker"/&gt;
&lt;/s:Application&gt;</pre>
<p>This example explicitly defines the minimum and maximum values
of the vertical axis. If not, Flex would recalculate these values
when the new data provider was applied. The result could be a change
in the axis labels during the effect.</p>
<p>Changing a data provider first triggers the <samp class="codeph">hideDataEffect</samp> effect
on the original data provider, which causes that data provider to
"slide out," and then triggers the <samp class="codeph">showDataEffect</samp> effect
on the new data provider, which causes that data provider to "slide
in." </p>
<div class="note"><span class="notetitle">Note:</span> If you set the data provider on the series and
not the chart control, you must change it on the series and not
the chart control.</div>
<p>Another trigger of data effects is when a new data point is added
to a series. The following example triggers the <samp class="codeph">showDataEffect</samp> when
the user clicks the button and adds a new item to the series' data
provider:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/AddItemEffect.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;!-- Define chart effect --&gt;
&lt;mx:SeriesSlide id="slideIn"
duration="1000"
direction="up"
/&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to
// the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart with Series Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries yField="item"
displayName="Quantity"
showDataEffect="slideIn"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
<p>This example casts the results of the HTTPService call to an
ArrayCollection, so that you can add new items with the <samp class="codeph">addItem()</samp> method.
The new items are not added to the data on the server, but just
in the local application's results ArrayCollection. For more information
about changing charting data at run time, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c02_verapache">Changing
chart data at run time</a>.</p>
<p>The charting effects have several properties in common that traditional
effects do not have. All of these properties are optional. The following
table lists the common properties of the charting effects:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e1220">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e1226">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1220 ">
<p>
<samp class="codeph">duration</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1226 ">
<p>The amount of time, in milliseconds, that
Flash Player takes to complete the entire effect. This property defines
the speed with which the effect executes.</p>
<p>The <samp class="codeph">duration</samp> property
acts as a minimum duration. The effect can take longer based on
the settings of other properties.</p>
<p>The default value is 500.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1220 ">
<p>
<samp class="codeph">elementOffset</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1226 ">
<p>The amount of time, in milliseconds, that
Flash Player delays the effect on each element in the series.</p>
<p>Set
the <samp class="codeph">elementOffset</samp> property to 0 to make all elements
start at the same time and end at the same time.</p>
<p>Set the <samp class="codeph">elementOffset</samp> property
to an integer such as 30 to stagger the effect on each element by that
amount of time. For example, with a slide effect, the first element
slides in immediately. The next element begins 30 milliseconds later,
and so on. The amount of time for the effect to execute is the same
for each element, but the overall duration of the effect is longer.</p>
<p>Set
the <samp class="codeph">elementOffset</samp> property to a negative value
to make the effect display the last element in the series first. </p>
<p>The
default value is 20.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1220 ">
<p>
<samp class="codeph">minimumElementDuration</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1226 ">
<p>The amount of time, in milliseconds, that
an individual element should take to complete the effect. </p>
<p>Charts
with a variable number of data points in the series cannot reliably
create smooth effects with only the <samp class="codeph">duration</samp> property. </p>
<p>For
example, an effect with a duration of 1000 and <samp class="codeph">elementOffset</samp> of
100 takes 900 milliseconds per element to complete if you have two
elements in the series. This is because the start of each effect
is offset by 100, and each effect finishes in 1000 milliseconds.
If there are four elements in the series, each element takes 700
milliseconds to complete (the last effect starts 300 milliseconds
after the first and must be completed within 1000 milliseconds).
With 10 elements, each element has only 100 milliseconds to complete
the effect.</p>
<p>The value of the <samp class="codeph">minimumElementDuration</samp> property
sets a minimal duration for each element. No element of the series
takes less than this amount of time (in milliseconds) to execute
the effect. As a result, it is possible for an effect to take longer
than a specified duration if you specify at least two of the following
three properties: <samp class="codeph">duration</samp>, <samp class="codeph">offset</samp>,
and <samp class="codeph">minimumElementDuration</samp>.</p>
<p>The default value
is 0, which means that the <samp class="codeph">duration</samp> property is
used to control the total length of time, in milliseconds, that
Flex takes to complete the effect.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1220 ">
<p>
<samp class="codeph">offset</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1226 ">
<p>The amount of time, in milliseconds, that
Flash Player delays the start of the effect. Use this property to
stagger effects on multiple series.</p>
<p>The default value is 0.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff1_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff1_verapache"><!-- --></a>
<h4 class="topictitle4">Using the SeriesSlide effect</h4>
<div>
<p>The <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesSlide.html" target="_blank">SeriesSlide</a> effect
slides a data series into and out of the chart's boundaries. The
SeriesSlide effect takes a <samp class="codeph">direction</samp> property that
defines the location from which the series slides. Valid values
of <samp class="codeph">direction</samp> are <samp class="codeph">left</samp>, <samp class="codeph">right</samp>, <samp class="codeph">up</samp>, or <samp class="codeph">down</samp>.</p>
<p>If you use the SeriesSlide effect with a <samp class="codeph">hideDataEffect</samp> trigger,
the series slides from the current position on the screen to a position
off the screen, in the direction indicated by the <samp class="codeph">direction</samp> property.
If you use SeriesSlide with a <samp class="codeph">showDataEffect</samp> trigger,
the series slides from off the screen to a position on the screen,
in the indicated direction.</p>
<p>When you use the SeriesSlide effect, the entire data series disappears
from the chart when the effect begins. The data then reappears based
on the nature of the effect. To keep the data on the screen at all
times during the effect, you can use the SeriesInterpolate effect.
For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c01_verapache">Using
the SeriesInterpolate effect</a>.</p>
<p>The following example creates an effect called <samp class="codeph">slideDown</samp>.
Each element starts its slide 30 milliseconds after the element
before it, and takes at least 20 milliseconds to complete its slide.
The entire effect takes at least 1 second (1000 milliseconds) to
slide the data series down. Flex invokes the effect when it clears
old data from the chart and when new data appears. </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/CustomSeriesSlideEffect.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;!-- Define chart effect --&gt;
&lt;mx:SeriesSlide duration="1000"
direction="down"
minimumElementDuration="20"
elementOffset="30"
id="slideDown"
/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to the data provider
var n:Number = Math.random() * 3000;
var o:Object = {item:n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart with Custom Series Slide Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
yField="item"
displayName="Quantity"
showDataEffect="slideDown"
hideDataEffect="slideDown"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7ff0_verapache"><!-- --></a>
<h4 class="topictitle4">Using the SeriesZoom effect</h4>
<div>
<p>The <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesZoom.html" target="_blank">SeriesZoom</a> effect
implodes and explodes chart data into and out of the focal point
that you specify. As with the <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesSlide.html" target="_blank">SeriesSlide</a> effect,
whether the effect is zooming to or from this point depends on whether
it's used with a <samp class="codeph">showDataEffect</samp> or <samp class="codeph">hideDataEffect</samp> trigger.</p>
<p>The SeriesZoom effect can take several properties that define
how the effect acts. The following table describes these properties:</p>
<div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all">
<thead align="left">
<tr>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e1496">
<p>Property</p>
</th>
<th class="cellrowborder" valign="top" width="NaN%" id="d83579e1502">
<p>Description</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1496 ">
<p>
<samp class="codeph">horizontalFocus</samp>
</p>
<p>
<samp class="codeph">verticalFocus</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1502 ">
<p>Defines the location of the focal point
of the zoom.</p>
<p>You combine the <samp class="codeph">horizontalFocus</samp> and <samp class="codeph">verticalFocus</samp> properties
to define the point from which the data series zooms in and out.
For example, set the <samp class="codeph">horizontalFocus</samp> property to <samp class="codeph">left</samp> and
the <samp class="codeph">verticalFocus</samp> property to <samp class="codeph">top</samp> to
have the series data zoom to and from the upper-left corner of either
element or the chart (depending on the setting of the <samp class="codeph">relativeTo</samp> property).</p>
<p>Valid
values of the <samp class="codeph">horizontalFocus</samp> property are <samp class="codeph">left</samp>, <samp class="codeph">center</samp>, <samp class="codeph">right</samp>,
and <samp class="codeph">undefined</samp>.</p>
<p>Valid values of the <samp class="codeph">verticalFocus</samp> property
are <samp class="codeph">top</samp>, <samp class="codeph">center</samp>, <samp class="codeph">bottom</samp>,
and <samp class="codeph">undefined</samp>. </p>
<p>If you specify only one of
these two properties, the focus is a horizontal or vertical line
rather than a point. For example, when you set the <samp class="codeph">horizontalFocus</samp> property
to <samp class="codeph">left</samp>, the element zooms to and from a vertical
line along the left edge of its bounding box. Setting the <samp class="codeph">verticalFocus</samp> property
to <samp class="codeph">center</samp> causes the element to zoom to and from
a horizontal line along the middle of its bounding box.</p>
<p>The
default value for both properties is <samp class="codeph">center</samp>.</p>
</td>
</tr>
<tr>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1496 ">
<p>
<samp class="codeph">relativeTo</samp>
</p>
</td>
<td class="cellrowborder" valign="top" width="NaN%" headers="d83579e1502 ">
<p>Controls the bounding box used to calculate
the focal point of the zooms. Valid values for <samp class="codeph">relativeTo</samp> are <samp class="codeph">series</samp> and <samp class="codeph">chart</samp>. </p>
<p>Set
the <samp class="codeph">relativeTo</samp> property to <samp class="codeph">series</samp> to
zoom each element relative to itself. For example, each column of
a ColumnChart zooms from the upper-left of the column.</p>
<p>Set
the <samp class="codeph">relativeTo</samp> property to <samp class="codeph">chart</samp> to
zoom each element relative to the chart area. For example, each
column zooms from the upper-left of the axes, the center of the
axes, and so on.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>The following example zooms in the data series from the upper-right
corner of the chart. While zooming in, Flex displays the last element
in the series first because the <samp class="codeph">elementOffset</samp> value
is negative. </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/SeriesZoomEffect.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;!-- Define chart effects --&gt;
&lt;mx:SeriesZoom id="zoomOut"
duration="2000"
minimumElementDuration="50"
elementOffset="50"
verticalFocus="top"
horizontalFocus="left"
relativeTo="chart"/&gt;
&lt;mx:SeriesZoom id="zoomIn"
duration="2000"
minimumElementDuration="50"
elementOffset="-50"
verticalFocus="top"
horizontalFocus="right"
relativeTo="chart"/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart with Series Zoom Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
yField="item"
displayName="Quantity"
showDataEffect="zoomIn"
hideDataEffect="zoomOut"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
<p>When you use the SeriesZoom effect, the entire data series disappears
from the chart when the effect begins. The data then reappears based
on the nature of the effect. To have the data stay on the screen
at all times during the effect, you can use the SeriesInterpolate
effect. For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c01_verapache">Using
the SeriesInterpolate effect</a>.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c01_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c01_verapache"><!-- --></a>
<h4 class="topictitle4">Using the SeriesInterpolate effect</h4>
<div>
<p>The <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesInterpolate.html" target="_blank">SeriesInterpolate</a> effect
moves the graphics that represent the existing data in the series
to the new points. Instead of clearing the chart and then repopulating
it as with <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesZoom.html" target="_blank">SeriesZoom</a> and <a href="https://flex.apache.org/asdoc/mx/charts/effects/SeriesSlide.html" target="_blank">SeriesSlide</a>,
this effect keeps the data on the screen at all times.</p>
<p>You use the SeriesInterpolate effect only with the <samp class="codeph">showDataEffect</samp> effect trigger.
It has no effect if set with a <samp class="codeph">hideDataEffect</samp> trigger.</p>
<p>The following example sets the <samp class="codeph">elementOffset</samp> property
of the SeriesInterpolate effect to 0. As a result, all elements
move to their new locations without disappearing from the screen.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/SeriesInterpolateEffect.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;!-- Define chart effect. --&gt;
&lt;mx:SeriesInterpolate id="rearrangeData"
duration="1000"
minimumElementDuration="200"
elementOffset="0"
/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart with Series Interpolate Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
yField="item"
displayName="Quantity"
showDataEffect="rearrangeData"
/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fee_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fee_verapache"><!-- --></a>
<h3 class="topictitle3">Applying chart series effects with
ActionScript</h3>
<div>
<p>You can define effects and apply them to chart series by
using ActionScript. One way to apply an effect is the same as the
way you apply style properties. You use the <samp class="codeph">setStyle()</samp> method
and Cascading Style Sheets (CSS) to apply the effect. </p>
<p>For more information on using styles, see <a href="flx_styles_st.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fee_verapache">Styles
and themes</a>.</p>
<p>The following example defines the <samp class="codeph">slideIn</samp> effect
that plays every time the user adds a data item to the chart control's
ColumnSeries. The effect is applied to the series by using the <samp class="codeph">setStyle()</samp> method
when the application first loads.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/ApplyEffectsAsStyles.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initApp();srv.send();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.effects.SeriesInterpolate;
[Bindable]
public var items:ArrayCollection;
public var rearrangeData:SeriesInterpolate;
public function initApp():void {
rearrangeData = new SeriesInterpolate();
rearrangeData.duration = 1000;
rearrangeData.minimumElementDuration = 200;
rearrangeData.elementOffset = 0;
// Apply the effect as a style.
mySeries.setStyle("showDataEffect", rearrangeData);
}
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart with Series Interpolate Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="mySeries"
yField="item" displayName="Quantity"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
<p>When you define an effect in ActionScript, you must import the
appropriate classes. If you define an effect by using MXML, the
compiler imports the class for you.</p>
<p>Instead of applying effects with the <samp class="codeph">setStyle()</samp> method,
you can apply them with CSS if you predefine them in your MXML application;
for example:</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/ApplyEffectsWithCSS.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;!-- Define chart effect. --&gt;
&lt;mx:SeriesSlide
duration="1000"
direction="down"
minimumElementDuration="20"
elementOffset="30"
id="slideDown"/&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Style&gt;
@namespace mx "library://ns.adobe.com/flex/mx";
mx|ColumnSeries {
showDataEffect:slideDown;
hideDataEffect:slideDown;
}
&lt;/fx:Style&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item:n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart with Custom Series Slide Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries yField="item" displayName="Quantity"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;/s:Application&gt;</pre>
<p>You can use controls such as a slider to let the user adjust
the effect's properties. To bind the properties of an ActionScript
object, such as an effect, to a control, you use methods of the <a href="https://flex.apache.org/asdoc/mx/binding/utils/BindingUtils.html" target="_blank">BindingUtils</a> class,
as the following example shows: </p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/ApplyEffectsWithActionScriptSlider.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initApp();srv.send();"
height="750"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/widgets.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.effects.SeriesInterpolate;
import mx.binding.utils.BindingUtils;
public var rearrangeData:SeriesInterpolate;
[Bindable]
public var items:ArrayCollection;
public function initApp():void {
rearrangeData = new SeriesInterpolate();
// Bind effect properties to slider controls
BindingUtils.bindProperty(rearrangeData, "duration", durationSlider, "value");
BindingUtils.bindProperty(rearrangeData, "minimumElementDuration",
minimumElementDurationSlider, "value");
BindingUtils.bindProperty(rearrangeData, "elementOffset",
elementOffsetSlider, "value");
}
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
public function resetSliders():void {
durationSlider.value = 1000;
minimumElementDurationSlider.value = 200;
elementOffsetSlider.value = 0;
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart with Series Interpolate Effect"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart" dataProvider="{items}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="mySeries"
yField="item" displayName="Quantity"
showDataEffect="rearrangeData"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b1" click="addDataItem()" label="Add Data Item"/&gt;
&lt;s:Panel title="Effects"&gt;
&lt;s:Form&gt;
&lt;s:FormItem label="Duration"&gt;
&lt;mx:HSlider id="durationSlider"
minimum="1"
maximum="10000"
value="1000"
dataTipPlacement="top"
tickColor="black"
snapInterval="500"
tickInterval="500"
labels="['0','10000']"
allowTrackClick="true"
liveDragging="true"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Minimum Element Duration"&gt;
&lt;mx:HSlider id="minimumElementDurationSlider"
minimum="0"
maximum="1000"
value="200"
dataTipPlacement="top"
tickColor="black"
snapInterval="50"
tickInterval="50"
labels="['0','1000']"
allowTrackClick="true"
liveDragging="true"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Element Offset"&gt;
&lt;mx:HSlider id="elementOffsetSlider"
minimum="0"
maximum="1000"
value="0"
dataTipPlacement="top"
tickColor="black"
snapInterval="50"
tickInterval="50"
labels="['0','1000']"
allowTrackClick="true"
liveDragging="true"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;/s:Panel&gt;
&lt;s:Button id="b2" label="Reset Sliders" click="resetSliders()"/&gt;
&lt;/s:Application&gt;</pre>
<p>For more information about databinding in ActionScript, see <a href="flx_databinding_db.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc9_verapache">Defining
data bindings in ActionScript</a>.</p>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fed_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fed_verapache"><!-- --></a>
<h2 class="topictitle2">Drilling down into data</h2>
<div>
<p>One common use of charts is to allow the user to drill
down into the data. This usually occurs when the user performs some
sort of event on the chart such as clicking on a wedge in a PieChart
control or clicking on a column in a ColumnChart control. Clicking
on a data item reveals a new chart that describes the make-up of
that data item. </p>
<p>For example, you might have a ColumnChart control that shows
the month-by-month production of widgets. To initially populate
this chart, you might make a database call (through a service or
some other adapter). If the user then clicks on the January column,
the application could display the number of widgets of each color
that were produced that month. To get the individual month's widget
data, you typically make another database call and pass a parameter
to the listening service that describes the specific data you want.
You can then use the resulting data provider to render the new view.</p>
<p>Typically, when you drill down into chart data, you create new
charts in your application with ActionScript. When creating new
charts in ActionScript, you must be sure to create a series, add
it to the new chart's series Array, and then call the <samp class="codeph">addElement()</samp> method
(on Spark containers) or <samp class="codeph">addChild()</samp> method (on
MX containers) to add the new chart to the display list. For more
information, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bff_verapache">Creating
charts in ActionScript</a>.</p>
<p>One way to provide drill-down functionality is to make calls
that are external to the application to get the drill-down data.
You typically do this by using the chart's <samp class="codeph">itemClick</samp> event
listener, which gives you access to the HitData object. The <a href="https://flex.apache.org/asdoc/mx/charts/HitData.html" target="_blank">HitData</a> object
lets you examine what data was underneath the mouse when the event
was triggered. This capability lets you perform actions on specific
chart data. For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c10_verapache">Using
the HitData object</a>.</p>
<p>You can also use a simple Event object to get a reference to
the series that was clicked. The following example shows the net
worth of a fictional person. When you click on a column in the initial
view, the example drills down into a second view that shows the
change in value of a particular asset class over time.</p>
<p>The following example uses the Event object to get a reference
to the clicked ColumnSeries. It then drills down into the single
ColumnSeries by replacing the chart's series Array with the single
ColumnSeries in the chart. When you click a column again, the chart
returns to its original configuration with all ColumnSeries.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/SimpleDrillDown.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initApp();srv.send();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/networth-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/networth.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
public var initSeriesArray:Array = new Array();
public var level:Number = 1;
public var newSeries:Array;
private function initApp():void {
// Get initial series Array -- to be reloaded when it returns
// from a drill down.
initSeriesArray = chart.series;
}
private function zoomIntoSeries(e:Event):void {
newSeries = new Array();
if (level == 1) {
newSeries.push(e.currentTarget);
level = 2;
} else {
newSeries = initSeriesArray;
p1.title = "Net Worth";
level = 1;
}
chart.series = newSeries;
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Net Worth"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="chart"
dataProvider="{srv.lastResult.data.result}"
type="stacked"
showDataTips="true"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="s1"
displayName="Cash"
yField="cash"
xField="date"
click="zoomIntoSeries(event)"/&gt;
&lt;mx:ColumnSeries id="s2"
displayName="Stocks"
yField="stocks"
xField="date"
click="zoomIntoSeries(event)"/&gt;
&lt;mx:ColumnSeries id="s3"
displayName="Retirement"
yField="retirement"
xField="date"
click="zoomIntoSeries(event)"/&gt;
&lt;mx:ColumnSeries id="s4"
displayName="Home"
yField="home"
xField="date"
click="zoomIntoSeries(event)"/&gt;
&lt;mx:ColumnSeries id="s5"
displayName="Other"
yField="other"
xField="date"
click="zoomIntoSeries(event)"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis &gt;
&lt;mx:DateTimeAxis title="Date" dataUnits="months"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{chart}"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>Another approach to drilling down into chart data is to use unused
data within the existing data provider. You can do this by changing
the properties of the series and axes when the chart is clicked.</p>
<p>The following example is similar to the previous example in that
it drills down into the assets of a fictional person's net worth.
In this case, though, it shows the value of the asset classes for
the clicked-on month in the drill-down view rather than the change
over time of a particular asset class.</p>
<p>This example uses the HitData object's <samp class="codeph">item</samp> property
to access the values of the current data provider. By building an
Array of objects with the newly-discovered data, the chart is able
to drill down into the series without making calls to any external
services. </p>
<p>Drilling down into data is an ideal time to use effects such
as SeriesSlide. This example also defines <samp class="codeph">seriesIn</samp> and <samp class="codeph">seriesOut</samp> effects
to slide the columns in and out when the drilling down (and the
return from drilling down) occurs.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/DrillDownWithEffects.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/networth-xml.aspx" result="resultHandler()"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/networth.aspx --&gt;
&lt;mx:SeriesSlide id="slideIn" duration="1000" direction="down"/&gt;
&lt;mx:SeriesSlide id="slideOut" duration="1000" direction="up"/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
[Bindable]
public var drillDownDataSet:ArrayCollection;
[Bindable]
public var dp:ArrayCollection;
// level is a temporary variable used to determine when to drill down.
private var level:int = 1;
private function resultHandler():void {
dp = ArrayCollection(srv.lastResult.data.result);
}
private function zoomIntoSeries(e:ChartItemEvent):void {
if (level == 1) {
drillDownDataSet = new ArrayCollection(genData(e));
cs1.displayName = "Assets";
cs1.yField = "amount";
cs1.xField = "type";
ca1.categoryField = "type";
p1.title = "Asset breakdown for " + e.hitData.item.date;
dp = drillDownDataSet;
// Remove the Legend. It is not needed in this view because
// each asset class is its own column in the drill down.
p1.removeElement(myLegend);
level = 2;
} else {
cs1.displayName = "All Assets";
cs1.yField = "assets";
cs1.xField = "date";
ca1.categoryField = "date";
p1.title = "Net Worth";
// Add the Legend back to the Panel.
p1.addElement(myLegend);
// Reset chart to original data provider.
resultHandler();
level = 1;
}
}
// Build an ArrayCollection of objects to make up the new data set.
private function genData(e:ChartItemEvent):Array {
var result:Array = [];
trace("Cash: " + e.hitData.item.cash);
trace("Stocks: " + e.hitData.item.stocks);
trace("Retirement: " + e.hitData.item.retirement);
trace("Home: " + e.hitData.item.home);
trace("Other: " + e.hitData.item.other);
var o1:Object = {
type:"cash",
amount:e.hitData.item.cash
};
var o2:Object = {
type:"stocks",
amount:e.hitData.item.stocks
};
var o3:Object = {
type:"retirement",
amount:e.hitData.item.retirement
};
var o4:Object = {
type:"home",
amount:e.hitData.item.home
};
var o5:Object = {
type:"other",
amount:e.hitData.item.other
};
trace(o1.type + ":" + o1.amount);
result.push(o1);
result.push(o2);
result.push(o3);
result.push(o4);
result.push(o5);
return result;
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Net Worth"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="chart"
showDataTips="true"
itemClick="zoomIntoSeries(event)"
dataProvider="{dp}"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="cs1"
displayName="All Assets"
yField="assets"
xField="date"
hideDataEffect="slideOut"
showDataEffect="slideIn"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis id="ca1" categoryField="date"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend id="myLegend" dataProvider="{chart}"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>Another way to drill down into chart data is to use the selection
API. You can select a subset of data points on a chart to create
a new data provider. For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bfd_verapache">Selecting
chart items</a>.</p>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7bfd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bfd_verapache"><!-- --></a>
<h2 class="topictitle2">Selecting chart items</h2>
<div>
<p>As part of interacting with charts, you can select data
points (ChartItem objects), examine the underlying data, and then
perform actions on those objects. A <a href="https://flex.apache.org/asdoc/mx/charts/ChartItem.html" target="_blank">ChartItem</a> class
represents a single entry in the chart series' data provider. A series
is made up of an Array of ChartItem objects.</p>
<p>To enable data point selection, you set the value of the <samp class="codeph">selectionMode</samp> property
on the chart. Possible values of this property are <samp class="codeph">none</samp>, <samp class="codeph">single</samp>,
and <samp class="codeph">multiple</samp>. Setting the <samp class="codeph">selectionMode</samp> property
to <samp class="codeph">none</samp> prevents any data points in the chart from
being selected. Setting <samp class="codeph">selectionMode</samp> to <samp class="codeph">single</samp> lets
you select one data point at a time. Setting <samp class="codeph">selectionMode</samp> to <samp class="codeph">multiple</samp> lets
you select one or more data points at a time. The default value
is <samp class="codeph">none</samp>.</p>
<p>You also toggle the series' selectability by setting the value
of the <samp class="codeph">selectable</samp> property. As a result, while
you might set the <samp class="codeph">selectionMode</samp> on the chart to <samp class="codeph">multiple</samp>,
you can make the data points in some series selectable and others not
selectable within the same chart by using the series' <samp class="codeph">selectable</samp> property.</p>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7feb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7feb_verapache"><!-- --></a>
<h3 class="topictitle3">Methods of chart item selection</h3>
<div>
<p>You can programmatically select data points or the user
can interactively select data points in the following ways:</p>
<ul>
<li>
<p>Mouse selection—Move the mouse pointer over a data point
and click the left mouse button to select data points. For more
information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bfc_verapache">Keyboard
and mouse selection</a>.</p>
</li>
<li>
<p>Keyboard selection—Use the keyboard to select one or more
data points, as described in <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bfc_verapache">Keyboard
and mouse selection</a>.</p>
</li>
<li>
<p>Region selection—Draw a rectangle on the chart. This rectangle
defines the range, and selects all data points within that range.
For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c0f_verapache">Region
selection</a>.</p>
</li>
<li>
<p>Programmatic selection—Programmatically select one or more
data points using the chart selection API. For more information,
see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c0e_verapache">Programmatic selection</a>.</p>
</li>
</ul>
<p>When selecting chart items, you should also understand the following
terms:</p>
<ul>
<li>
<p>
<em>caret</em>—The current chart item that could be selected
or deselected if you press the space bar. If you select multiple
items, one at a time, the caret is the last item selected. If you
selected multiple items by using a range, the caret is the last
item in the last series in the selection. This is not always the
item that was selected last.</p>
</li>
<li>
<p>
<em>anchor</em>—The starting chart item for a multiple selection
operation.</p>
</li>
</ul>
<p>The following example creates three different types of charts.
You can select one or more data points in each chart using the mouse,
keyboard, and region selection techniques. The example displays
the data points in each series that are currently selected.</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/SimpleSelection.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv_budget.send();srv_medals.send();srv_expenses.send()"
height="950" width="750"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following pages to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv_medals" url="http://examplesserver/chart_examples/medals-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/medals.aspx --&gt;
&lt;mx:HTTPService id="srv_budget" url="http://examplesserver/chart_examples/budget-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/budget.aspx --&gt;
&lt;mx:HTTPService id="srv_expenses" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
private function handleChange(event:Event, ta:spark.components.TextArea):void {
var allSeries:Array = event.currentTarget.series;
ta.text = "";
for (var i:int=0; i&lt;allSeries.length; i++) {
ta.text += "\n" + allSeries[i].id +
" Selected Items: " + allSeries[i].selectedIndices;
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Bar Chart" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:HorizontalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:VGroup&gt;
&lt;mx:BarChart id="myBarChart"
height="225"
showDataTips="true"
dataProvider="{srv_medals.lastResult.data.result}"
selectionMode="multiple"
change="handleChange(event, textArea1)"&gt;
&lt;mx:verticalAxis&gt;
&lt;mx:CategoryAxis categoryField="country"/&gt;
&lt;/mx:verticalAxis&gt;
&lt;mx:series&gt;
&lt;mx:BarSeries id="barSeries1"
yField="country"
xField="gold"
displayName="Gold"
selectable="true"/&gt;
&lt;mx:BarSeries id="barSeries2"
yField="country"
xField="silver"
displayName="Silver"
selectable="true"/&gt;
&lt;mx:BarSeries id="barSeries3"
yField="country"
xField="bronze"
displayName="Bronze"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:BarChart&gt;
&lt;mx:Legend dataProvider="{myBarChart}" direction="horizontal"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup width="250" height="200"&gt;
&lt;s:Label text="Click a chart's item to select it."/&gt;
&lt;s:Label text="Click and drag to select multiple items."/&gt;
&lt;s:Label text="Selection Changed Event:"/&gt;
&lt;s:TextArea id="textArea1" height="100" width="213"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:Panel&gt;
&lt;s:Panel title="Pie Chart" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:HorizontalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:VGroup&gt;
&lt;mx:PieChart id="myPieChart"
height="225"
dataProvider="{srv_budget.lastResult.data.result}"
showDataTips="true"
selectionMode="multiple"
change="handleChange(event, textArea2)"&gt;
&lt;mx:series&gt;
&lt;mx:PieSeries id="pieSeries1"
field="amount"
nameField="item"
labelPosition="callout"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PieChart&gt;
&lt;mx:Legend dataProvider="{myPieChart}" direction="horizontal"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup width="250" height="200"&gt;
&lt;s:Label text="Click a chart's item to select it."/&gt;
&lt;s:Label text="Click and drag to select multiple items."/&gt;
&lt;s:Label text="Selection Changed Event:"/&gt;
&lt;s:TextArea id="textArea2" height="100" width="213"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:Panel&gt;
&lt;s:Panel title="Plot Chart" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:HorizontalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:VGroup&gt;
&lt;mx:PlotChart id="myPlotChart"
height="225"
showDataTips="true"
dataProvider="{srv_expenses.lastResult.data.result}"
selectionMode="multiple"
change="handleChange(event, textArea3)"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries id="plotSeries1"
xField="expenses"
yField="profit"
displayName="Expenses/Profit"
selectable="true"/&gt;
&lt;mx:PlotSeries id="plotSeries2"
xField="amount"
yField="expenses"
displayName="Amount/Expenses"
selectable="true"/&gt;
&lt;mx:PlotSeries id="plotSeries3"
xField="profit"
yField="amount"
displayName="Profit/Amount"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;mx:Legend dataProvider="{myPlotChart}" direction="horizontal"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup width="250" height="200"&gt;
&lt;s:Label text="Click a chart's item to select it."/&gt;
&lt;s:Label text="Click and drag to select multiple items."/&gt;
&lt;s:Label text="Selection Changed Event:" /&gt;
&lt;s:TextArea id="textArea3" height="100" width="213"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>You can specify the colors that are used to indicate if an item
is selected, disabled, or being rolled over. You do this by using
the <samp class="codeph">itemSelectionColor</samp>, <samp class="codeph">itemDisabledColor</samp>,
and <samp class="codeph">itemRollOverColor</samp> style properties of the chart
controls. The following example specifies different colors for these
states for several chart types:</p>
<pre class="codeblock"> BarChart, PieChart, PlotChart {
  itemSelectionColor: red;
  itemDisabledColor: green;
  itemRollOverColor: blue;
 }</pre>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c0f_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c0f_verapache"><!-- --></a>
<h4 class="topictitle4">Region selection</h4>
<div>
<p>Users can select all data points in an area on a chart
by drawing a rectangle (the <em>region</em>) on the chart. Users define
a rectangular region by clicking and holding the mouse button while
they move the mouse, drawing a rectangle on the chart. On the <samp class="codeph">MOUSE_UP</samp> event,
the items inside the rectangular region are selected. The starting
point for a rectangular range must be over the chart. You cannot start
the rectangle outside of the chart control's bounds.</p>
<p>To select data points with region selection, the value of the
chart's <samp class="codeph">selectionMode</samp> property must be <samp class="codeph">multiple</samp>.
If it is <samp class="codeph">single</samp> or <samp class="codeph">none</samp>, then you
cannot draw the selection rectangle on the chart.</p>
<p>For most charts, as long as any point inside the rectangle touches
a data point (for example, a column in a ColumnChart control), you
select that data point. For BubbleChart and PieChart controls, an
item is selected only if its center is inside the selection rectangle.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7bfc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bfc_verapache"><!-- --></a>
<h4 class="topictitle4">Keyboard and mouse selection</h4>
<div>
<p>To select chart items, you can use the arrow keys, space
bar, and enter key on your keyboard or the mouse pointer. If you
want to select more than data point, the value of the chart's <samp class="codeph">selectionMode</samp> property
must be <samp class="codeph">multiple</samp>.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe8_verapache"><!-- --></a>
<h4 class="topictitle4">Left and right arrow keys</h4>
<div>
<p>You use the left and right arrows to move up and down the
data in the series. </p>
<p>Click the left arrow to select the previous item and the right
arrow to select the next item in the series. When you reach the
last item in a series, you move to the first item in the next series.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe7_verapache"><!-- --></a>
<h4 class="topictitle4">Up and down arrow keys</h4>
<div>
<p>Click the up and down arrow keys to move to the next or
previous series on the chart. </p>
<p>Click the up arrow key to select the next series in the chart's
series array. Click the down arrow key to select the previous series. </p>
<p>The index of the item in each series remains the same. If there
is only one series in the chart, then click the up arrow key to
select the first data point in the series; click the down arrow
key to select the last data point in the series.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe6_verapache"><!-- --></a>
<h4 class="topictitle4">Shift and control keys</h4>
<div>
<p>You can use the shift and control keys in conjunction with
the other keys to select or deselect data points and change the
caret in the selection.</p>
<p>Hold the shift key down while clicking the right arrow key to
add the next data point to the selection until you reach the end
of the series. Click the left arrow key to remove the last data
point from the selection. </p>
<p>Hold the shift key down while clicking the up arrow key to select
the first item in the next series. Click the down arrow key to select
the last item in the previous series.</p>
<p>Hold the control key down while using the arrow keys to move
the caret while not deselecting the anchor item. You can then select
the new caret by pressing the space bar.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe5_verapache"><!-- --></a>
<h4 class="topictitle4">Space bar</h4>
<div>
<p>Click the space bar to toggle the selection of the caret
item, if the control key is depressed. A deselected caret item appears
highlighted, but the highlight color is not the same as the selected
item color.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe4_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe4_verapache"><!-- --></a>
<h4 class="topictitle4">Page Up/Home and Page Down/End
keys</h4>
<div>
<p>Click the Page Up/Home and Page Down/End keys to move to
the first and last items in the current series, respectively. Moving
to an item makes that item the caret item, but does not select it.
You can press the space bar to select it.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe3_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe3_verapache"><!-- --></a>
<h4 class="topictitle4">Mouse pointer</h4>
<div>
<p>The default behavior of the mouse pointer is to select
the data point under the mouse pointer when you click the mouse
button. This also de-selects all other data points. </p>
<p>If you click the mouse button and drag it over a chart, you create
a rectangular region that defines a selection range. All data points
inside that range are selected if the <samp class="codeph">selectionMode</samp> property
is set to <samp class="codeph">multiple</samp>.</p>
<p>If you select a data point, then hold the shift key down and
click on another data point, you select the first point, the target
point, and all points that appear inside the rectangular range that
you just created. If you select a data point, then hold the control
key down and click another data point, you select both data points, but
not the data points in between. You can add more individual data
points by continuing to hold the control key down while you select
another data point.</p>
<p>If you click anywhere on the chart that does not have a data
point without any keys held down, then you clear the selection.
Clicking outside of the chart control's boundary does not clear
the selection.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c0e_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c0e_verapache"><!-- --></a>
<h4 class="topictitle4">Programmatic selection</h4>
<div>
<p>You can use the chart selection APIs to programmatically
select one or more data points in a chart control. These APIs consist
of methods and properties of the ChartBase, ChartItem, and chart
series objects.</p>
<p>Selections with multiple items include a caret and an anchor.
You can access these items by using the <samp class="codeph">caretItem</samp> and <samp class="codeph">anchorItem</samp> properties
of the chart control.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7bf9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bf9_verapache"><!-- --></a>
<h4 class="topictitle4">Properties of the series</h4>
<div>
<p>The series defines which ChartItem objects are selected.
You can programmatically select items by setting the values of the
following properties of the series:</p>
<ul>
<li>
<p>
<samp class="codeph">selectedItem</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">selectedItems</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">selectedIndex</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">selectedIndices</samp>
</p>
</li>
</ul>
<p>The index properties refer to the index of the chart item in
the series. This index is the same as the index in the data provider,
assuming you did not sort or limit the series items.</p>
<p>Programmatically setting the values of these properties does
not trigger a <samp class="codeph">change</samp> event.</p>
<p>The following example increments and decrements the series' <samp class="codeph">selectedIndex</samp> property
to select each item, one after the other, in the series:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/SimplerCycle.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();initApp();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.series.items.ColumnSeriesItem;
private function initApp():void {
// Select the first item on start up.
series1.selectedIndex = 0;
}
private function getNext(e:Event):void {
series1.selectedIndex += 1;
}
private function getPrev(e:Event):void {
series1.selectedIndex -= 1;
}
private function getFirst(e:Event):void {
series1.selectedIndex = 0;
}
private function getLast(e:Event):void {
series1.selectedIndex = series1.items.length - 1;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel height="100%" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
height="207" width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="single"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="expenses"
displayName="Expenses"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;s:HGroup&gt;
&lt;s:Label id="label0" text="Value: "/&gt;
&lt;s:Label id="label1"/&gt;
&lt;/s:HGroup&gt;
&lt;mx:Legend dataProvider="{myChart}" width="200"/&gt;
&lt;s:HGroup&gt;
&lt;s:Button label="|&amp;lt;" click="getFirst(event);" /&gt;
&lt;s:Button label="&amp;lt;" click="getPrev(event);" /&gt;
&lt;s:Button label="&amp;gt;" click="getNext(event);" /&gt;
&lt;s:Button label="&amp;gt;|" click="getLast(event);" /&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>To cycle through ChartItem objects in a series, you can use methods
such as <samp class="codeph">getNextItem()</samp> and <samp class="codeph">getPreviousItem()</samp>.
For more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bfa_verapache">Methods
and properties of the ChartBase class</a>.</p>
<p>The <samp class="codeph">selectedIndices</samp> property lets you select
any number of ChartItems in a chart control. The following example
uses the <samp class="codeph">selectedIndices</samp> property to select all
items in all series when the user presses the Ctrl+a keys on the keyboard:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/SelectAllItems.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();initApp();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.events.KeyboardEvent;
import mx.charts.events.ChartItemEvent;
import mx.core.FlexGlobals;
private function initApp():void {
FlexGlobals.topLevelApplication.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
}
private function keyHandler(event:KeyboardEvent):void {
var ctrlPressed:Boolean = event.ctrlKey;
// If the user presses Ctrl + A, select all chart items.
if (ctrlPressed) {
var curKeyCode:int = event.keyCode;
if (curKeyCode == 65) { // 65 is the keycode value for 'a'
selectItems();
}
}
}
private function selectItems():void {
// Create an array of all the chart's series.
var allSeries:Array = myChart.series;
// Iterate over each series.
for (var i:int=0; i&lt;allSeries.length; i++) {
var selectedData:Array = [];
// Iterate over the number of items in the series.
for (var j:int=0; j&lt;srv.lastResult.data.result.length; j++) {
selectedData.push(j);
}
// Use the series' selectedIndices property to select all the
// chart items.
allSeries[i].selectedIndices = selectedData;
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel height="100%" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="myChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries id="series1"
xField="expenses"
yField="profit"
displayName="Expenses/Profit"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series2"
xField="amount"
yField="expenses"
displayName="Amount/Expenses"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series3"
xField="profit"
yField="amount"
displayName="Profit/Amount"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;mx:Legend dataProvider="{myChart}" width="200"/&gt;
&lt;s:Label text="Click Ctrl + A to select all items."/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>The following example is similar to the previous example, except
that it lets you set a threshold value in the TextInput control.
The chart only selects chart items whose values are greater than
that threshold.</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/ConditionallySelectChartItems.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx" result="resultHandler()"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection;
private function resultHandler():void {
expensesAC = ArrayCollection(srv.lastResult.data.result);
}
private function selectItems(event:Event):void {
// Create an array of all the chart's series.
var allSeries:Array = myChart.series;
// Iterate over each series.
for (var i:int=0; i&lt;allSeries.length; i++) {
var selectedData:Array = [];
// Iterate over each item in the series.
for (var j:int=0; j&lt;expensesAC.length; j++) {
if (expensesAC.getItemAt(j).expenses &gt;=
Number(threshold.text)) {
selectedData.push(j);
}
}
// Use the series' selectedIndices property to select all the
// chart items that met the criteria.
allSeries[i].selectedIndices = selectedData;
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel height="100%" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="myChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{expensesAC}"
selectionMode="multiple"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries id="series1"
xField="expenses"
yField="profit"
displayName="Expenses/Profit"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series2"
xField="amount"
yField="expenses"
displayName="Amount/Expenses"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series3"
xField="profit"
yField="amount"
displayName="Profit/Amount"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;mx:Legend dataProvider="{myChart}" width="200"/&gt;
&lt;s:HGroup&gt;
&lt;s:Label text="'Expenses' Threshold:"/&gt;
&lt;s:TextInput id="threshold" text="1500"/&gt;
&lt;/s:HGroup&gt;
&lt;s:Button label="Select Items" click="selectItems(event)"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7bfa_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bfa_verapache"><!-- --></a>
<h4 class="topictitle4">Methods and properties of the ChartBase
class</h4>
<div>
<p>The ChartBase class is the parent class of all chart controls.
You can programmatically access ChartItem objects by using the following
methods of this class:</p>
<ul>
<li>
<p>
<samp class="codeph">getNextItem()</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">getPreviousItem()</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">getFirstItem()</samp>
</p>
</li>
<li>
<p>
<samp class="codeph">getLastItem()</samp>
</p>
</li>
</ul>
<p>These methods return a ChartItem object, whether it is selected
or not. Which object is returned depends on which one is currently
selected, and which direction constant (<samp class="codeph">ChartBase.HORIZONTAL</samp> or <samp class="codeph">ChartBase.VERTICAL</samp>) you
pass to the method. </p>
<p>The following example uses these methods to cycle through the
data points in a ColumnChart control. It sets the value of the series' <samp class="codeph">selectedItem</samp> property
to identify the new ChartItem as the currently selected item.</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/SimpleCycle.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx" result="resultHandler()"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
[Bindable]
private var myAC:ArrayCollection = new ArrayCollection();
private function resultHandler():void {
myAC = srv.lastResult.data.result;
series1.selectedIndex = 0;
}
private function getNext(e:Event, dir:*):void {
// Ensure that Flash Player doesn't try to select items outside of the bounds.
if (series1.selectedIndex &lt; series1.items.length - 1) {
var curItem:ChartItem = series1.selectedItem;
var newItem:ChartItem = myChart.getNextItem(dir);
applyNewItem(newItem);
}
}
private function getPrev(e:Event, dir:*):void {
// Ensure that Flash Player doesn't try to select items outside of the bounds.
if (series1.selectedIndex &gt; 0) {
var curItem:ChartItem = series1.selectedItem;
var newItem:ChartItem = myChart.getPreviousItem(dir);
applyNewItem(newItem);
}
}
private function getFirst(e:Event, dir:*):void {
var newItem:ChartItem = myChart.getFirstItem(dir);
applyNewItem(newItem);
}
private function getLast(e:Event, dir:*):void {
var newItem:ChartItem = myChart.getLastItem(dir);
applyNewItem(newItem);
}
private function applyNewItem(n:ChartItem):void {
trace(series1.selectedIndex + " of " + series1.items.length);
series1.selectedItem = n;
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel height="100%" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{myAC}"
selectionMode="single"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="expenses"
displayName="Expenses"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}" width="200"/&gt;
&lt;s:HGroup&gt;
&lt;s:Button label="|&amp;lt;"
click="getFirst(event, ChartBase.HORIZONTAL);"/&gt;
&lt;s:Button label="&amp;lt;"
click="getPrev(event, ChartBase.HORIZONTAL);"/&gt;
&lt;s:Button label="&amp;gt;"
click="getNext(event, ChartBase.HORIZONTAL);"/&gt;
&lt;s:Button label="&amp;gt;|"
click="getLast(event, ChartBase.HORIZONTAL);"/&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>These item getter methods do not have associated setters. You
cannot set the selected ChartItem objects in the same manner. Instead,
you use the properties of the series, as described in <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bf9_verapache">Properties
of the series</a>.</p>
<p>Calling the <samp class="codeph">getNextItem()</samp> and <samp class="codeph">getPreviousItem()</samp> methods
provides more control over the item selection than simply incrementing
and decrementing the series' <samp class="codeph">selectedIndex</samp> property
as shown in <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bf9_verapache">Properties
of the series</a>. With these methods, you can choose the direction
in which you select the next or previous item, and then decide whether
to make the item appear selected.</p>
<p>The item getter methods also account for when you get to the
end of the series, for example. If no ChartItems are currently selected,
then the <samp class="codeph">getNextItem()</samp> method gets the first one
in the series. If you are at the beginning of the series, the <samp class="codeph">getPreviousItem()</samp> gets
the last item in the series.</p>
<p>The ChartBase class defines two additional properties, <samp class="codeph">selectedChartItem</samp> and <samp class="codeph">selectedChartItems</samp>,
that return a ChartItem object or an array of ChartItem objects
that are selected. You cannot set the values of these properties to
select chart items. These properties are read-only. They are useful
if your chart has multiple series and you want to know which items
across the series are selected without iterating over all the series.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fe0_verapache"><!-- --></a>
<h4 class="topictitle4">Setting the current state of a
ChartItem object</h4>
<div>
<p>You can set the value of the <samp class="codeph">currentState</samp> property
of a ChartItem object to make it appear selected or deselected,
or make it appear in some other state. The <samp class="codeph">currentState</samp> property
can be set to <samp class="codeph">none</samp>, <samp class="codeph">rollOver</samp>, <samp class="codeph">selected</samp>, <samp class="codeph">disabled</samp>, <samp class="codeph">focusedSelected</samp>,
and <samp class="codeph">focused</samp>.</p>
<p>Setting the state of the item does not add it to the <samp class="codeph">selectedItems</samp> array.
It only changes the appearance of the chart item. Setting the value
of this property also does not trigger a <samp class="codeph">change</samp> event.</p>
</div>
</div>
<div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdf_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdf_verapache"><!-- --></a>
<h4 class="topictitle4">Defined range</h4>
<div>
<p>You can use the <samp class="codeph">getItemsInRegion()</samp> method
to define a rectangular area and select those chart items that are
within that region. The <samp class="codeph">getItemsInRegion()</samp> method
takes an instance of the Rectangle class as its only argument. This
rectangle defines an area on the stage, in global coordinates.</p>
<p>Getting an array of ChartItem objects with the <samp class="codeph">getItemsInRegion()</samp> method
does not trigger a <samp class="codeph">change</samp> event. The state of the
items does not change.</p>
<p>The following example lets you specify the <samp class="codeph">x</samp>, <samp class="codeph">y</samp>, <samp class="codeph">height</samp>,
and <samp class="codeph">width</samp> properties of a rectangular range. It
then calls the <samp class="codeph">getItemsInRegion()</samp> method and passes
those values to define the range. All chart items that fall within
this invisible rectangle are selected and their values are displayed
in the TextArea control.</p>
<p>
</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/GetItemsInRangeExample.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600" width="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/medals-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/medals.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.series.items.ColumnSeriesItem;
private function getItems(e:Event):void {
var x:Number = Number(ti1.text);
var y:Number = Number(ti2.text);
var h:Number = Number(ti3.text);
var w:Number = Number(ti4.text);
var r:Rectangle = new Rectangle(x, y, h, w);
// Get an Array of ChartItems in the defined area.
var a:Array = myChart.getItemsInRegion(r);
for (var i:int = 0; i&lt;a.length; i++) {
var myChartItem:ColumnSeriesItem = ColumnSeriesItem(a[i]);
// Make items appear selected.
myChartItem.currentState = "selected";
// Show values of the items that appear selected.
ta1.text += myChartItem.xValue.toString() +
"=" + myChartItem.yValue.toString() + "\n";
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Selecting Items in Ranges"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
height="207" width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="gold"
displayName="Gold"
selectable="true"/&gt;
&lt;mx:ColumnSeries id="series2"
yField="silver"
displayName="Silver"
selectable="true"/&gt;
&lt;mx:ColumnSeries id="series3"
yField="bronze"
displayName="bronze"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="country"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}" direction="horizontal"/&gt;
&lt;s:Label text="Specify dimensions of a rectangle:"/&gt;
&lt;s:HGroup&gt;
&lt;s:Form&gt;
&lt;s:FormItem label="x"&gt;
&lt;s:TextInput id="ti1" text="20" width="50"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="y"&gt;
&lt;s:TextInput id="ti2" text="20" width="50"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;s:Form&gt;
&lt;s:FormItem label="Height"&gt;
&lt;s:TextInput id="ti3" text="200" width="50"/&gt;
&lt;/s:FormItem&gt;
&lt;s:FormItem label="Width"&gt;
&lt;s:TextInput id="ti4" text="200" width="50"/&gt;
&lt;/s:FormItem&gt;
&lt;/s:Form&gt;
&lt;/s:HGroup&gt;
&lt;s:Button label="Select Items Inside Rectangle" click="ta1.text='';getItems(event)" /&gt;
&lt;s:TextArea id="ta1" height="100" width="300"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache"><!-- --></a>
<h3 class="topictitle3">Working with ChartItem objects
to access chart data</h3>
<div>
<p>To work with the data of a ChartItem, you typically cast
it to its specific series type. For example, in a ColumnChart control,
the ChartItem objects are of type ColumnSeriesItem. Doing this lets
you access series-specific properties such as the <samp class="codeph">yValue</samp>, <samp class="codeph">xValue</samp>,
and <samp class="codeph">index</samp> of the ChartItem. You can also then access
the data provider's object by using the <samp class="codeph">item</samp> property.
Finally, you can access the properties of the series by casting
the <samp class="codeph">element</samp> property to a series object.</p>
<p>Assuming that <samp class="codeph">a[i]</samp> is a reference to a ChartItem
object from an Array, use the following syntax.</p>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdd_verapache"><!-- --></a><h4 class="sectiontitle">Access
the properties of the series item</h4>
<pre class="codeblock"> var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
 trace(csi.yValue);</pre>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdc_verapache"><!-- --></a><h4 class="sectiontitle">Access
the item's fields</h4>
<pre class="codeblock"> var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
 trace(csi.item.Profit);</pre>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fde_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fdb_verapache"><!-- --></a><h4 class="sectiontitle">Access
the series properties</h4>
<pre class="codeblock"> var csi:ColumnSeriesItem = ColumnSeriesItem(a[i]);
 var cs:ColumnSeries = ColumnSeries(csi.element);
 trace(cs.displayName);</pre>
</div>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fda_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fda_verapache"><!-- --></a>
<h3 class="topictitle3">About selection events</h3>
<div>
<p>When a user selects a chart item using mouse, keyboard
or region selection, the chart's <samp class="codeph">change</samp> event is
dispatched. When the following properties are updated through user
interaction, a <samp class="codeph">change</samp> event is dispatched: </p>
<ul>
<li>
<p>
<samp class="codeph">selectedChartItem</samp> and <samp class="codeph">selectedChartItems</samp> (on
the chart)</p>
</li>
<li>
<p>
<samp class="codeph">selectedItem</samp>, <samp class="codeph">selectedItems</samp>, <samp class="codeph">selectedIndex</samp>,
and <samp class="codeph">selectedIndices</samp> (on the chart's series)</p>
</li>
</ul>
<p>The <samp class="codeph">change</samp> event does not contain references
to the HitData or HitSet of the selected chart items. To access
that information, you can use the chart's <samp class="codeph">selectedChartItem</samp> and <samp class="codeph">selectedChartItems</samp> properties.</p>
<p>When you select an item programmatically, no <samp class="codeph">change</samp> event
is dispatched. When you change the <samp class="codeph">selectedState</samp> property
of a chart item, no <samp class="codeph">change</samp> event is dispatched.</p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd9_verapache"><!-- --></a>
<h3 class="topictitle3">Clearing selections</h3>
<div>
<p>You can clear all selected data points by using the chart
control's <samp class="codeph">clearSelection()</samp> method. The following
example clears all selected data points when the user presses the
ESC key:</p>
<p>
</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/ClearItemSelection.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="initApp();srv.send();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import flash.events.KeyboardEvent;
import mx.core.FlexGlobals;
private function initApp():void {
FlexGlobals.topLevelApplication.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
}
// Clears all chart items selected when the user presses the ESC key.
private function keyHandler(event:KeyboardEvent):void {
var curKeyCode:int = event.keyCode;
if (curKeyCode == 27) { // 27 is the keycode value for ESC
myChart.clearSelection();
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel height="100%" width="100%"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:PlotChart id="myChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"&gt;
&lt;mx:series&gt;
&lt;mx:PlotSeries id="series1"
xField="expenses"
yField="profit"
displayName="Expenses/Profit"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series2"
xField="amount"
yField="expenses"
displayName="Amount/Expenses"
selectable="true"/&gt;
&lt;mx:PlotSeries id="series3"
xField="profit"
yField="amount"
displayName="Profit/Amount"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:PlotChart&gt;
&lt;mx:Legend dataProvider="{myChart}" width="200"/&gt;
&lt;s:Label text="Press ESC to clear selection."/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>In addition to clearing item selections programmatically, users
can use the mouse or keyboard to clear items. If a user clicks anywhere
on the chart control's background, and not over a data point, they
clear all selections. If a user uses the up and down arrow keys
to select a data point, they clear the existing data points. For
more information, see <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7bfc_verapache">Keyboard
and mouse selection</a>.</p>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd8_verapache"><!-- --></a>
<h3 class="topictitle3">Using the selection API to create
new charts</h3>
<div>
<p>You can use the selection API to get some or all of the
ChartItem objects of one chart, and then create a new chart with
them. To do this, you create a new data provider for the new chart.
To do this, you can call the ArrayCollection's <samp class="codeph">getItemAt()</samp> method
on the original chart's data provider and pass to it the original
series' selected indices. This method then returns an object whose
values you then add to an object in the new data provider.</p>
<p>The <samp class="codeph">selectedIndex</samp> and <samp class="codeph">selectedIndices</samp> properties
of a chart's series represent the position of the chart item in
the series. This position is also equivalent to the position of
the chart item's underlying data object in the data provider. </p>
<p>The following example creates a PieChart control from the selected
columns in the ColumnChart control. The PieChart control also allows
selection; you can explode a piece by selecting it.</p>
<p>
</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/MakeChartFromSelection.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();initApp();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx" result="resultHandler()"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;mx:SeriesInterpolate id="interpol"
duration="1000"
elementOffset="0"
minimumElementDuration="200"/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.PieChart;
import mx.charts.series.PieSeries;
import mx.charts.events.ChartItemEvent;
import mx.charts.Legend;
[Bindable]
public var expensesAC:ArrayCollection;
[Bindable]
public var newDataProviderAC:ArrayCollection;
private function resultHandler():void {
expensesAC = ArrayCollection(srv.lastResult.data.result);
}
private function initApp():void {
myColumnChart.addEventListener(ChartItemEvent.CHANGE, createNewChart);
setupPieChart();
}
private function getNewDataProvider():ArrayCollection {
newDataProviderAC = new ArrayCollection();
for (var i:int=0; i&lt;series1.selectedItems.length; i++) {
var o:Object = new Object();
o.Month = expensesAC.getItemAt(series1.selectedIndices[i]).month;
o.Expenses = expensesAC.getItemAt(series1.selectedIndices[i]).expenses;
newDataProviderAC.addItem(o);
}
return newDataProviderAC;
}
private var newChart:PieChart;
private var newSeries:PieSeries;
[Bindable]
private var explodedPiece:Array;
private function explodePiece(e:Event):void {
explodedPiece = new Array();
explodedPiece[newSeries.selectedIndex] = .2;
newSeries.perWedgeExplodeRadius = explodedPiece;
}
private function setupPieChart():void {
newChart = new PieChart();
newChart.showDataTips = true;
newChart.selectionMode = "single";
newSeries = new PieSeries();
newSeries.field = "Expenses";
newSeries.nameField = "Month";
newSeries.setStyle("labelPosition", "callout");
newSeries.setStyle("showDataEffect", "interpol");
var newSeriesArray:Array = new Array();
newSeriesArray.push(newSeries);
newChart.series = newSeriesArray;
newChart.addEventListener(ChartItemEvent.CHANGE, explodePiece);
// Create a legend for the new chart.
var newLegend:Legend = new Legend();
newLegend.dataProvider = newChart;
p1.addElement(newChart);
p1.addElement(newLegend);
}
private function createNewChart(e:Event):void {
newChart.dataProvider = getNewDataProvider();
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myColumnChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="expenses"
displayName="Expenses"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache"><!-- --></a>
<h3 class="topictitle3">Dragging and dropping ChartItem
objects</h3>
<div>
<p>As an extension of the selection API, you can drag and
drop chart items from one chart to another (or from a chart to some
other object altogether). </p>
<p>To use drag and drop operations in your chart controls:</p>
<ul>
<li>
<p>Make the source chart drag enabled by setting it's <samp class="codeph">dragEnabled</samp> property
to <samp class="codeph">true</samp>. </p>
</li>
<li>
<p>Make the target chart drop enabled by setting it's <samp class="codeph">dropEnabled</samp> property
to <samp class="codeph">true</samp>.</p>
</li>
<li>
<p>Add event listeners for the <samp class="codeph">dragEnter</samp> and <samp class="codeph">dragDrop</samp> events
on the target chart.</p>
</li>
<li>
<p>In the <samp class="codeph">dragEnter</samp> event handler, get a reference
to the target chart and register it with the DragManager. To be
a drop target, a chart must define an event handler for this event.
You must call the <samp class="codeph">DragManager.acceptDragDrop()</samp> method
for the drop target to receive the drag and drop events.</p>
</li>
<li>
<p>In the <samp class="codeph">dragDrop</samp> event handler, get an Array
of chart items that are being dragged and add that Array to the
target chart's data provider. You do this by using the <samp class="codeph">event.dragSource.dataForFormat()</samp> method.
You must specify the String <samp class="codeph">"chartitems"</samp> as the
argument to the <samp class="codeph">dataForFormat()</samp> method. This is
because the chart-based controls have predefined values for the
data format of drag data. For all chart controls, the format String
is <samp class="codeph">"chartitems"</samp>.</p>
</li>
</ul>
<p>The following example lets you drag chart items from the ColumnChart
control to the PieChart control. When the application starts, there
is no PieChart control, but it becomes visible when the first chart
item is dragged onto the container. This example also examines the
dragged chart items to ensure that they are not added more than
once to the target chart. It does this by using the target data provider's <samp class="codeph">contains()</samp> method.</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/MakeChartFromDragDrop.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();initApp();"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx" result="resultHandler()"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;mx:SeriesInterpolate id="interpol"
duration="1000"
elementOffset="0"
minimumElementDuration="200"
/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.PieChart;
import mx.charts.series.PieSeries;
import mx.charts.events.ChartItemEvent;
import mx.events.DragEvent;
import mx.controls.List;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.charts.Legend;
[Bindable]
public var newDataProviderAC:ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection;
private function initApp():void {
setupPieChart();
}
private function resultHandler():void {
expensesAC = ArrayCollection(srv.lastResult.data.result);
}
private var newChart:PieChart;
private var newSeries:PieSeries;
[Bindable]
private var explodedPiece:Array;
private function explodePiece(e:Event):void {
explodedPiece = new Array();
explodedPiece[newSeries.selectedIndex] = .2;
newSeries.perWedgeExplodeRadius = explodedPiece;
}
private function setupPieChart():void {
newChart = new PieChart();
newChart.showDataTips = true;
newChart.selectionMode = "multiple";
newChart.dropEnabled= true;
newChart.dragEnabled= false;
newChart.height = 350;
newChart.width = 350;
newChart.addEventListener("dragEnter", doDragEnter);
newChart.addEventListener("dragDrop", doDragDrop);
newChart.dataProvider = newDataProviderAC;
newSeries = new PieSeries();
newSeries.field = "expenses";
newSeries.nameField = "month";
newSeries.setStyle("labelPosition", "callout");
newSeries.setStyle("showDataEffect", "interpol");
var newSeriesArray:Array = new Array();
newSeriesArray.push(newSeries);
newChart.series = newSeriesArray;
newChart.addEventListener(ChartItemEvent.CHANGE, explodePiece);
// Create a legend for the new chart.
var newLegend:Legend = new Legend();
newLegend.dataProvider = newChart;
p2.addElement(newChart);
p2.addElement(newLegend);
}
private function doDragEnter(event:DragEvent):void {
// Get a reference to the target chart.
var dragTarget:ChartBase = ChartBase(event.currentTarget);
// Register the target chart with the DragManager.
DragManager.acceptDragDrop(dragTarget);
}
private function doDragDrop(event:DragEvent):void {
// Get a reference to the target chart.
var dropTarget:ChartBase=ChartBase(event.currentTarget);
// Get the dragged items from the drag initiator. When getting
// items from chart controls, you must use the 'chartitems'
// format.
var items:Array = event.dragSource.dataForFormat("chartitems")
as Array;
// Trace status messages.
trace("length: " + String(items.length));
trace("format: " + String(event.dragSource.formats[0]));
// Add each item to the drop target's data provider.
for(var i:uint=0; i &lt; items.length; i++) {
// If the target data provider already contains the
// item, then do nothing.
if (dropTarget.dataProvider.contains(items[i].item)) {
// If the target data provider does NOT already
// contain the item, then add it.
} else {
dropTarget.dataProvider.addItem(items[i].item);
}
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Source Chart" height="250" width="400"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myColumnChart"
height="207"
width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"
dragEnabled="true"
dropEnabled="false"&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="expenses"
displayName="Expenses"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;/mx:ColumnChart&gt;
&lt;/s:Panel&gt;
&lt;!-- This will be the parent of the soon-to-be created chart. --&gt;
&lt;s:Panel id="p2" title="Target Chart" height="400" width="400"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>Chart controls also support the standard drag and drop methods
of List-based controls such as <samp class="codeph">hideDropFeedback()</samp> and <samp class="codeph">showDropFeedback()</samp>.
These methods display indicators under the mouse pointer to indicate
whether drag and drop operations are allowed and where the items
will be dropped. </p>
<p>For more information about drag and drop operations, see <a href="flx_dragdrop_dd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c0a_verapache">Drag
and drop</a>.</p>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd6_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd6_verapache"><!-- --></a><h4 class="sectiontitle">Dropping
ChartItem objects onto components</h4>
<p>The target of a drag
and drop operation from a chart control does not need to be another
chart control. Instead, you can drag an object onto any Flex component using
simple drag and drop rules. The following example lets you drag
a column from the chart onto the TextArea. The TextArea then extracts
data from the dropped item and displays that information in text.</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/DragDropToComponent.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/medals-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/medals.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
import mx.controls.List;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.ColumnSeriesItem;
private function doDragEnter(event:DragEvent):void {
var dragTarget:TextArea = TextArea(event.currentTarget);
DragManager.acceptDragDrop(dragTarget);
}
private function doDragDrop(event:DragEvent):void {
var dropTarget:TextArea = TextArea(event.currentTarget);
var curItem:ColumnSeriesItem =
ColumnSeriesItem(event.dragSource.dataForFormat("chartitems")[0]);
var curSeries:ColumnSeries = ColumnSeries(curItem.element);
var medalType:String = curSeries.displayName;
var numMedals:String = curItem.yValue.toString();
var countryName:String = curItem.item.country;
ta1.text = countryName + " earned " + numMedals + " " + medalType + " medals.";
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Dropping ChartItem Objects"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
height="225"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="single"
dragEnabled="true"&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="country"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries id="columnSeries1"
xField="country"
yField="gold"
displayName="Gold"
selectable="true"/&gt;
&lt;mx:ColumnSeries id="columnSeries2"
xField="country"
yField="silver"
displayName="Silver"
selectable="true"/&gt;
&lt;mx:ColumnSeries id="columnSeries3"
xField="country"
yField="bronze"
displayName="Bronze"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;s:HGroup&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;s:TextArea id="ta1"
height="75" width="200"
dragEnter="doDragEnter(event)"
dragDrop="doDragDrop(event)"/&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
<div class="section" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd7_verapache__WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd5_verapache"><!-- --></a><h4 class="sectiontitle">Changing
the drag image</h4>
<p>When you drag a chart item off of a source
chart, an outline of the underlyig chart item appears as the drag
image. For example, if you drag a column from a ColumnChart control,
a column appears under the mouse pointer to represent the item that
is being dragged.</p>
<p>You can customize the image that is displayed
during a drag operation by overriding the default defintion of the <samp class="codeph">dragImage</samp> property
in a custom chart class. You do this by embedding your new image
(or defining it in ActionScript), overriding the <samp class="codeph">dragImage()</samp> getter
method, and returning the new image.</p>
<p>The default location,
in coordinates, of the drag image is 0,0 unless you override the
DragManager's <samp class="codeph">doDrag()</samp> method. You can also set
the starting location of the drag proxy image by using the x and
y coordinates of the image proxy in the <samp class="codeph">dragImage()</samp> getter.</p>
<p>The
following example custom chart class embeds an image and returns
it in the <samp class="codeph">dragImage()</samp> getter method. This example
also positions the drag image proxy so that the mouse pointer is
near its lower right corner.</p>
<pre class="codeblock">// charts/MyColumnChart.as
package {
import mx.charts.ColumnChart;
import mx.core.IUIComponent;
import mx.controls.Image;
public class MyColumnChart extends ColumnChart {
[Embed(source="images/dollarSign.png")]
public var dollarSign:Class;
public function MyColumnChart() {
super();
}
override protected function get dragImage():IUIComponent {
var imageProxy:Image = new Image();
imageProxy.source = dollarSign;
var imageHeight:Number = 50;
var imageWidth:Number = 32;
imageProxy.height = imageHeight;
imageProxy.width = imageWidth;
// Position the image proxy above and to the left of
// the mouse pointer.
imageProxy.x = this.mouseX - imageWidth;
imageProxy.y = this.mouseY - imageHeight;
return imageProxy;
}
}
}</pre>
<p>The following example uses the MyColumnChart example
class to define its custom drag image:</p>
<pre class="codeblock">&lt;?xml version="1.0" ?&gt;
&lt;!-- charts/DragDropCustomDragImage.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send();initApp();"
xmlns:local="*"
height="800"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;mx:SeriesInterpolate id="interpol"
duration="1000"
elementOffset="0"
minimumElementDuration="200"/&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;
&lt;![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.chartClasses.ChartBase;
import mx.charts.ChartItem;
import mx.charts.PieChart;
import mx.charts.series.PieSeries;
import mx.charts.events.ChartItemEvent;
import mx.events.DragEvent;
import mx.controls.List;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.controls.Image;
import flash.events.MouseEvent;
import mx.charts.Legend;
[Bindable]
public var newDataProviderAC:ArrayCollection;
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection([
{ Month: "Jan", Expenses: 1500 },
{ Month: "Feb", Expenses: 200 },
{ Month: "Mar", Expenses: 500 },
{ Month: "Apr", Expenses: 1200 },
{ Month: "May", Expenses: 575 } ]);
private function initApp():void {
setupPieChart();
}
private var newChart:PieChart;
private var newSeries:PieSeries;
[Bindable]
private var explodedPiece:Array;
private function explodePiece(e:Event):void {
explodedPiece = new Array();
explodedPiece[newSeries.selectedIndex] = .2;
newSeries.perWedgeExplodeRadius = explodedPiece;
}
private function setupPieChart():void {
newChart = new PieChart();
newChart.showDataTips = true;
newChart.selectionMode = "multiple";
newChart.dropEnabled= true;
newChart.dragEnabled= false;
newChart.height = 350;
newChart.width = 350;
newChart.addEventListener("dragEnter", doDragEnter);
newChart.addEventListener("dragDrop", doDragDrop);
newChart.dataProvider = newDataProviderAC;
newSeries = new PieSeries();
newSeries.field = "expenses";
newSeries.nameField = "month";
newSeries.setStyle("labelPosition", "callout");
newSeries.setStyle("showDataEffect", "interpol");
var newSeriesArray:Array = new Array();
newSeriesArray.push(newSeries);
newChart.series = newSeriesArray;
newChart.addEventListener(ChartItemEvent.CHANGE, explodePiece);
// Create a legend for the new chart.
var newLegend:Legend = new Legend();
newLegend.dataProvider = newChart;
p2.addElement(newChart);
p2.addElement(newLegend);
}
private function doDragEnter(event:DragEvent):void {
var dragTarget:ChartBase = ChartBase(event.currentTarget);
DragManager.acceptDragDrop(dragTarget);
}
private function doDragDrop(event:DragEvent):void {
var dropTarget:ChartBase=ChartBase(event.currentTarget);
var items:Array = event.dragSource.dataForFormat("chartitems") as Array;
for(var i:uint=0; i &lt; items.length; i++) {
if (dropTarget.dataProvider.contains(items[i].item)) {
} else {
dropTarget.dataProvider.addItem(items[i].item);
}
}
}
]]&gt;
&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel id="p1" title="Source Chart"
height="250" width="400"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;local:MyColumnChart id="myChart"
height="207" width="350"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="multiple"
dragEnabled="true"
dropEnabled="false"&gt;
&lt;local:series&gt;
&lt;mx:ColumnSeries id="series1"
yField="expenses"
displayName="Expenses"
selectable="true"/&gt;
&lt;/local:series&gt;
&lt;local:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/local:horizontalAxis&gt;
&lt;/local:MyColumnChart&gt;
&lt;/s:Panel&gt;
&lt;s:Panel id="p2" title="Target Chart"
height="400" width="400"&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
</div>
</div>
<div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c44_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c44_verapache"><!-- --></a>
<h2 class="topictitle2">Drawing on chart controls</h2>
<div>
<p>Flex includes the ability to add graphical elements to
your chart controls such as lines, boxes, and elipses. Graphical
children of chart controls can also include any control that is
a subclass of UIComponent, including list boxes, combo boxes, labels,
and even other chart controls. </p>
<p>When working with chart controls, Flex converts x and y coordinates
into data coordinates. Data coordinates define locations relative
to the data in the chart's underlying data provider. This lets you
position graphical elements relative to the location of data points
in the chart without having to first convert their positions to
x and y coordinates. For example, you can draw a line from the top
of a column in a ColumnChart to the the top of another column, showing
a trend line.</p>
<p>To add data graphics to a chart control, you use the <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/CartesianDataCanvas.html" target="_blank">mx.charts.chartClasses.CartesianDataCanvas</a> (for
Cartesian charts) class or the <a href="https://flex.apache.org/asdoc/mx/charts/chartClasses/PolarDataCanvas.html" target="_blank">mx.charts.chartClasses.PolarDataCanvas</a> (for
polar charts) classes. You can either attach visual controls to
the canvas or you can draw on the canvas by using drawing methods. </p>
<p>You attach visual controls to the data canvases in the same way
that you programmatically add controls to an application: you add
them as child controls. In this case, the method you call to add
children is <samp class="codeph">addDataChild()</samp>, which lets you add
any DisplayObject instance to the canvas. This method lets you take advantage
of the data coordinates that the canvas uses. As with most MX containers,
you can also use the <samp class="codeph">addChild()</samp> and <samp class="codeph">addChildAt()</samp> methods. With
these methods, you can then adjust the location of the DisplayObject
to data coordinates by using the canvas' <samp class="codeph">updateDataChild()</samp> method.</p>
<p>To draw on the data canvases, you use drawing methods that are
similar to those used in MXML graphics. The canvases define a set
of methods that you can use to create vector shapes such as circles,
squares, lines, and other shapes. These methods include the line-drawing
methods such as <samp class="codeph">lineTo()</samp>, <samp class="codeph">moveTo()</samp>, and <samp class="codeph">curveTo()</samp>,
as well as the fill methods such as <samp class="codeph">beginFill()</samp>, <samp class="codeph">beginBitmapFill()</samp>,
and <samp class="codeph">endFill()</samp>. Convenience methods such as <samp class="codeph">drawRect()</samp>, <samp class="codeph">drawRoundedRect()</samp>, <samp class="codeph">drawEllipse()</samp>,
and <samp class="codeph">drawCircle()</samp> are also available on the data
canvases. For more information about MXML graphics, see <a href="flx_fxg_fx.html#WSda78ed3a750d6b8fee1b36612357de97a3-8000_verapache">MXML
graphics</a>.</p>
<p>All drawn graphics such as lines and shapes remain visible on
the data canvas until you call the canvas' <samp class="codeph">clear()</samp> method.
To remove child objects from data canvases, use the <samp class="codeph">removeChild()</samp>, <samp class="codeph">removeChildAt()</samp>,
and <samp class="codeph">removeAllChildren()</samp> methods.</p>
<p>A canvas can either be in the foreground (in front of the data
points) or in the background (behind the data points). To add a
canvas to the foreground, you add it to the chart's <samp class="codeph">annotationElement</samp> Array.
To add a canvas to the background, you add it to the chart's <samp class="codeph">backgroundElements</samp> Array.</p>
<p>The data canvases have the following limitations:</p>
<ul>
<li>
<p>There is no drag-and-drop support for children of the
data canvases.</p>
</li>
<li>
<p>You cannot use the chart selection APIs to select objects
on the data canvases.</p>
</li>
</ul>
<p>The following example adds a CartesianDataCanvas as an annotation
element to the ColumnChart control. It uses the graphics methods
to draw a line between the columns that you select.</p>
<p>
</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/DrawLineBetweenSelectedItems.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.ChartItem;
private function connectTwoPoints(month1:String,
value1:Number,
month2:String,
value2:Number
):void {
canvas.clear();
canvas.lineStyle(4,
0xCCCCCC,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2
);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
l1.text = "Month: " + month1;
l2.text = "Expense: " + value1;
l3.text = "Month: " + month2;
l4.text = "Expense: " + value2;
chartHasLine = true;
}
private var s1:String = new String();
private var s2:String = new String();
private var v1:Number = new Number();
private var v2:Number = new Number();
// Set this to true initially so that the chart does not
// draw a line when the first item is clicked.
private var chartHasLine:Boolean = true;
private function handleChange(event:Event):void {
var sci:ColumnSeriesItem =
ColumnSeriesItem(myChart.selectedChartItem);
if (chartHasLine) {
canvas.clear();
s1 = sci.item.month;
v1 = sci.item.expenses;
chartHasLine = false;
} else {
s2 = sci.item.month;
v2 = sci.item.expenses;
connectTwoPoints(s1, v1, s2, v2);
}
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
showDataTips="true"
dataProvider="{srv.lastResult.data.result}"
selectionMode="single"
change="handleChange(event)"&gt;
&lt;mx:annotationElements&gt;
&lt;mx:CartesianDataCanvas id="canvas" includeInRanges="true"/&gt;
&lt;/mx:annotationElements&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
id="series1"
xField="month"
yField="expenses"
displayName="Expense"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;s:HGroup&gt;
&lt;s:Button id="b1"
label="Connect Two Points"
click="connectTwoPoints('Jan', 1500, 'Mar', 500);"/&gt;
&lt;s:Button id="b2"
click="canvas.clear()"
label="Clear Line"/&gt;
&lt;/s:HGroup&gt;
&lt;s:HGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="First Item"/&gt;
&lt;s:Label id="l1"/&gt;
&lt;s:Label id="l2"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="Second Item"/&gt;
&lt;s:Label id="l3"/&gt;
&lt;s:Label id="l4"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>The following example uses the <samp class="codeph">addDataChild()</samp> method
to add children to the data canvas. It adds labels to each of the
columns that you select in the ColumnChart control.</p>
<p>
</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/AddLabelsWithLines.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.ChartItem;
private function connectTwoPoints(month1:String,
value1:Number,
month2:String,
value2:Number
):void {
canvas.clear();
canvas.lineStyle(4,
0xCCCCCC,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2
);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
l1.text = "Month: " + month1;
l2.text = "Profit: " + value1;
l3.text = "Month: " + month2;
l4.text = "Profit: " + value2;
chartHasLine = true;
}
private var s1:String = new String();
private var s2:String = new String();
private var v1:Number = new Number();
private var v2:Number = new Number();
// Set this to true initially so that the chart doesn't
// draw a line when the first item is clicked.
private var chartHasLine:Boolean = true;
private function handleChange(event:Event):void {
var sci:ColumnSeriesItem =
ColumnSeriesItem(myChart.selectedChartItem);
if (chartHasLine) {
canvas.clear();
s1 = sci.item.month;
v1 = sci.item.profit;
addLabelsToColumn(s1,v1);
chartHasLine = false;
} else {
s2 = sci.item.month;
v2 = sci.item.profit;
addLabelsToColumn(s2,v2);
connectTwoPoints(s1, v1, s2, v2);
}
}
[Bindable]
public var columnLabel:Label;
private function addLabelsToColumn(s:String, n:Number):void {
columnLabel = new Label();
columnLabel.setStyle("fontWeight", "bold");
columnLabel.setStyle("color", "0x660000");
columnLabel.text = s + ": " + "$" + n;
// This adds any DisplayObject as child to current canvas.
canvas.addDataChild(columnLabel, s, n);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
selectionMode="single"
change="handleChange(event)"&gt;
&lt;mx:annotationElements&gt;
&lt;mx:CartesianDataCanvas id="canvas" includeInRanges="true"/&gt;
&lt;/mx:annotationElements&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
id="series1"
xField="month"
yField="profit"
displayName="Profit"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;s:Button id="b1" label="Connect Two Points"
click="connectTwoPoints('Jan', 2000, 'Mar', 1500);"/&gt;
&lt;s:HGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="First Item"/&gt;
&lt;s:Label id="l1"/&gt;
&lt;s:Label id="l2"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="Second Item"/&gt;
&lt;s:Label id="l3"/&gt;
&lt;s:Label id="l4"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:HGroup&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
<p>You can access an
array of the data children by using the <samp class="codeph">dataChildren</samp> property
of the canvas. This property is an array of the child objects on
the canvas.</p>
<div class="p">The following example uses the <samp class="codeph">updateDataChild()</samp> method
to add a label to a single data point on the line:<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/UpdateDataChildExample.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
height="600"&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.controls.Label;
import mx.charts.chartClasses.CartesianCanvasValue;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
public function drawData():void
{
canvas.clear();
canvas.beginFill(0xFF0033, 1);
canvas.drawCircle("Feb", 1000, 20);
canvas.endFill();
var myLabel:Label = new Label();
myLabel.text = "X";
myLabel.setStyle("fontWeight", "bold");
myLabel.setStyle("fontSize", 20);
canvas.addChild(myLabel);
canvas.updateDataChild(myLabel, "Feb", 1100);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;s:Panel title="Line Chart"&gt;
&lt;s:layout&gt;
&lt;s:HorizontalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:LineChart id="myChart" dataProvider="{expenses}"
showDataTips="true" creationComplete="drawData()"&gt;
&lt;mx:annotationElements&gt;
&lt;mx:CartesianDataCanvas id="canvas" includeInRanges="true" /&gt;
&lt;/mx:annotationElements&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:LineSeries yField="Profit" displayName="Profit"/&gt;
&lt;mx:LineSeries yField="Expenses" displayName="Expenses"/&gt;
&lt;/mx:series&gt;
&lt;/mx:LineChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd2_verapache"><!-- --></a>
<h3 class="topictitle3">Using offsets for data coordinates</h3>
<div>
<p>The data canvas classes also let you add offsets to the
position of data graphics. You do this by defining the data coordinates
with the CartesianCanvasValue constructor rather than passing a
data coordinate to the drawing or <samp class="codeph">addDataChild()</samp> methods.
When you define a data coordinate with the CartesianCanvasValue,
you pass the data coordinate as the first argument, but you can
pass an offset as the second argument.</p>
<p>The following example lets you specify an offset for the labels
with an HSlider control. This offset is used when adding a data
child to the canvas.</p>
<pre class="codeblock">&lt;?xml version="1.0"?&gt;
&lt;!-- charts/AddLabelsWithOffsetLines.mxml --&gt;
&lt;s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="srv.send()"
height="600"&gt;
&lt;fx:Declarations&gt;
&lt;!-- View source of the following page to see the structure of the data that Flex uses in this example. --&gt;
&lt;mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/&gt;
&lt;!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --&gt;
&lt;/fx:Declarations&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;fx:Script&gt;&lt;![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.ChartItem;
import mx.charts.chartClasses.CartesianCanvasValue;
private function connectTwoPoints(month1:String,
value1:Number,
month2:String,
value2:Number
):void {
canvas.clear();
canvas.lineStyle(4,
0xCCCCCC,
.75,
true,
LineScaleMode.NORMAL,
CapsStyle.ROUND,
JointStyle.MITER,
2
);
canvas.moveTo(month1, value1);
canvas.lineTo(month2, value2);
l1.text = "Month: " + month1;
l2.text = "Profit: " + value1;
l3.text = "Month: " + month2;
l4.text = "Profit: " + value2;
chartHasLine = true;
}
private var s1:String = new String();
private var s2:String = new String();
private var v1:Number = new Number();
private var v2:Number = new Number();
// Set this to true initially so that the chart doesn't
// draw a line when the first item is clicked.
private var chartHasLine:Boolean = true;
private function handleChange(event:Event):void {
var sci:ColumnSeriesItem =
ColumnSeriesItem(myChart.selectedChartItem);
if (chartHasLine) {
canvas.clear();
s1 = sci.item.month;
v1 = sci.item.profit;
addLabelsToColumn(s1,v1);
chartHasLine = false;
} else {
s2 = sci.item.month;
v2 = sci.item.profit;
addLabelsToColumn(s2,v2);
connectTwoPoints(s1, v1, s2, v2);
}
}
[Bindable]
public var labelOffset:Number = 0;
[Bindable]
public var columnLabel:Label;
private function addLabelsToColumn(s:String, n:Number):void {
columnLabel = new Label();
columnLabel.setStyle("fontWeight", "bold");
columnLabel.setStyle("color", "0x660000");
columnLabel.text = s + ": " + "$" + n;
// Use the CartesianCanvasValue constructor to specify
// an offset for data coordinates.
canvas.addDataChild(columnLabel,
new CartesianCanvasValue(s, labelOffset),
new CartesianCanvasValue(n, labelOffset)
);
}
]]&gt;&lt;/fx:Script&gt;
&lt;s:Panel title="Column Chart"&gt;
&lt;s:layout&gt;
&lt;s:VerticalLayout/&gt;
&lt;/s:layout&gt;
&lt;mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
selectionMode="single"
change="handleChange(event)"&gt;
&lt;mx:annotationElements&gt;
&lt;mx:CartesianDataCanvas id="canvas" includeInRanges="true"/&gt;
&lt;/mx:annotationElements&gt;
&lt;mx:horizontalAxis&gt;
&lt;mx:CategoryAxis categoryField="month"/&gt;
&lt;/mx:horizontalAxis&gt;
&lt;mx:series&gt;
&lt;mx:ColumnSeries
id="series1"
xField="month"
yField="profit"
displayName="Profit"
selectable="true"/&gt;
&lt;/mx:series&gt;
&lt;/mx:ColumnChart&gt;
&lt;mx:Legend dataProvider="{myChart}"/&gt;
&lt;s:Button id="b1"
label="Connect Two Points"
click="connectTwoPoints('Jan', 2000, 'Mar', 1500);"/&gt;
&lt;s:HGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="First Item"/&gt;
&lt;s:Label id="l1"/&gt;
&lt;s:Label id="l2"/&gt;
&lt;/s:VGroup&gt;
&lt;s:VGroup&gt;
&lt;s:Label text="Second Item"/&gt;
&lt;s:Label id="l3"/&gt;
&lt;s:Label id="l4"/&gt;
&lt;/s:VGroup&gt;
&lt;/s:HGroup&gt;
&lt;mx:HSlider id="hSlider" minimum="-50" maximum="50" value="0"
dataTipPlacement="top"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="['-50','0','50']"
allowTrackClick="true"
liveDragging="true"
change="labelOffset=hSlider.value"/&gt;
&lt;/s:Panel&gt;
&lt;/s:Application&gt;</pre>
</div>
</div>
<div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd0_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65c3d-7fd0_verapache"><!-- --></a>
<h3 class="topictitle3">Using multiple axes with data canvases</h3>
<div>
<p>A CartesianDataCanvas is specific to a certain data space,
which is defined by the bounds of the axis. If no axis is specified,
the canvas uses the primary axes of the chart as its bounds. If
you have a chart with multiple axes, you can specify which axes
the data canvas should use by setting the values of the <samp class="codeph">horizontalAxis</samp> or <samp class="codeph">verticalAxis</samp> properties,
as the following example illustrates:</p>
<pre class="codeblock"> &lt;mx:ColumnChart width="100%" height="100%" creationComplete="createLabel();"&gt;
  &lt;mx:annotationElements&gt;
  &lt;mx:CartesianDataCanvas id="canvas"
  includeInRanges="true"
  horizontalAxis={h1}
  verticalAxis={v1}/&gt;
  &lt;/mx:annotationElements&gt;
  ...
 &lt;/mx:ColumnChart&gt;</pre>
<p/>
</div>
<div>
<p><strong>Navigation</strong></p>
<p><a href="index.html">Using Flex</a> &raquo; <a href="flx_p4_using_ddui_components.html">Using data-driven UI components</a></p>
</div>
</div>
<p>Adobe, Adobe Flash and Adobe Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p>
</div>
</body>
</html>