ChartControlPanel
From Openzet
Contents |
ChartControlPanel
Introduction
Custom control that enables users to change series property of chart controls. This controls allows users to change series type of a chart control, by providing it with an id of the chart component in question. br>
Yet this functionality is not compatible with Piechart’s series and is only for basic series of CartesianChart control.
Also this control has another limitation of customizing series type when it comes to a BarSeries, when there are multiple series in a chart control. Series change to a BarSeries is only available when there is only one series in a chart control with which this component is bound.
Property
selectedSeries Holds a reference to the currently selected series.
seriesStatusWidth Specifies the width of TextInput which displays information about each Series.
settingButtonLabel label value of the setting button.
Usage
Basic usage is the same with mx.charts.Legend.
You can specify the chart by setting targetChart property’s value with its id.
Once you bind this control with a chart component, this control shows TextInput and ComboBox instances to take control of a chart you want to adjust. When you click on a series in a chart control, TextInput instance shows the displayName of the series in its textField.
Then you can go ahead and choose which series to replace the currently selected series.
<chartClasses:ZetCartesianChart id="sampleChart" dataProvider="{sampleAC}" showSeriesBox="true">
<chartClasses:series>
<mx:ColumnSeries yField="data2" displayName="Data2" />
<mx:LineSeries yField="data1" displayName=”Data1" />
</chartClasses:series>
</chartClasses:ZetCartesianChart>
<chartClasses:ChartControlPanel targetChart="{sampleChart}" />
Application Example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:chartClasses="org.openzet.charts.chartClasses.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var sampleAC:ArrayCollection = new ArrayCollection([
{index:1, data1:100, data2:200},
{index:2, data1:120, data2:300},
{index:3, data1:110, data2:210},
{index:4, data1:140, data2:220},
{index:5, data1:90, data2:210},
{index:6, data1:100, data2:240},
{index:7, data1:130, data2:210},
{index:8, data1:140, data2:200},
{index:9, data1:110, data2:180},
{index:10, data1:100, data2:220}]);
]]>
</mx:Script>
<chartClasses:ZetCartesianChart id="sampleChart" dataProvider="{sampleAC}" showSeriesBox="true">
<chartClasses:series>
<mx:ColumnSeries yField="data2" displayName="Data2" />
<mx:LineSeries yField="data1" displayName="Data1" />
</chartClasses:series>
</chartClasses:ZetCartesianChart>
<chartClasses:ChartControlPanel targetChart="{sampleChart}" settingButtonLabel="setting"/>
</mx:Application>

