| <?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 http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Introduction to charts"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WS2db454920e96a9e51e63e3d11c0bf69084-7bdf_verapache"/> |
| <link rel="stylesheet" type="text/css" href="commonltr.css"/> |
| <title>Introduction to charts</title> |
| </head> |
| <body id="WS2db454920e96a9e51e63e3d11c0bf69084-7bdf_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bdf_verapache"><!-- --></a> |
| |
| |
| <h1 class="topictitle1">Introduction to charts</h1> |
| |
| <div> |
| <p>Displaying data in a chart or graph can make data interpretation |
| much easier for users of the applications that you develop with |
| Flex. Rather than present a simple table of numeric data, you can |
| display a bar, pie, line, or other type of chart using colors, captions, |
| and a two-dimensional representation of your data.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c77_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c77_verapache"><!-- --></a> |
| <h2 class="topictitle2">About charting</h2> |
| |
| |
| <div> |
| <p> |
| |
| Data |
| visualization lets you present data in a way that simplifies data |
| interpretation and data relationships. Charting is one type of data |
| visualization in which you create two-dimensional representations |
| of your data. Flex supports the most common types of two-dimensional |
| charts (such as bar, column, and pie charts) and gives you a great |
| deal of control over the appearance of charts. </p> |
| |
| <p>A simple chart shows a single data series, where a series is |
| a group of related data points. For example, a data series might |
| be monthly sales revenues or daily occupancy rates for a hotel. </p> |
| |
| <p>Another chart might add a second data series. For example, you |
| might include the percentage growth of profits over the same four |
| business quarters. The following chart shows two data series—one |
| for sales and one for profit.</p> |
| |
| <div class="figborder"> |
| <img src="images/chi_columnchart.png" alt="BarChart control with two series."/> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ff9_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ff9_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using the charting controls</h2> |
| |
| |
| <div> |
| <p>Flex charting controls lets you create some of the most |
| common chart types, and also lets you customize the appearance of |
| your charts. The charting controls are located in the mx.charts.* |
| package. </p> |
| |
| <p> |
| |
| The |
| following table lists the supported chart types, the name of the |
| control class, and the name of the series class that you use to |
| define what data appears in each chart.</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="d95751e86"> |
| <p>Chart type</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d95751e92"> |
| <p>Chart control class</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d95751e98"> |
| <p>Chart series class</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Area</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/AreaChart.html" target="_blank">AreaChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/AreaSeries.html" target="_blank">AreaSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Bar </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/BarChart.html" target="_blank">BarChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/BarSeries.html" target="_blank">BarSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Bubble </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/BubbleChart.html" target="_blank">BubbleChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/BubbleSeries.html" target="_blank">BubbleSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Candlestick</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/CandlestickChart.html" target="_blank">CandlestickChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/CandlestickSeries.html" target="_blank">CandlestickSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Column </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/ColumnSeries.html" target="_blank">ColumnSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>HighLowOpenClose</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/HLOCChart.html" target="_blank">HLOCChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/HLOCSeries.html" target="_blank">HLOCSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Line </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/LineChart.html" target="_blank">LineChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/LineSeries.html" target="_blank">LineSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Pie </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/PieChart.html" target="_blank">PieChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/PieSeries.html" target="_blank">PieSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e86 "> |
| <p>Plot </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e92 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/PlotChart.html" target="_blank">PlotChart</a> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e98 "> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/PlotSeries.html" target="_blank">PlotSeries</a> |
| </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>All chart controls, except the PieChart class, are subclasses |
| of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/CartesianChart.html" target="_blank">CartesianChart</a> class. |
| Cartesian charts are charts that typically represent a set of data |
| points in rectangular-shaped, two-dimensional space. The PieChart |
| class is a subclass of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/PolarChart.html" target="_blank">PolarChart</a> class, |
| which represents data in circular space. </p> |
| |
| <p>All chart controls inherit basic charting characteristics from |
| the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/ChartBase.html" target="_blank">ChartBase</a> class.</p> |
| |
| <p>A chart control typically has the following structure in MXML:</p> |
| |
| <pre class="codeblock"> <mx:<em>chart_type</em>> |
| <!-- Define one or more series. --> |
| <mx:series> |
| <mx:<em>Series1</em>/> |
| ... |
| </mx:series> |
| |
| <!-- Define the axes. --> |
| <mx:horizontalAxis> |
| <mx:<em>axis_type</em>/> |
| </mx:horizontalAxis> |
| <mx:verticalAxis> |
| <mx:<em>axis_type</em>/> |
| </mx:verticalAxis> |
| |
| <!-- Style the axes and ticks marks. --> |
| <mx:horizontalAxisRenderers> |
| <mx:AxisRenderer/> |
| </mx:horizontalAxisRenderers> |
| <mx:verticalAxisRenderers> |
| <mx:AxisRenderer/> |
| </mx:verticalAxisRenderers/> |
| |
| <!-- Add grid lines and other elements to the chart. --> |
| <mx:annotationElements> |
| <<em>array of elements</em>/> |
| </mx:annotationElements> |
| <mx:backgroundElements> |
| <<em>array of elements</em>/> |
| </mx:backgroundElements/> |
| </mx:<em>chart_type</em>> |
| |
| <!-- Optionally define the legend. --> |
| <mx:Legend/></pre> |
| |
| <p>The following table describes the parts of the chart in more |
| detail:</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="d95751e435"> |
| <p>Part</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d95751e441"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e435 "> |
| <p>Chart</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e441 "> |
| <p>(Required) Defines a data provider for the |
| chart. Also defines the chart type and sets data tips, mouse sensitivity, |
| gutter styles, and axis styles. </p> |
| |
| <p>This is the top-level tag |
| for a chart control. All other tags are child tags of this tag.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e435 "> |
| <p>Series</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e441 "> |
| <p>(Required) Defines one or more data series |
| to be displayed on the chart. Also sets the strokes, fills, and |
| renderers (or <em>skins</em>) of the data series, as well as the strokes |
| and fills used by the chart’s legend for each series. </p> |
| |
| <p>You |
| can use different series types in the same chart. </p> |
| |
| <p>Each series |
| in a chart can have its own data provider, or they can share the |
| data provider set on the chart object.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e435 "> |
| <p>Axes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e441 "> |
| <p>Sets the axis type (numeric or category) |
| for each axis. Also defines the axis labels, titles, and style properties |
| such as padding.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e435 "> |
| <p>Axes renderers</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e441 "> |
| <p>(Optional) Sets tick placement and styles, |
| enables or disables labels, and defines axis lines, label rotation, |
| and label gap.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e435 "> |
| <p>Elements</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d95751e441 "> |
| <p>(Optional) Defines grid lines and extra |
| elements to appear on the chart.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p>For each chart type, Flex supplies a corresponding chart control |
| and chart series. The chart control defines the chart type, the |
| data provider that supplies the chart data, the grid lines, the |
| text for the chart axes, and other properties specific to the chart |
| type. The <samp class="codeph">dataProvider</samp> property of the chart control |
| determines what data the chart uses. </p> |
| |
| <p>A <em>data provider</em> is a collection of objects. It can be |
| an Array of objects or any object that implements the collections |
| API. A data provider can also be an XMLList object with XML nodes, |
| such as the result of an E4X query. </p> |
| |
| <p>The chart components use a flat, or list-based, data provider |
| similar to a one-dimensional array. The data provider can contain |
| objects such as Strings and Numbers, or even other objects. For |
| more information on supplying chart data, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6f_verapache">Defining |
| chart data</a>.</p> |
| |
| <p>You use the chart series to identify which data from the data |
| provider the chart displays. A data provider can contain more data |
| than you want to show in your chart, so you use the chart’s series |
| to specify which points you want to use from the data provider. |
| You can specify more than one series. You can also use the chart |
| series to define the appearance of the data in the chart. </p> |
| |
| <p>All chart series inherit the data provider from the chart unless |
| they have a data provider explicitly set on themselves. If you set |
| the value of the <samp class="codeph">dataProvider</samp> property on the chart |
| control, you are not required to set the property value on the series. |
| You can, however, define different data providers for each series |
| in a chart.</p> |
| |
| <p>For example, to create a pie chart, you use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/PieChart.html" target="_blank">PieChart</a> control |
| with the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/PieSeries.html" target="_blank">PieSeries</a> chart |
| series. To create an area chart, you use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/AreaChart.html" target="_blank">AreaChart</a> control |
| with the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/AreaSeries.html" target="_blank">AreaSeries</a> chart |
| series, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BasicAreaOneSeries.mxml --> |
| <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"> |
| |
| |
| <fx:Script><![CDATA[ |
| |
| |
| 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} |
| |
| |
| ]); |
| |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Area Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:AreaChart id="myChart" dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:AreaSeries |
| yField="Profit" |
| displayName="Profit"/> |
| </mx:series> |
| </mx:AreaChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example defines an array containing a single <samp class="codeph"><mx:AreaSeries></samp> tag. |
| The <samp class="codeph"><mx:AreaSeries></samp> tag specifies the single |
| data series that is displayed in the chart. </p> |
| |
| <p>You can add a second <samp class="codeph"><mx:AreaSeries></samp> tag |
| to display two data series, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BasicArea.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Area Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:AreaChart id="myChart" |
| showDataTips="true" |
| dataProvider="{srv.lastResult.data.result}"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| categoryField="month" |
| displayName="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:AreaSeries yField="profit" displayName="Profit"/> |
| <mx:AreaSeries yField="expenses" displayName="Expenses"/> |
| </mx:series> |
| </mx:AreaChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You are not required to define a data provider on the chart control |
| itself. Instead, you can define a different data provider for each |
| element in a chart control that requires one. Each series can have |
| its own data provider, as well as each axis, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/MultipleDataProviders.mxml --> |
| <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"> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| public var profit04:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2000}, |
| {Month:"Feb", Profit:1000}, |
| {Month:"Mar", Profit:1500} |
| ]); |
| [Bindable] |
| public var profit05:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2200}, |
| {Month:"Feb", Profit:1200}, |
| {Month:"Mar", Profit:1700} |
| ]); |
| [Bindable] |
| public var profit06:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2400}, |
| {Month:"Feb", Profit:1400}, |
| {Month:"Mar", Profit:1900} |
| ]); |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis dataProvider="{profit04}" categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| dataProvider="{profit04}" |
| yField="Profit" |
| xField="Month" |
| displayName="2004"/> |
| <mx:ColumnSeries |
| dataProvider="{profit05}" |
| yField="Profit" |
| xField="Month" |
| displayName="2005"/> |
| <mx:ColumnSeries |
| dataProvider="{profit06}" |
| yField="Profit" |
| xField="Month" |
| displayName="2006"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>To dynamically size the chart to the size of its container, set |
| the <samp class="codeph">width</samp> and <samp class="codeph">height</samp> attributes |
| to a percentage value, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/BasicBarSize.mxml --> |
| <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"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| public var expenses:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2000, Expenses:1500}, |
| {Month:"Feb", Profit:1000, Expenses:200}, |
| {Month:"Mar", Profit:1500, Expenses:500} |
| ]); |
| ]]> |
| </fx:Script> |
| |
| <mx:BarChart id="myChart" |
| dataProvider="{expenses}" |
| height="100%" |
| width="100%" |
| showDataTips="true"> |
| <mx:verticalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:BarSeries |
| yField="Month" |
| xField="Profit" |
| displayName="Profit"/> |
| <mx:BarSeries |
| yField="Month" |
| xField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:BarChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Application></pre> |
| |
| <p>If the chart is inside a container (such as a Panel), set the |
| size of the chart’s parent containers to percentage values too.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65518-7fff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7fff_verapache"><!-- --></a> |
| <h2 class="topictitle2">About the series classes</h2> |
| |
| |
| <div> |
| <p>The chart series classes let you specify what data to render |
| in a chart control. All series classes are subclasses of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/Series.html" target="_blank">Series</a> class.</p> |
| |
| <p>Each chart type has its own series class; for example, a BarChart |
| control has a BarSeries class that defines the data to render in |
| the BarChart. A PieChart control has a PieSeries.</p> |
| |
| <p>The primary purpose of a series is to define what data to render |
| in the chart. You use the series to define what field in a data |
| provider the chart should use to render chart items on the X and |
| Y axes. You use the <samp class="codeph">xField</samp> property (for the horizontal |
| axis) and the <samp class="codeph">yField</samp> property (for the vertical |
| axis) to define these fields.</p> |
| |
| <p>Each series is made up of an Array of series items. The classes |
| that define the series items are specific to each series type. For |
| example, a BarSeries is made up of BarSeriesItem objects. A ColumnSeries |
| is made up of ColumnSeriesItem objects. The series items encapsulate |
| all the information about the particular data point, including the |
| minimum value, the x value, and the y value. </p> |
| |
| <p>When you create a new series, you typically define the <samp class="codeph">displayName</samp> of |
| that series. This property represents the series to the user in |
| labels such as DataTip objects. </p> |
| |
| <p>A BarChart typically specifies one or more BarSeries objects |
| that define what set of bars to render in the chart. By default, |
| bars and columns are clustered. However, you can also define alternate |
| ways to group, or "stack", series in the chart control. For example, |
| AreaSeries, ColumnSeries, and BarSeries can be stacked or overlaid. |
| They can also render as 100% charts. You can further control how |
| multiple series are grouped by using sets. For example, for a group |
| of BarSeries objects, you use the BarSet class; for a group of ColumnSeries |
| objects, you use the ColumnSet class. For more information on grouping |
| series, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6b_verapache">Stacking |
| charts</a>. </p> |
| |
| <p>Most charts use only one kind of series. However, you can specify |
| multiple types of series for a chart. For example, you can create |
| a chart that has a series of bars in addition to a trend line that |
| “floats” over it. This is useful for rendering trend-lines or showing |
| different types of data on a single chart for comparison analysis. For |
| more information, see <a href="flx_charts_types_cht.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6c_verapache">Using |
| multiple data series</a>.</p> |
| |
| <p>You use the series classes to define the appearance of the chart |
| items. You can change the fill of all series items by using the <samp class="codeph">fill</samp> property |
| on the series. In addition, you can define the fill of each item |
| in a series by using the <samp class="codeph">fills</samp> property. You can |
| also customize the fill that each chart item has based on its value |
| by using the <samp class="codeph">fillFunction</samp> on the series. For more |
| information <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c69_verapache">Using fills |
| with chart controls</a>. </p> |
| |
| <p>You can also apply filters to series to give them effects such |
| as drop shadows, blurs, and glows. For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e69_verapache">Using |
| filters with chart controls</a>.</p> |
| |
| <p>You can add data labels to series items. You do this by setting |
| the value of the <samp class="codeph">labelPosition</samp> property on the |
| series. For most series, possible values of <samp class="codeph">labelPosition</samp> are <samp class="codeph">inside</samp> and <samp class="codeph">outside</samp>, |
| which draw the labels inside the chart item and outside the chart |
| item, respectively. For a PieSeries, you can also set the <samp class="codeph">labelPosition</samp> property |
| to other values that include <samp class="codeph">callout</samp> and <samp class="codeph">insideWithCallout</samp>. </p> |
| |
| <p>You can customize data labels by using a <samp class="codeph">labelFunction</samp>. |
| This callback function takes arguments that define the series item |
| and returns a String that is then rendered on the series item.</p> |
| |
| <p>For information about adding data labels to your charts, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c67_verapache">Using |
| data labels</a>.</p> |
| |
| <p>Series also let you set a <samp class="codeph">minField</samp> value. This |
| property lets you specify a minimum value that the series displays. |
| For more information, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6a_verapache">Using |
| the minField property</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ff2_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ff2_verapache"><!-- --></a> |
| <h2 class="topictitle2">About the axis classes</h2> |
| |
| |
| <div> |
| <p>Flex charting controls support the following types of axes:</p> |
| |
| <dl> |
| |
| <dt class="dlterm">CategoryAxis </dt> |
| |
| <dd> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/CategoryAxis.html" target="_blank">CategoryAxis</a> class |
| maps a set of values (such as stock ticker symbols, state names, |
| or demographic categories) to the axis. You use the <samp class="codeph"><mx:CategoryAxis></samp> tag |
| to define axis labels that are grouped by logical associations and |
| that are not necessarily numeric. For example, the month names used |
| in the chart in <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c77_verapache">About |
| charting</a> could be defined as a CategoryAxis class.</p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">LinearAxis</dt> |
| |
| <dd> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/LinearAxis.html" target="_blank">LinearAxis</a> class |
| maps numeric data to the axis. You use the <samp class="codeph"><mx:LinearAxis></samp> child |
| tag of the <samp class="codeph"><mx:horizontalAxis></samp> or <samp class="codeph"><mx:verticalAxis></samp> tags |
| to customize the range of values displayed along the axis, and to |
| set the increment between the axis labels of the tick marks. </p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">LogAxis</dt> |
| |
| <dd> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/LogAxis.html" target="_blank">LogAxis</a> class |
| maps numeric data to the axis logarithmically. You use the <samp class="codeph"><mx:LogAxis></samp> child |
| tag of the <samp class="codeph"><mx:horizontalAxis></samp> or <samp class="codeph"><mx:verticalAxis></samp> tags. |
| Labels on the logarithmic axis are even powers of 10.</p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">DateTimeAxis</dt> |
| |
| <dd> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/DateTimeAxis.html" target="_blank">DateTimeAxis</a> class |
| maps time-based values, such as hours, days, weeks, or years, along |
| a chart axis. You use the <samp class="codeph"><mx:DateTimeAxis></samp> tag to |
| define the axis labels.</p> |
| |
| <p>The DateTimeAxis, LogAxis, and LinearAxis |
| are all of type <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/chartClasses/NumericAxis.html" target="_blank">NumericAxis</a>, |
| because they are used to represent numeric values. In many cases, |
| you are required to define only one axis as being a NumericAxis |
| or a CategoryAxis. Flex assumes that all axes not explicitly defined |
| are of type LinearAxis. However, to use decorations such as DataTip |
| labels and legends, you might be required to explicitly define both |
| axes.</p> |
| |
| <p>There are exceptions. For a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/PlotChart.html" target="_blank">PlotChart</a> control, |
| both axes are considered a LinearAxis, because the data point is |
| the intersection of two coordinates. So, you are not required to |
| specify either axis, although you can do so to provide additional |
| settings, such as minimum and maximum values. When you create PieChart |
| controls, you also do not specify either axis, because PieChart |
| controls use a single set of data points to draw wedges that represent |
| a percentage of the whole. In PieChart controls, you define a <samp class="codeph">nameField</samp> on |
| the chart’s data series, rather than a <samp class="codeph">categoryField</samp> or <samp class="codeph">name</samp> on |
| the axes for labels and legends. </p> |
| |
| <p> |
| Each |
| axis can have one or more corresponding <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/AxisRenderer.html" target="_blank">AxisRenderer</a> objects |
| (specified by the <samp class="codeph">horizontalAxisRenderers</samp> or <samp class="codeph">verticalAxisRenderers</samp> properties) |
| that define the appearance of axis labels and tick marks. In addition to |
| defining formats, you can use an AxisRenderer class to customize |
| the value of the axis labels. For more information, see <a href="flx_charts_formatting_chf.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6d_verapache">Formatting |
| charts</a>.</p> |
| |
| <p> |
| |
| |
| |
| |
| The |
| appearance and contents of <em>axis labels</em> are defined by the <samp class="codeph"><mx:horizontalAxis></samp> (x-axis) |
| and <samp class="codeph"><mx:verticalAxis></samp> (y-axis) tags and the |
| renderers for these tags (<samp class="codeph"><mx:AxisRenderer></samp> tags |
| within the <samp class="codeph"><mx:horizontalAxisRenderers></samp> and <samp class="codeph"><mx:verticalAxisRenderers></samp> tags). |
| These tags not only define the data ranges that appear in the chart, |
| but also map the data points to their names and labels. This mapping |
| has a large impact on how the Data Management Service chart renders |
| the values of DataTip labels, axis labels, and tick marks.</p> |
| |
| <p>By |
| default, Flex uses the chart type and orientation to calculate the |
| labels that appear along the x-axis and y-axis of the chart. The |
| labels of a column chart, for example, have the following default |
| values: </p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">The x-axis </dt> |
| |
| <dd> |
| <p> |
| The minimum number |
| of labels is 0, and the maximum is the number of items in the data |
| series that is being charted. </p> |
| |
| </dd> |
| |
| |
| |
| <dt class="dlterm">The y-axis </dt> |
| |
| <dd> |
| <p> |
| |
| The |
| minimum value on the y-axis is small enough for the chart data, |
| and the maximum value is large enough based to accomodate the chart data. </p> |
| |
| <p>For |
| more information about chart axes, see <a href="flx_charts_displayingdata_chd.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c6e_verapache">Working |
| with axes</a>.</p> |
| |
| </dd> |
| |
| |
| </dl> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ff5_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ff5_verapache"><!-- --></a> |
| <h2 class="topictitle2">About charting events</h2> |
| |
| |
| <div> |
| <p>The chart controls include events that accommodate user |
| interaction with data points in charts. These events are described |
| in <a href="flx_charts_eventsandeffects_che.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c66_verapache">Events |
| and effects in charts</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7bff_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7bff_verapache"><!-- --></a> |
| <h2 class="topictitle2">Creating charts in ActionScript</h2> |
| |
| |
| <div> |
| <p> |
| You |
| can create, destroy, and manipulate charts using ActionScript just |
| as you can any other Flex component.</p> |
| |
| <p> |
| When working |
| in Script blocks or in separate ActionScript class files, you must |
| be sure to import all appropriate classes. The following set of |
| import statements defines the most common cases:</p> |
| |
| <pre class="codeblock"> import mx.collections.*; |
| import mx.charts.*; |
| import mx.charts.series.*; |
| import mx.charts.renderers.*; |
| import mx.charts.events.*;</pre> |
| |
| <p>To create a chart in ActionScript, use the <samp class="codeph">new</samp> keyword. |
| You can set properties on the chart object as you would in MXML. |
| You assign a data provider with the <samp class="codeph">dataProvider</samp> property. |
| To add a data series to the chart, you define a new data series |
| of the appropriate type. To apply the series to your chart, use |
| the chart’s <samp class="codeph">series</samp> property. You can specify the |
| category axis settings using the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/CategoryAxis.html" target="_blank">CategoryAxis</a> class. |
| The following example defines a BarChart control with two series:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/CreateChartInActionScript.mxml --> |
| <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="init()" |
| height="600"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| import mx.charts.BarChart; |
| import mx.charts.series.BarSeries; |
| import mx.charts.CategoryAxis; |
| import mx.charts.Legend; |
| |
| [Bindable] |
| public var expenses:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2000, Expenses:1500}, |
| {Month:"Feb", Profit:1000, Expenses:200}, |
| {Month:"Mar", Profit:1500, Expenses:500} |
| ]); |
| |
| public var myChart:BarChart; |
| public var series1:BarSeries; |
| public var series2:BarSeries; |
| public var legend1:Legend; |
| |
| public function init():void { |
| /* Create the chart object and set some |
| basic properties. */ |
| myChart = new BarChart(); |
| myChart.showDataTips = true; |
| myChart.dataProvider = expenses; |
| |
| /* Define the category axis. */ |
| var vAxis:CategoryAxis = new CategoryAxis(); |
| vAxis.categoryField = "Month" ; |
| vAxis.dataProvider = expenses; |
| myChart.verticalAxis = vAxis; |
| |
| /* Add the series. */ |
| var mySeries:Array=new Array(); |
| series1 = new BarSeries(); |
| series1.xField="Profit"; |
| series1.yField="Month"; |
| series1.displayName = "Profit"; |
| mySeries.push(series1); |
| |
| series2 = new BarSeries(); |
| series2.xField="Expenses"; |
| series2.yField="Month"; |
| series2.displayName = "Expenses"; |
| mySeries.push(series2); |
| |
| myChart.series = mySeries; |
| |
| /* Create a legend. */ |
| legend1 = new Legend(); |
| legend1.dataProvider = myChart; |
| |
| /* Attach chart and legend to the display list. */ |
| p1.addElement(myChart); |
| p1.addElement(legend1); |
| } |
| ]]></fx:Script> |
| |
| <s:Panel id="p1" title="BarChart Created in ActionScript"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>This example replaces the existing Array of series with the new |
| series.</p> |
| |
| <p>You can use a similar technique to add data series to your charts |
| rather than replacing the existing ones. The following example creates |
| two ColumnSeries and sets their data providers. It then creates |
| an Array that holds the existing chart series, and pushes the new |
| series into that Array. Finally, it sets the value of the chart’s <samp class="codeph">series</samp> property |
| to be the new Array of series.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AddingSeries.mxml --> |
| <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_fe.send();srv_strk.send();" |
| height="600"> |
| |
| <fx:Declarations> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --> |
| <!-- View source of the following pages to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv_fred" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=FRED"/> |
| <mx:HTTPService id="srv_fe" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=FE"/> |
| <mx:HTTPService id="srv_strk" url="http://examplesserver/chart_examples/stocks-xml.aspx?tickerSymbol=STRK"/> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.charts.series.ColumnSeries; |
| import mx.collections.ArrayCollection; |
| |
| private var series1:ColumnSeries; |
| private var series2:ColumnSeries; |
| |
| private function addMoreSeries():void { |
| if (!series1 || !series2) { |
| series1 = new ColumnSeries(); |
| series1.dataProvider = srv_fe.lastResult.data.result; |
| series1.yField = "close"; |
| series1.xField = "date"; |
| series1.displayName = "FE"; |
| |
| series2 = new ColumnSeries(); |
| series2.dataProvider = srv_strk.lastResult.data.result; |
| series2.yField = "close"; |
| series2.xField = "date"; |
| series2.displayName = "STRK"; |
| |
| var currentSeries:Array = myChart.series; |
| |
| currentSeries.push(series1); |
| currentSeries.push(series2); |
| |
| myChart.series = currentSeries; |
| } |
| } |
| |
| private function resetApp():void { |
| myChart.series = [ series0 ]; |
| series1 = null; |
| series2 = null; |
| } |
| ]]></fx:Script> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:DateTimeAxis dataUnits="days"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries dataProvider="{srv_fred.lastResult.data.result}" |
| id="series0" |
| yField="close" |
| xField="date" |
| displayName="FRED"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| <s:HGroup> |
| <s:Button id="b1" label="Add More Series To Chart" click="addMoreSeries()"/> |
| <s:Button id="b2" label="Reset" click="resetApp()"/> |
| </s:HGroup> |
| </s:Application></pre> |
| |
| <p>By using ActionScript, you can also define a variable number |
| of series for your charts. The following example uses E4X syntax |
| to extract an Array of unique names from the data. It then iterates |
| over this Array and builds a new LineSeries for each name.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/VariableSeries.mxml --> |
| <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();" |
| height="600"> |
| |
| <fx:Script><![CDATA[ |
| import mx.charts.series.LineSeries; |
| import mx.charts.DateTimeAxis; |
| |
| [Bindable] |
| private var myXML:XML = |
| <dataset> |
| <item> |
| <who>Tom</who> |
| <when>08/22/2006</when> |
| <hours>5.5</hours> |
| </item> |
| <item> |
| <who>Tom</who> |
| <when>08/23/2006</when> |
| <hours>6</hours> |
| </item> |
| <item> |
| <who>Tom</who> |
| <when>08/24/2006</when> |
| <hours>4.75</hours> |
| </item> |
| <item> |
| <who>Dick</who> |
| <when>08/22/2006</when> |
| <hours>6</hours> |
| </item> |
| <item> |
| <who>Dick</who> |
| <when>08/23/2006</when> |
| <hours>8</hours> |
| </item> |
| <item> |
| <who>Dick</who> |
| <when>08/24/2006</when> |
| <hours>7.25</hours> |
| </item> |
| <item> |
| <who>Jane</who> |
| <when>08/22/2006</when> |
| <hours>6.5</hours> |
| </item> |
| <item> |
| <who>Jane</who> |
| <when>08/23/2006</when> |
| <hours>9</hours> |
| </item> |
| <item> |
| <who>Jane</who> |
| <when>08/24/2006</when> |
| <hours>3.75</hours> |
| </item> |
| </dataset>; |
| |
| public function initApp():void { |
| var wholist:Array = new Array(); |
| for each(var property:XML in myXML.item.who) { |
| // Create an Array of unique names. |
| if (wholist[property] != property) |
| wholist[property] = property; |
| } |
| |
| // Iterate over names and create a new series |
| // for each one. |
| for (var s:String in wholist) { |
| // Use all items whose name matches s. |
| var localXML:XMLList = myXML.item.(who==s); |
| |
| // Create the new series and set its properties. |
| var localSeries:LineSeries = new LineSeries(); |
| localSeries.dataProvider = localXML; |
| localSeries.yField = "hours"; |
| localSeries.xField = "when"; |
| |
| // Set values that show up in dataTips and Legend. |
| localSeries.displayName = s; |
| |
| // Back up the current series on the chart. |
| var currentSeries:Array = myChart.series; |
| // Add the new series to the current Array of series. |
| currentSeries.push(localSeries); |
| // Add the new Array of series to the chart. |
| myChart.series = currentSeries; |
| } |
| |
| // Create a DateTimeAxis horizontal axis. |
| var hAxis:DateTimeAxis = new DateTimeAxis(); |
| hAxis.dataUnits = "days"; |
| // Set this to false to display the leftmost label. |
| hAxis.alignLabelsToUnits = false; |
| // Take the date in its current format and create a Date |
| // object from it. |
| hAxis.parseFunction = createDate; |
| myChart.horizontalAxis = hAxis; |
| } |
| |
| public function createDate(s:String):Date { |
| // Reformat the date input to create Date objects |
| // for the axis. |
| var a:Array = s.split("/"); |
| |
| // The existing String s is in the format "MM/DD/YYYY". |
| // To create a Date object, you pass "YYYY,MM,DD", |
| // where MM is zero-based, to the Date() constructor. |
| var newDate:Date = new Date(a[2],a[0]-1,a[1]); |
| return newDate; |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart with Variable Number of Series"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" showDataTips="true"/> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c6f_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c6f_verapache"><!-- --></a> |
| <h2 class="topictitle2">Defining chart data</h2> |
| |
| |
| <div> |
| <p> |
| |
| The chart controls have a <samp class="codeph">dataProvider</samp> property |
| that defines the data for the chart. </p> |
| |
| <p> |
| |
| </p> |
| |
| <p>The data provider creates a level of abstraction between Flex |
| components and the data that you use to populate them. You can populate |
| multiple charts from the same data provider, switch data providers |
| for a chart at run time, and modify the data provider so that changes |
| are reflected by all charts using the data provider. </p> |
| |
| <p>You can set the data provider on the chart, in which case all |
| series inherit that data provider. Or you can set the data provider |
| on each series in the chart.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ffb_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ffb_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using chart data</h3> |
| |
| |
| <div> |
| <p>To use the data from a data provider in your chart control, |
| you map the <samp class="codeph">xField</samp> and <samp class="codeph">yField</samp> properties |
| of the chart series to the fields in the data provider. The <samp class="codeph">xField</samp> property |
| defines the data for the horizontal axis, and the <samp class="codeph">yField</samp> property |
| defines the data for the vertical axis. </p> |
| |
| <p>In ActionScript object syntax, assume your data provider has |
| the following structure:</p> |
| |
| <pre class="codeblock"> {month: "Feb", profit: 1000, expenses: 200, amount: 60}</pre> |
| |
| <div class="p">In XML, the data might appear like the following:<pre class="codeblock"><data> |
| <result month="Feb"> |
| <profit>1000</profit> |
| <expenses>200</expenses> |
| <amount>60</amount> |
| </result> |
| </data></pre> |
| |
| </div> |
| |
| <p>You can use the <samp class="codeph">profit</samp> and <samp class="codeph">expenses</samp> fields |
| and ignore the <samp class="codeph">month</samp> field by mapping the <samp class="codeph">xField</samp> property |
| of the series object to one field and the <samp class="codeph">yField</samp> property |
| of the series object to another field, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"> <mx:PlotSeries xField="profit" yField="expenses"/></pre> |
| |
| <p>The result is that each data point is the intersection of the <samp class="codeph">profit</samp> and <samp class="codeph">expenses</samp> fields |
| from the data provider. </p> |
| |
| <p>To place the data points into a meaningful grouping, you can |
| choose a separate property of the data provider as the <samp class="codeph">categoryField</samp>. |
| In this case, to sort each data point by month, you map the <samp class="codeph">month</samp> field |
| to the <samp class="codeph">categoryField</samp> property of the horizontal |
| axis:</p> |
| |
| <pre class="codeblock"> <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{srv.lastResult.data.result}" |
| categoryField="month" |
| /> |
| </mx:horizontalAxis></pre> |
| |
| <p>In some cases, depending on the type of chart and the type of |
| data you are representing, you use either the <samp class="codeph">xField</samp> property |
| or the <samp class="codeph">yField</samp> property to define the data series. |
| In a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/ColumnChart.html" target="_blank">ColumnChart</a> control, |
| for example, the <samp class="codeph">yField</samp> property defines the height |
| of the column. You do not have to specify an <samp class="codeph">xField</samp> property. |
| To get an axis label for each column, you specify a <samp class="codeph">categoryField</samp> property |
| for the <samp class="codeph">horizontalAxis</samp>.</p> |
| |
| <p>The data provider can contain complex objects, or objects within |
| objects. For example, a data provider object can have the following |
| structure:</p> |
| |
| <pre class="codeblock"> {month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}</pre> |
| |
| <p>In this case, you cannot simply refer to the field of the data |
| provider by using a <samp class="codeph">categoryField</samp>, <samp class="codeph">xField</samp>, |
| or similar flat naming convention. Rather, you use the <samp class="codeph">dataFunction</samp> of |
| the series or axis to drill down into the data provider. For more |
| information on working with complex data, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c76_verapache">Structure |
| of chart data</a>.</p> |
| |
| <p>When you use chart data, keep the following in mind:</p> |
| |
| <ul> |
| <li> |
| <p>You usually match a series with a data provider field |
| if you want to display that series. However, this is not always |
| true. If you do not specify an <samp class="codeph">xField</samp> for a ColumnSeries, |
| Flex assumes the index is the value. If you do not specify a <samp class="codeph">yField</samp>, |
| Flex assumes the data provider is a collection of <em>y</em> values, |
| rather than a collection of objects that have <em>y</em> values. For |
| example, the following series renders correctly for a ColumnChart |
| control:</p> |
| |
| <pre class="codeblock"> <mx:ColumnSeries dataProvider="{[1,2,3,4,5]}"/></pre> |
| |
| </li> |
| |
| <li> |
| <p>Some series use only one field from the data provider, while |
| others can use two or more. For example, you specify only a <samp class="codeph">field</samp> property |
| for a PieSeries object, but you can specify an <samp class="codeph">xField</samp> and |
| a <samp class="codeph">yField</samp> for a PlotSeries object and an <samp class="codeph">xField</samp>, <samp class="codeph">yField</samp>, |
| and <samp class="codeph">radiusField</samp> for a BubbleSeries object.</p> |
| |
| </li> |
| |
| <li> |
| <p>Most of the series can determine suitable defaults for their |
| nonprimary dimensions if no field is specified. For example, if |
| you do not explicitly set an <samp class="codeph">xField</samp> for the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/ColumnSeries.html" target="_blank">ColumnSeries</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/LineSeries.html" target="_blank">LineSeries</a>, |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/AreaSeries.html" target="_blank">AreaSeries</a>, |
| Flex maps the data to the chart’s categories in the order in which |
| the data appears in the data provider. Similarly, a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/charts/series/BarSeries.html" target="_blank">BarSeries</a> maps |
| the data to the categories if you do not set a <samp class="codeph">yField</samp>.</p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>For a complete list of the fields that each data series can use, |
| see the data series’s class entry in <em> |
| <a href="http://www.adobe.com/go/learn_flex4_apiref_en" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>. For more information on data providers, |
| see <a href="flx_controls_ctr.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c73_verapache">Data |
| provider controls</a>. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ffc_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ffc_verapache"><!-- --></a> |
| <h3 class="topictitle3">Sources of chart data</h3> |
| |
| |
| <div> |
| <p> |
| You can supply |
| data to a data provider in the following ways:</p> |
| |
| <ul> |
| <li> |
| <p>Define it in a <samp class="codeph"><fx:Script></samp> block.</p> |
| |
| </li> |
| |
| <li> |
| <p>Define it in an external XML, ActionScript, or text file.</p> |
| |
| </li> |
| |
| <li> |
| <p>Return it by using a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/rpc/soap/mxml/WebService.html" target="_blank">WebService</a> call.</p> |
| |
| </li> |
| |
| <li> |
| <p>Return it by using a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/rpc/remoting/mxml/RemoteObject.html" target="_blank">RemoteObject</a> component.</p> |
| |
| </li> |
| |
| <li> |
| <p>Return it by using an <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/rpc/http/mxml/HTTPService.html" target="_blank">HTTPService</a> component.</p> |
| |
| </li> |
| |
| <li> |
| <p>Define it in MXML.</p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>There are some limitations on the structure of the chart data, |
| and how to reference chart data if it is constructed with complex |
| objects. For more information, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c76_verapache">Structure |
| of chart data</a>.</p> |
| |
| <p>For more information on data providers, see <a href="flx_about_dataproviders_ab.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb8_verapache">Data |
| providers and collections</a>.</p> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ffe_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ffe_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using static Arrays as data providers</h4> |
| |
| |
| <div> |
| <p>Using a static Array of objects for the data provider is |
| the simplest approach. You typically create an Array of objects, |
| as the following example shows: </p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayOfObjectsDataProvider.mxml --> |
| <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"> |
| |
| <fx:Script><![CDATA[ |
| [Bindable] |
| private var expenses:Array = [ |
| {Month:"January",Profit:2000,Expenses:1500,Amount:450}, |
| {Month:"February",Profit:1000,Expenses:200,Amount:600}, |
| {Month:"March",Profit:1500,Expenses:500,Amount:300}, |
| {Month:"April",Profit:500,Expenses:300,Amount:500}, |
| {Month:"May",Profit:1000,Expenses:450,Amount:250}, |
| {Month:"June",Profit:2000,Expenses:500,Amount:700} |
| ]; |
| |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can also use MXML to define the content of an Array, as the |
| following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayOfMXMLObjectsDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <fx:Array id="expenses"> |
| <fx:Object |
| Month="January" |
| Profit="2000" |
| Expenses="1500" |
| Amount="450" |
| /> |
| <fx:Object |
| Month="February" |
| Profit="1000" |
| Expenses="200" |
| Amount="600" |
| /> |
| <fx:Object |
| Month="March" |
| Profit="1500" |
| Expenses="500" |
| Amount="300" |
| /> |
| <fx:Object |
| Month="April" |
| Profit="500" |
| Expenses="300" |
| Amount="500" |
| /> |
| <fx:Object |
| Month="May" |
| Profit="1000" |
| Expenses="450" |
| Amount="250" |
| /> |
| <fx:Object |
| Month="June" |
| Profit="2000" |
| Expenses="500" |
| Amount="700" |
| /> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>When defining data in an Array in MXML, be sure to wrap it in |
| a <samp class="codeph"><fx:Declarations></samp> tag.</p> |
| |
| <p>You can also define objects in MXML with a more verbose syntax, |
| as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayOfVerboseMXMLObjects.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <fx:Array id="expenses"> |
| <fx:Object> |
| <fx:Month>January</fx:Month> |
| <fx:Profit>2000</fx:Profit> |
| <fx:Expenses>1500</fx:Expenses> |
| <fx:Amount>450</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>February</fx:Month> |
| <fx:Profit>1000</fx:Profit> |
| <fx:Expenses>200</fx:Expenses> |
| <fx:Amount>600</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>March</fx:Month> |
| <fx:Profit>1500</fx:Profit> |
| <fx:Expenses>500</fx:Expenses> |
| <fx:Amount>300</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>April</fx:Month> |
| <fx:Profit>500</fx:Profit> |
| <fx:Expenses>300</fx:Expenses> |
| <fx:Amount>300</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>May</fx:Month> |
| <fx:Profit>1000</fx:Profit> |
| <fx:Expenses>450</fx:Expenses> |
| <fx:Amount>250</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>June</fx:Month> |
| <fx:Profit>2000</fx:Profit> |
| <fx:Expenses>500</fx:Expenses> |
| <fx:Amount>700</fx:Amount> |
| </fx:Object> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>A disadvantage of using a simple Array as a chart’s data provider |
| is that you can use only the methods of the Array class to manipulate |
| the data. In addition, when you use an Array as a data provider, |
| the data in it must be static. Even if you make the Array bindable, |
| when data in an Array changes, the chart does not reflect those |
| changes. For more robust data manipulation and data binding, you |
| can use a collection for the chart data provider, as described in <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c70_verapache">Using |
| collections as data providers</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c70_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c70_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using collections as data providers</h4> |
| |
| |
| <div> |
| <p> |
| Collections |
| are a more robust data provider mechanism than Arrays. They provide |
| operations that include the insertion and deletion of objects as |
| well as sorting and filtering. Collections also support change notification. |
| An <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ArrayCollection.html" target="_blank">ArrayCollection</a> object |
| provides an easy way to expose an Array as an <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ICollectionView.html" target="_blank">ICollectionView</a> or <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/IList.html" target="_blank">IList</a> interface.</p> |
| |
| <p>As with Arrays, you can use MXML to define the contents of a |
| collection, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayCollectionOfMXMLObjectsDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <s:ArrayCollection id="expenses"> |
| <fx:Object |
| Month="January" |
| Profit="2000" |
| Expenses="1500" |
| Amount="450"/> |
| <fx:Object |
| Month="February" |
| Profit="1000" |
| Expenses="200" |
| Amount="600"/> |
| <fx:Object |
| Month="March" |
| Profit="1500" |
| Expenses="500" |
| Amount="300"/> |
| <fx:Object |
| Month="April" |
| Profit="500" |
| Expenses="300" |
| Amount="500"/> |
| <fx:Object |
| Month="May" |
| Profit="1000" |
| Expenses="450" |
| Amount="250"/> |
| <fx:Object |
| Month="June" |
| Profit="2000" |
| Expenses="500" |
| Amount="700"/> |
| </s:ArrayCollection> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Or you can define an object in MXML using child tags rather than |
| attributes:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayCollectionOfVerboseMXMLObjects.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <s:ArrayCollection id="expenses"> |
| <fx:Object> |
| <fx:Month>January</fx:Month> |
| <fx:Profit>2000</fx:Profit> |
| <fx:Expenses>1500</fx:Expenses> |
| <fx:Amount>450</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>February</fx:Month> |
| <fx:Profit>1000</fx:Profit> |
| <fx:Expenses>200</fx:Expenses> |
| <fx:Amount>600</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>March</fx:Month> |
| <fx:Profit>1500</fx:Profit> |
| <fx:Expenses>500</fx:Expenses> |
| <fx:Amount>300</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>April</fx:Month> |
| <fx:Profit>500</fx:Profit> |
| <fx:Expenses>300</fx:Expenses> |
| <fx:Amount>300</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>May</fx:Month> |
| <fx:Profit>1000</fx:Profit> |
| <fx:Expenses>450</fx:Expenses> |
| <fx:Amount>250</fx:Amount> |
| </fx:Object> |
| <fx:Object> |
| <fx:Month>June</fx:Month> |
| <fx:Profit>2000</fx:Profit> |
| <fx:Expenses>500</fx:Expenses> |
| <fx:Amount>700</fx:Amount> |
| </fx:Object> |
| </s:ArrayCollection> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can create an ArrayCollection object in ActionScript. If |
| you define an ArrayCollection in this way, ensure that you import |
| the mx.collections.ArrayCollection class, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayCollectionOfObjects.mxml --> |
| <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"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| private var expenses:ArrayCollection = new ArrayCollection([ |
| {Month:"January", Profit:2000, Expenses:1500, Amount:450}, |
| {Month:"February", Profit:1000, Expenses:200, Amount:600}, |
| {Month:"March", Profit:1500, Expenses:500, Amount:300}, |
| {Month:"April", Profit:500, Expenses:300, Amount:500}, |
| {Month:"May", Profit:1000, Expenses:450, Amount:250}, |
| {Month:"June", Profit:2000, Expenses:500, Amount:700} |
| ]); |
| ]]></fx:Script> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expenses}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expenses}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>If your data is in an Array, you can pass the Array to the ArrayCollection’s constructor |
| to convert it to an ArrayCollection. The following example creates |
| an Array, and then converts it to an ArrayCollection:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayConvertedToArrayCollection.mxml --> |
| <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"> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| |
| private var expenses:Array = [ |
| {Month:"January", Profit:2000, Expenses:1500, Amount:450}, |
| {Month:"February", Profit:1000, Expenses:200, Amount:600}, |
| {Month:"March", Profit:1500, Expenses:500, Amount:300}, |
| {Month:"April", Profit:500, Expenses:300, Amount:500}, |
| {Month:"May", Profit:1000, Expenses:450, Amount:250}, |
| {Month:"June", Profit:2000, Expenses:500, Amount:700} |
| ]; |
| |
| [Bindable] |
| public var expensesAC:ArrayCollection = |
| new ArrayCollection(expenses); |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expensesAC}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expensesAC}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Similarly, you can use an <samp class="codeph"><s:ArrayCollection></samp> tag |
| to perform the conversion:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ArrayConvertedToArrayCollectionMXML.mxml --> |
| <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"> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| private var expenses:Array = [ |
| {Month:"January", Profit:2000, Expenses:1500, Amount:450}, |
| {Month:"February", Profit:1000, Expenses:200, Amount:600}, |
| {Month:"March", Profit:1500, Expenses:500, Amount:300}, |
| {Month:"April", Profit:500, Expenses:300, Amount:500}, |
| {Month:"May", Profit:1000, Expenses:450, Amount:250}, |
| {Month:"June", Profit:2000, Expenses:500, Amount:700} |
| ]; |
| ]]></fx:Script> |
| |
| <fx:Declarations> |
| <s:ArrayCollection id="expensesAC" source="{expenses}"/> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{expensesAC}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{expensesAC}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:ColumnSeries |
| xField="Month" |
| yField="Expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>The data in ArrayCollections can be bound to the chart’s data |
| provider so that the data can be updated in real-time. The following |
| example creates an object with elapsed time and total memory usage |
| every second. It then pushes that new object onto an ArrayCollection |
| that is used as the data provider for a line chart. As a result, |
| the chart itself updates every second showing memory usage of Adobe<sup>®</sup> Flash<sup>®</sup> Player |
| or Adobe<sup>®</sup> AIR™ over |
| time.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/RealTimeArrayCollection.mxml --> |
| <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" |
| initialize="initTimer()" |
| height="600"> |
| |
| <fx:Script><![CDATA[ |
| import flash.utils.Timer; |
| import flash.events.TimerEvent; |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| public var memoryUsage:ArrayCollection = new ArrayCollection(); |
| |
| public function initTimer():void { |
| // The first parameter in the Timer constructor |
| // is the interval, in milliseconds. |
| // The second parameter is how many times to run (0 is |
| // infinity). |
| var myTimer:Timer = new Timer(1000, 0); |
| |
| // Add the listener for the timer event. |
| myTimer.addEventListener("timer", timerHandler); |
| myTimer.start(); |
| } |
| |
| public function timerHandler(event:TimerEvent):void { |
| var o:Object = new Object(); |
| |
| // Get the number of milliseconds since Flash Player or AIR started. |
| o.time = getTimer(); |
| |
| // Get the total memory Flash Player or AIR is using. |
| o.memory = flash.system.System.totalMemory; |
| trace(o.time + ":" + o.memory); |
| |
| // Add new object to the ArrayCollection, which is bound |
| // to the chart's data provider. |
| memoryUsage.addItem(o); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Memory Usage"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="chart" |
| dataProvider="{memoryUsage}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:LinearAxis/> |
| </mx:horizontalAxis> |
| <mx:verticalAxis> |
| <mx:LinearAxis minimum="5000000"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <mx:LineSeries yField="memory"/> |
| </mx:series> |
| </mx:LineChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Data collections can be paged, which means that data is sent |
| to the client in chunks as the application requests it. But Flex |
| charting controls display all of the data all of the time, by default. |
| As a result, when you use data collections with charts, you should |
| disable the paging features or use non-paged views of the data collection |
| for chart data. </p> |
| |
| <p>For more information on using collections, see <a href="flx_about_dataproviders_ab.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb8_verapache">Data |
| providers and collections</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ffd_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ffd_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using an XML file as a data provider</h4> |
| |
| |
| <div> |
| <p>You can define data provider data in a structured file. |
| The following example shows the contents of the data.xml file:</p> |
| |
| <pre class="codeblock"><data> |
| |
| <result month="Jan-04"> |
| |
| |
| <apple>81768</apple> |
| |
| |
| <orange>60310</orange> |
| |
| |
| <banana>43357</banana> |
| |
| </result> |
| |
| <result month="Feb-04"> |
| |
| |
| <apple>81156</apple> |
| |
| |
| <orange>58883</orange> |
| |
| |
| <banana>49280</banana> |
| |
| </result> |
| </data></pre> |
| |
| <p>You can load the file directly as a source of a Model, as the |
| following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/XMLFileDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <fx:Model id="results" source="../assets/data.xml"/> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{results.result}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries yField="banana" displayName="Banana"/> |
| <mx:LineSeries yField="apple" displayName="Apple"/> |
| <mx:LineSeries yField="orange" displayName="Orange"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can use more complex XML to define the data provider’s data. |
| For example, an XML-based data provider can have nested tags. In |
| that case, however, you must use a <samp class="codeph">dataFunction</samp> to |
| define the fields that the chart uses. For more information, see <a href="flx_charts_intro_chi.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c76_verapache">Structure |
| of chart data</a>.</p> |
| |
| <p>To use an ArrayCollection as the chart’s data provider, you convert |
| the Model to an ArrayCollection, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/XMLFileToArrayCollectionDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <fx:Model id="results" source="../assets/data.xml"/> |
| <s:ArrayCollection id="myAC" |
| source="{ArrayUtil.toArray(results.result)}"/> |
| </fx:Declarations> |
| |
| <fx:Script> |
| import mx.utils.ArrayUtil; |
| </fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{myAC}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries yField="banana" displayName="Banana"/> |
| <mx:LineSeries yField="apple" displayName="Apple"/> |
| <mx:LineSeries yField="orange" displayName="Orange"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ffa_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ffa_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using HTTPService as a data provider</h4> |
| |
| |
| <div> |
| <p>You can define an XML file or any page that returns an |
| XML result as a URL for an <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/rpc/http/mxml/HTTPService.html" target="_blank">HTTPService</a> component. |
| You then bind the HTTPService result directly to the chart’s data |
| provider, as the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/HTTPServiceDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/expenses-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| </fx:Declarations> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{srv.lastResult.data.result}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries |
| yField="profit" |
| displayName="Profit"/> |
| <mx:LineSeries |
| yField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>As with most other non-visual components, be sure to wrap the <samp class="codeph"><mx:HTTPService></samp> tag |
| in a <samp class="codeph"><fx:Declarations></samp> tag.</p> |
| |
| <div class="p">In this example, the target URL returns the following XML:<pre class="codeblock"><data> |
| <result month="Jan"> |
| <profit>2000</profit> |
| <expenses>1500</expenses> |
| <amount>450</amount> |
| </result> |
| <result month="Feb"> |
| <profit>1000</profit> |
| <expenses>200</expenses> |
| <amount>600</amount> |
| </result> |
| <result month="Mar"> |
| <profit>1500</profit> |
| <expenses>500</expenses> |
| <amount>300</amount> |
| </result> |
| </data></pre> |
| |
| </div> |
| |
| <p>To use an ArrayCollection, you cast the HTTPService result, as |
| the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/HTTPServiceToArrayCollectionDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <mx:HTTPService id="srv" |
| url="http://examplesserver/chart_examples/expenses-xml.aspx" |
| useProxy="false" |
| result="myData=ArrayCollection(srv.lastResult.data.result)" |
| /> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| public var myData:ArrayCollection; |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{myData}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries |
| yField="profit" |
| displayName="Profit"/> |
| <mx:LineSeries |
| yField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>You can also set the result format of the HTTPService to E4X, |
| and then use it as a source for an XMLListCollection object, as |
| the following example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/HTTPServiceToXMLListCollection.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/expenses.aspx --> |
| <mx:HTTPService id="srv" |
| url="http://examplesserver/chart_examples/expenses-xml.aspx" |
| resultFormat="e4x" |
| /> |
| |
| <mx:XMLListCollection id="myAC" |
| source="{srv.lastResult.result}" |
| /> |
| |
| </fx:Declarations> |
| <fx:Script><![CDATA[ |
| |
| import mx.utils.ArrayUtil; |
| |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" |
| dataProvider="{myAC}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="@month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries |
| yField="profit" |
| displayName="Profit"/> |
| <mx:LineSeries |
| yField="expenses" |
| displayName="Expenses"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>Another approach is to define the target URL of the HTTPService |
| component as an HTML page that contains data. For example, you might |
| have an HTML page with source that looks like the following:</p> |
| |
| <pre class="codeblock"> <html> |
| <body> |
| <h1>This is a data page</h1> |
| <!-- data starts here --> |
| <entry> |
| <month>Jan</month> |
| <misc>15300</misc> |
| </entry> |
| <entry> |
| <month>Feb</month> |
| <misc>17800</misc> |
| </entry> |
| <entry> |
| <month>Mar</month> |
| <misc>20000</misc> |
| </entry> |
| <!-- data ends here --> |
| </body> |
| </html></pre> |
| |
| <p>In your application, you can extract the data from the HTML page |
| by using regular expressions. You can then assign the resulting |
| string to an XMLList and use it as a data provider, as the following |
| example shows:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/HTMLDataProvider.mxml --> |
| <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()" |
| height="600"> |
| |
| <fx:Declarations> |
| <mx:HTTPService id="serviceInput" |
| resultFormat="text" |
| url="http://examplesserver/chart_examples/testDataPage.html" |
| /> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.events.FlexEvent; |
| import mx.rpc.events.ResultEvent; |
| import mx.rpc.events.FaultEvent; |
| |
| [Bindable] |
| public var chartData:XMLList; |
| private function initApp():void { |
| serviceInput.addEventListener(ResultEvent.RESULT, resultHandler); |
| serviceInput.addEventListener(FaultEvent.FAULT, faultHandler); |
| serviceInput.send(); |
| } |
| |
| public function resultHandler(evt:Event):void { |
| // Extract the XML data from the HTML page. |
| var htmlBlob:String = serviceInput.lastResult.toString(); |
| |
| htmlBlob = htmlBlob.slice( htmlBlob.indexOf("<!-- data starts here -->", 0) + |
| 25, htmlBlob.length ); |
| htmlBlob = htmlBlob.slice( 0, htmlBlob.indexOf("<!-- data ends here -->", 0) ); |
| // Create an XMLList from the extracted XML data. |
| chartData = new XMLList(htmlBlob); |
| } |
| |
| public function faultHandler(evt:Event):void { |
| trace(evt.toString()); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line chart with data extracted from HTML page"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="chart" |
| dataProvider="{chartData}" showDataTips="true"> |
| <mx:series> |
| <mx:LineSeries id="series1" yField="misc" xField="month"/> |
| </mx:series> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis categoryField="month"/> |
| </mx:horizontalAxis> |
| </mx:LineChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| <p>To load the data from a URL on another domain, that target domain |
| must have a crossdomain.xml policy file in place. That policy file |
| must allow the domain on which your Flex application is running |
| to access its data. </p> |
| |
| <p>In this example, if you requested the data page, the data does |
| not render in the brower because it is wrapped in tags that are |
| outside of the HTML specification. If the data were meant to be |
| displayed, it might be surrounded in HTML entities for the left |
| and right angle brackets, like the following example shows:</p> |
| |
| <pre class="codeblock"> <html> |
| <body> |
| <h1>This is a data page</h1> |
| <!-- data starts here --> |
| &lt;entry&gt; |
| &lt;month&gt;Jan&lt;/month&gt; |
| &lt;misc&gt;15300&lt;/misc&gt; |
| &lt;/entry&gt; |
| &lt;entry&gt; |
| &lt;month&gt;Feb&lt;/month&gt; |
| &lt;misc&gt;17800&lt;/misc&gt; |
| &lt;/entry&gt; |
| &lt;entry&gt; |
| &lt;month&gt;Mar&lt;/month&gt; |
| &lt;misc&gt;20000&lt;/misc&gt; |
| &lt;/entry> |
| <!-- data ends here --> |
| </body> |
| </html></pre> |
| |
| <p>In that case, you could replace the HTML entities with angle |
| brackets after the source was loaded, as the following example shows:</p> |
| |
| <pre class="codeblock"> var tagPattern:RegExp = /<[^<>]*>/g; |
| htmlBlob = htmlBlob.replace(tagPattern, ""); |
| |
| var ltPattern:RegExp = /&lt;/g; |
| htmlBlob = htmlBlob.replace(ltPattern, "<"); |
| |
| var gtPattern:RegExp = /&gt;/g; |
| htmlBlob = htmlBlob.replace(gtPattern, ">");</pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS2db454920e96a9e51e63e3d11c0bf65518-7ff8_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf65518-7ff8_verapache"><!-- --></a> |
| <h4 class="topictitle4">Randomly generating chart data</h4> |
| |
| |
| <div> |
| <p>A useful way to create data for use in sample charts is |
| to generate random data. The following example generates test data |
| for use with the chart controls:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/RandomDataGeneration.mxml --> |
| <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()" |
| height="600"> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.*; |
| |
| // Define data provider array for the chart data. |
| [Bindable] |
| public var dataSet:ArrayCollection; |
| |
| // Define the number of elements in the array. |
| public var dsLength:Number = 10; |
| |
| public function initApp():void { |
| // Initialize data provider array. |
| dataSet = new ArrayCollection(genData()); |
| } |
| |
| public function genData():Array { |
| var result:Array = []; |
| |
| for (var i:int=0;i<dsLength;i++) { |
| var localVals:Object = { |
| valueA:Math.random()*100, |
| valueB:Math.random()*100, |
| valueX:Math.random()*100, |
| valueY:Math.random()*100 |
| }; |
| |
| // Push new object onto the data array. |
| result.push(localVals); |
| } |
| return result; |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Plot Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:PlotChart id="myChart" |
| dataProvider="{dataSet}" showDataTips="true"> |
| <mx:series> |
| <mx:PlotSeries |
| xField="valueX" |
| yField="valueY" |
| displayName="Series 1"/> |
| <mx:PlotSeries |
| xField="valueA" |
| yField="valueB" |
| displayName="Series 2"/> |
| </mx:series> |
| </mx:PlotChart> |
| <mx:Legend id="l1" dataProvider="{myChart}"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c76_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c76_verapache"><!-- --></a> |
| <h3 class="topictitle3">Structure of chart data</h3> |
| |
| |
| <div> |
| <p>In most cases, the data that is used as the chart’s data |
| provider is made up of scalar values. For example, objects contain |
| a single set of fields:</p> |
| |
| <pre class="codeblock"> {month: "Aug", close: 45.87, open:25.19},</pre> |
| |
| <p>Or XML data contains a single set of child tags in a flat structure:</p> |
| |
| <pre class="codeblock"> <stock> |
| <month>Aug</month> |
| <close>45.87</close> |
| <open>25.19</open> |
| </stock></pre> |
| |
| <p>In these cases, you assign the data provider’s fields to items |
| in the chart by using the <samp class="codeph">xField</samp> and <samp class="codeph">yField</samp> for |
| the series, or the <samp class="codeph">categoryField</samp> for the axis; |
| for example:</p> |
| |
| <pre class="codeblock"> <mx:ColumnSeries yField="close"/> |
| <mx:CategoryAxis categoryField="month"/></pre> |
| |
| <p>However, the structure of the chart data can be made up of more |
| complex objects, such as objects within objects or XML with nested |
| child tags. For example, you can embed an object within an object:</p> |
| |
| <pre class="codeblock"> {month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}</pre> |
| |
| <p>Or use nested tags in an XML object:</p> |
| |
| <pre class="codeblock"> <stock> |
| <date> |
| <month>Aug</month> |
| </date> |
| <price> |
| <close>45.87</close> |
| <open>25.19</open> |
| </price> |
| </stock></pre> |
| |
| <p>In these cases, you cannot refer to the target data by using |
| the flat naming such as <samp class="codeph">yField="close"</samp>. You also |
| cannot use dot notation. For example, <samp class="codeph">yField="values.close"</samp> or <samp class="codeph">categoryField="data.month"</samp> are |
| not valid. Instead, you must use a <samp class="codeph">dataFunction</samp> method |
| to define which ChartItem fields are populated by the data provider.</p> |
| |
| <p>For the CategoryAxis class, the <samp class="codeph">dataFunction</samp> has |
| the following signature:</p> |
| |
| <pre class="codeblock"> <em>function_name</em>(<em>axis</em>:AxisBase, <em>item</em>:Object):Object</pre> |
| |
| <p>Where <em>axis</em> is the base class for the current axis, and <em>item</em> is |
| the item in the data provider.</p> |
| |
| <p>For the Series class, the <samp class="codeph">dataFunction</samp> has the |
| following signature:</p> |
| |
| <pre class="codeblock"> <em>function_name</em>(<em>series</em>:Series, <em>item</em>:Object, <em>fieldName</em>:String):Object</pre> |
| |
| <p>Where <em>series</em> is a reference to the current series, <em>item</em> is |
| the item in the data provider, and <em>fieldName</em> is the field |
| in the current ChartItem that will be populated.</p> |
| |
| <p>The following example creates two functions that access complex |
| data for both the axis and the series:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/DataFunctionExample.mxml --> |
| <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"> |
| |
| <fx:Script><![CDATA[ |
| import mx.charts.chartClasses.AxisBase; |
| import mx.charts.chartClasses.Series; |
| import mx.charts.CategoryAxis; |
| import mx.charts.chartClasses.IAxis; |
| import mx.charts.chartClasses.ChartBase; |
| import mx.charts.chartClasses.CartesianTransform; |
| |
| // This data provider contains complex, nested objects. |
| [Bindable] |
| public var SMITH:Array = [ |
| {month: "Aug", close: {High:45.87,Low:12.2}, open:25.19}, |
| {month: "Sep", close: {High:45.74,Low:10.23}, open:35.29}, |
| {month: "Oct", close: {High:45.77,Low:12.13}, open:45.19}, |
| {month: "Nov", close: {High:46.06,Low:10.45}, open:15.59}, |
| ]; |
| |
| private function dataFunc(series:Series, item:Object, fieldName:String):Object { |
| trace("fieldName: " + fieldName); |
| if(fieldName == "yValue" && series.id=="highClose") |
| return(item.close.High); |
| else if(fieldName == "yValue" && series.id=="lowClose") |
| return(item.close.Low); |
| else if(fieldName == "xValue") |
| return(item.month); |
| else |
| return null; |
| } |
| private function catFunc(axis:AxisBase, item:Object):Object { |
| for (var s:String in item) { |
| trace(s + ":" + item[s]); |
| } |
| |
| return(item.month); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="ColumnChart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="chart" |
| dataProvider="{SMITH}" |
| showDataTips="true" |
| width="100%" |
| height="100%"> |
| <mx:horizontalAxis> |
| <!-- The dataFunction replaces "categoryField='month'. --> |
| <mx:CategoryAxis id="h1" dataFunction="catFunc"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <!-- The dataFunction replaces yField value, which cannot drill |
| down into an object (close.High is not valid). --> |
| <mx:ColumnSeries id="highClose" |
| displayName="Close (High)" |
| dataFunction="dataFunc"/> |
| |
| <!-- The dataFunction replaces yField value, which cannot drill |
| down into an object (close.Low is not valid). --> |
| <mx:ColumnSeries id="lowClose" |
| displayName="Close (Low)" |
| dataFunction="dataFunc"/> |
| </mx:series> |
| </mx:ColumnChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2db454920e96a9e51e63e3d11c0bf69084-7c02_verapache"><a name="WS2db454920e96a9e51e63e3d11c0bf69084-7c02_verapache"><!-- --></a> |
| <h3 class="topictitle3">Changing chart data at run time</h3> |
| |
| |
| <div> |
| <p>Using ActionScript, you can change a charting control’s |
| data at run time by using a variety of methods. </p> |
| |
| <p>You can change a chart or a series data provider. To do this |
| with an HTTPService as the source of your data provider, you change |
| the URL and then call the HTTPService control’s <samp class="codeph">send()</samp> method |
| again. </p> |
| |
| <div class="p">The following example changes the data provider when the user |
| selects a new ticker symbol from the ComboBox control:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ChangeSrvDataProvider.mxml --> |
| <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"> |
| |
| <fx:Declarations> |
| <!-- View source of the following page to see the structure of the data that Flex uses in this example. --> |
| <mx:HTTPService id="srv" url="http://examplesserver/chart_examples/stocks-xml.aspx"/> |
| <!-- To see data in an HTML table, go to http://examplesserver/chart_examples/stocks.aspx --> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| public function changeDataProvider(event:Event):void { |
| srv.url = "http://examplesserver/chart_examples/stocks-xml.aspx" + |
| "?" + "tickerSymbol=" + event.currentTarget.selectedItem; |
| srv.send(); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:DateTimeAxis dataUnits="days"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries |
| yField="close" xField="date" |
| displayName="Closing Price of {cb1.selectedItem}"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| |
| <s:ComboBox id="cb1" change="changeDataProvider(event)"> |
| <s:ArrayCollection> |
| <fx:String>FRED</fx:String> |
| <fx:String>STRK</fx:String> |
| <fx:String>FE</fx:String> |
| </s:ArrayCollection> |
| </s:ComboBox> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The following example defines the data providers as ArrayCollections. |
| It then binds the data provider to a local variable. The example |
| then toggles the chart’s data provider using that local variable |
| when the user clicks the button.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ChangeDataProvider.mxml --> |
| <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"> |
| |
| <fx:Script> |
| <![CDATA[ |
| 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} |
| ]); |
| |
| [Bindable] |
| public var expenses2:ArrayCollection = new ArrayCollection([ |
| {Month:"Jan", Profit:2400, Expenses:1509, Amount:950}, |
| {Month:"Feb", Profit:3000, Expenses:2200, Amount:400}, |
| {Month:"Mar", Profit:3500, Expenses:1200, Amount:200} |
| ]); |
| |
| [Bindable] |
| public var dp:ArrayCollection = expenses; |
| |
| public function changeDataProvider():void { |
| if (dp==expenses) { |
| dp = expenses2; |
| } else { |
| dp = expenses; |
| } |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" dataProvider="{dp}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis |
| dataProvider="{dp}" |
| categoryField="Month"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:LineSeries |
| yField="Profit" |
| displayName="Profit"/> |
| <mx:LineSeries |
| yField="Expenses" |
| displayName="Expenses"/> |
| <mx:LineSeries |
| yField="Amount" |
| displayName="Amount"/> |
| </mx:series> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| |
| <s:Button id="b1" |
| label="Change Data Provider" |
| click="changeDataProvider()"/> |
| </s:Application></pre> |
| |
| <p>You can add or remove a data point from a series in ActionScript. |
| The following example adds an item to the existing data provider |
| when the user clicks the button:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/AddDataItem.mxml --> |
| <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" |
| xmlns="*" height="600" width="700"> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| public var dpac:ArrayCollection = new ArrayCollection([ |
| {A:2000}, |
| {A:3000}, |
| {A:4000}, |
| {A:4000}, |
| {A:3000}, |
| {A:2000}, |
| {A:6000} |
| ]); |
| |
| public function addDataItem():void { |
| var o:Object = {"A":2000}; |
| dpac.addItem(o); |
| } |
| |
| private function removeItem():void { |
| var i:int = dpac.length; |
| if (i > 0) { |
| dpac.removeItemAt(i - 1); |
| } |
| } |
| ]]></fx:Script> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| showDataTips="true" |
| height="400" |
| width="600" |
| dataProvider="{dpac}"> |
| <mx:series> |
| <mx:ColumnSeries yField="A" displayName="Series 1"/> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| <s:HGroup> |
| <s:Button label="Add Data Item" click="addDataItem();"/> |
| <s:Button label="Remove Data Item" click="removeItem();"/> |
| </s:HGroup> |
| </s:Application></pre> |
| |
| <p>You can also change the fields of a series to change chart data |
| at run time. You do this by changing the value of the data provider |
| field (such as <samp class="codeph">xField</samp> or <samp class="codeph">yField</samp>) |
| on the series object. To get a reference to the series, you use |
| the series’ <samp class="codeph">id</samp> property or the chart control’s |
| series index. The following example toggles the data series when |
| the user clicks on the Change Series button:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/ToggleSeries.mxml --> |
| <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" |
| initialize="initApp();" |
| height="600"> |
| |
| <fx:Script><![CDATA[ |
| [Bindable] |
| public var dataSet:Array; |
| public var myStates:Array = |
| ["Wisconsin","Ohio","Arizona","Penn"]; |
| public var curSeries:String; |
| public function initApp():void { |
| var newData:Array = []; |
| for(var i:int=0;i<myStates.length;i++) { |
| newData[i] = { |
| Apples: Math.floor(Math.random()*150), |
| Oranges: Math.floor(Math.random()*150), |
| myState: myStates[i] |
| } |
| } |
| dataSet = newData; |
| curSeries = "apples"; |
| } |
| public function changeData():void { |
| var series:Object = myChart.series[0]; |
| if (curSeries == "apples") { |
| curSeries="oranges"; |
| series.yField = "Oranges"; |
| series.displayName = "Oranges"; |
| series.setStyle("fill",0xFF9933); |
| } else { |
| curSeries="apples"; |
| series.yField = "Apples"; |
| series.displayName = "Apples"; |
| series.setStyle("fill",0xFF0000); |
| } |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Column Chart"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ColumnChart id="myChart" |
| dataProvider="{dataSet}" showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:CategoryAxis dataProvider="{dataSet}" |
| categoryField="myState"/> |
| </mx:horizontalAxis> |
| <mx:series> |
| <mx:ColumnSeries yField="Apples" displayName="Apples"> |
| <mx:fill> |
| <mx:SolidColor color="0xFF0000"/> |
| </mx:fill> |
| </mx:ColumnSeries> |
| </mx:series> |
| </mx:ColumnChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| |
| <s:Button id="b1" label="Toggle Series" click="changeData()"/> |
| |
| </s:Application></pre> |
| |
| <p>You can take advantage of data binding to make your chart reflect |
| data changes in real time. The following example uses a Timer to |
| define the intervals at which it checks for new data. Because the |
| chart’s data provider is bound to an ArrayCollection, whenever a |
| new data point is added to the collection, the chart is automatically |
| updated.</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/WatchingCollections.mxml --> |
| <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" |
| initialize="initData();" |
| height="600"> |
| |
| <fx:Declarations> |
| <mx:SeriesInterpolate id="interp" |
| elementOffset="0" |
| duration="300" |
| minimumElementDuration="0" |
| /> |
| </fx:Declarations> |
| |
| <fx:Script><![CDATA[ |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| public var dataSet:ArrayCollection; |
| |
| [Bindable] |
| public var revenue:Number = 100; |
| |
| private var t:Timer; |
| |
| private function initData():void { |
| dataSet = new ArrayCollection(); |
| t = new Timer(500); |
| } |
| private function startApp():void { |
| t.addEventListener(TimerEvent.TIMER, addData); |
| t.start(); |
| } |
| |
| private function addData(e:Event):void { |
| /* Add a maximum of 100 data points before user has to click |
| the Start button again. */ |
| if (dataSet.length > 100) { |
| stopApp(); |
| } |
| |
| dataSet.addItem( { revenue: revenue } ); |
| revenue += Math.random() * 10 - 5; |
| } |
| |
| private function stopApp():void { |
| t.stop(); |
| t.removeEventListener(TimerEvent.TIMER, addData); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel title="Line Chart"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <mx:LineChart id="myChart" dataProvider="{dataSet}"> |
| <mx:series> |
| <mx:LineSeries |
| yField="revenue" |
| showDataEffect="{interp}" |
| displayName="Revenue"/> |
| </mx:series> |
| <mx:horizontalAxis> |
| <mx:LinearAxis autoAdjust="false"/> |
| </mx:horizontalAxis> |
| </mx:LineChart> |
| <mx:Legend dataProvider="{myChart}"/> |
| </s:Panel> |
| |
| <s:HGroup> |
| <s:Button id="b1" label="Start" click="startApp()"/> |
| <s:Button id="b2" label="Stop" click="stopApp()"/> |
| </s:HGroup> |
| |
| </s:Application></pre> |
| |
| <p>You can also use system values to update charts at run time. |
| The following example tracks the value of the <samp class="codeph">totalMemory</samp> property |
| in a LineChart control in real time:</p> |
| |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- charts/MemoryGraph.mxml --> |
| <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" |
| initialize="initTimer()" |
| height="600"> |
| |
| <fx:Script><![CDATA[ |
| import flash.utils.Timer; |
| import flash.events.TimerEvent; |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| public var memoryUsage:ArrayCollection = new ArrayCollection(); |
| |
| public function initTimer():void { |
| /* The first parameter in the Timer constructor |
| is the interval, in milliseconds. The second |
| parameter is how many times to run (0 is |
| infinity). */ |
| var myTimer:Timer = new Timer(1000, 0); |
| |
| /* Add the listener for the timer event. */ |
| myTimer.addEventListener("timer", timerHandler); |
| myTimer.start(); |
| } |
| |
| public function timerHandler(event:TimerEvent):void { |
| var o:Object = new Object(); |
| |
| /* Get the number of milliseconds since Flash |
| Player started. */ |
| o.time = getTimer(); |
| |
| /* Get the total memory Flash Player is using. */ |
| o.memory = flash.system.System.totalMemory; |
| |
| /* Add new object to the ArrayCollection, which |
| is bound to the chart's data provider. */ |
| memoryUsage.addItem(o); |
| } |
| ]]></fx:Script> |
| |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Panel id="p1" title="Memory Usage"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <mx:LineChart id="chart" |
| dataProvider="{memoryUsage}" |
| showDataTips="true"> |
| <mx:horizontalAxis> |
| <mx:LinearAxis/> |
| </mx:horizontalAxis> |
| |
| <mx:verticalAxis> |
| <mx:LinearAxis minimum="5000000"/> |
| </mx:verticalAxis> |
| <mx:series> |
| <fx:Array> |
| <mx:LineSeries yField="memory"/> |
| </fx:Array> |
| </mx:series> |
| </mx:LineChart> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS19f279b149e7481c3655c44d12c32932481-8000_verapache"><a name="WS19f279b149e7481c3655c44d12c32932481-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using charts in MX-only applications</h2> |
| |
| |
| <div> |
| <p>An MX-only application is an application that does not |
| use any classes from the spark.swc file in its library path. The |
| main application’s root tag is the MX Application class, and no |
| components from the Spark component set are used.</p> |
| |
| <p>You can use the Flex charting controls in MX-only applications. |
| However, some charting components such as the BarChart and ColumnChart |
| controls, use Spark components by default. As a result, to use charts |
| in MX-only applications, you must apply the MXCharts.css theme to |
| your application. This convenience theme file replaces the use of |
| the Spark Label classes with the MX Label class for the <samp class="codeph">labelClass</samp> style |
| property.</p> |
| |
| <div class="p">To apply the MXCharts.css theme to your application on the command |
| line, use the theme compiler option, as the following example shows:<pre class="codeblock">mxmlc -theme+=../frameworks/projects/charts/MXCharts.css</pre> |
| |
| </div> |
| |
| <p>If you set the <samp class="codeph">compatibility-version</samp> compiler |
| option to 4.0.0, Flex applies the MXCharts.css theme by default.</p> |
| |
| </div> |
| |
| <p>Adobe, Adobe Flash Platform 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> |
