From Openzet

Contents 1 ZetCartesianChart 1.1 Introduction 1.2 Property 1.3 Usage 1.4 Application Example

ZetCartesianChart

Introduction

ZetCartesianChart expands on the functionality of CartesianChart class to serve as a chart.
This class provides series filtering capability by allowing users to select series they want to see.

Property

checkBoxHorizontalAlign Specifies horizontal alignment of SeriesBox control. Default value is left.

checkBoxYPoint Specifies inner y position of SeriesBox control in a chart. Default value is 0.

checkBoxHorizontalGap Specifies gap between SeriesBox and CheckBox. Default value is 5 in pixels. You can set this value by mxml and actionscript.

showMarker Specifies whether to show Marker or not. Datatype of this property is Boolean and its default value is true.

Usage

For dataprovider of ZetCartesianChart class, we specify the same kind of dataProvider for normal chart controls, which is ArrayCollection.
Also Text instances in VisibleCheckBox a control set their text values through displayName property of each Series.
You can specify the value of showSeriesBox property whether to show or not VisibleCheckBox instance.

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true">
 <chartClasses:series>
 <mx:ColumnSeries yField="data2" displayName="Data2" />
 <mx:LineSeries yField="data1" displayName=”Data1" />
 </chartClasses:series>
</chartClasses:ZetCartesianChart>

You can adjust horizontal alignment of VisibleCheckBox control by setting checkBoxHorizontalAlign property to “left”, “center” and “right.”

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true" checkBoxHorizontalAlign ="center">
 <chartClasses:series>
 <mx:ColumnSeries yField="data2" displayName=”Data2" />
 <mx:LineSeries yField="data1" displayName="Data1" />
 </chartClasses:series>
</chartClasses:ZetCartesianChart>

You can adjust y position of VisibleCheckBox instances by specifying checkBoxYPoint property value.
The dataype of this property is Number.

<chartClasses:ZetCartesianChart dataProvider="{sampleAC}" showSeriesBox="true" checkBoxYPoint="5">
 <chartClasses:series>
 <mx:ColumnSeries yField="data2" displayName="Data2" />
 <mx:LineSeries yField="data1" displayName="Data1" />
 </chartClasses:series>
</chartClasses:ZetCartesianChart>

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 dataProvider="{sampleAC}" showSeriesBox="true">
 <chartClasses:series>
 <mx:ColumnSeries yField="data2" displayName="Data2" />
 <mx:LineSeries yField="data1" displayName="Data1" />
 </chartClasses:series>
</chartClasses:ZetCartesianChart>
</mx:Application>