BaseElement

From Openzet

Jump to: navigation, search

Contents

Introduction

BaseElement class is a custom class that provides data extraction of a chart control. By specifying maxDataNum and fieldName properties, you can extract chart’s data based on mouse pointer’s position.
You can access the extracted data through BaseElement component’s selectData property.

Property

maxDataNum Number of data to extract from a chart.

fieldName Chart’s categoryField name.

selectData Extracted data using maxDataNum property value.

Usage

Basic usage is the same with mx.charts.Legend.
With targetChart property, you can specify the target chart.

This control is used as an annotationElement for a chart control.
For maxDataNum property, specify the maximum number of data to extract.
For fieldName property, specify the categoryField of a chart control.
If you click on a chart using this element, data extraction area will be displayed automatically.
Selected area’s data can be easily accessed through selectData property.
Other chart controls can also refer to BaseElement’s selectData for its dataProvider. 

<mx:CandlestickChart id="candlestickchart" 
    width="100%" height="100%" 
    showDataTips="true" dataProvider="{expensesAC}">            
    <mx:annotationElements>
        <chartClasses:BaseElement id="candlestickBaseElement" width="100%" height="100%"
            maxDataNum="9" fieldName="Date" />
    </mx:annotationElements>
    <mx:verticalAxis>
        <mx:LinearAxis id="vaxis1" baseAtZero="false" />
    </mx:verticalAxis>
    <mx:horizontalAxis>
        <mx:CategoryAxis id="haxis1" categoryField="Date" />
    </mx:horizontalAxis>
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer axis="{haxis1}" canDropLabels="true" />
    </mx:horizontalAxisRenderers>
    <mx:series>
        <mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
            fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
    </mx:series>
</mx:CandlestickChart>

Application Example

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<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 medalsAC:ArrayCollection = new ArrayCollection( [
        { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
        { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
        { Country: "Korea", Gold: 52, Silver:31, Bronze: 39 },
        { Country: "a", Gold: 25, Silver:21, Bronze: 35 },
        { Country: "e", Gold: 45, Silver:43, Bronze: 12 },
        { Country: "w", Gold: 34, Silver:42, Bronze: 52 },
        { Country: "qw", Gold: 57, Silver:31, Bronze: 21 },
        { Country: "Japan", Gold: 22, Silver:21, Bronze: 21 },
        { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
 
    [Bindable]
    private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
    ]]>
    </mx:Script>
 
    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8" />
    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6" />
    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6" />
 
    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2" />
    <mx:Stroke id="s2" color="0xCCCCCC" weight="2" />
    <mx:Stroke id="s3" color="0xFFCC66" weight="2" />
 
    <!-- Define custom colors for the candles. -->
    <mx:SolidColor id="up" color="green" alpha=".8" />
    <mx:SolidColor id="down" color="red" alpha=".8" />
 
    <!-- Define custom Stroke for the candle wick. -->
    <mx:Stroke id="wick" color="black" weight="2" />
 
    <!-- Define custom Stroke for the candle box. -->
    <mx:Stroke id="box" color="black" weight="1" />
 
    <mx:Panel title="Magnifying glass Example" 
        height="100%" width="100%" layout="vertical">
        <mx:HBox width="100%" height="100%">
            <mx:LineChart id="column" 
                width="100%" height="100%" 
                showDataTips="true" 
                dataProvider="{medalsAC}">
 
                <mx:horizontalAxis>
                    <mx:CategoryAxis categoryField="Country" />
                </mx:horizontalAxis>
 
                <mx:annotationElements>
                    <chartClasses:BaseElement id="lineBaseElement" width="100%" height="100%"
                        maxDataNum="4" fieldName="Country" />
                </mx:annotationElements>    
 
                <mx:series>
                    <mx:LineSeries xField="Country" yField="Gold" 
                        displayName="Gold" fill="{sc1}" stroke="{s1}" />
                    <mx:LineSeries xField="Country" yField="Silver" 
                        displayName="Silver" fill="{sc2}" stroke="{s2}" />
                    <mx:LineSeries xField="Country" yField="Bronze" 
                        displayName="Bronze" fill="{sc3}" stroke="{s3}" />
                </mx:series>
            </mx:LineChart>
 
            <mx:LineChart id="detailLineChart" 
                width="100%" height="100%" 
                showDataTips="true" 
                dataProvider="{lineBaseElement.selectData}">
 
                <mx:horizontalAxis>
                    <mx:CategoryAxis categoryField="Country" />
                </mx:horizontalAxis>
 
                <mx:series>
                    <mx:LineSeries xField="Country" yField="Gold" 
                        displayName="Gold" fill="{sc1}" stroke="{s1}" />
                    <mx:LineSeries xField="Country" yField="Silver" 
                        displayName="Silver" fill="{sc2}" stroke="{s2}" />
                    <mx:LineSeries xField="Country" yField="Bronze" 
                        displayName="Bronze" fill="{sc3}" stroke="{s3}" />
                </mx:series>
            </mx:LineChart>
        </mx:HBox>
 
        <mx:HBox width="100%" height="100%">
            <mx:CandlestickChart id="candlestickchart" 
                width="100%" height="100%" 
                showDataTips="true" dataProvider="{expensesAC}">            
 
                <mx:annotationElements>
                    <chartClasses:BaseElement id="candlestickBaseElement" width="100%" height="100%"
                        maxDataNum="9" fieldName="Date" />
                </mx:annotationElements>
 
                <mx:verticalAxis>
                    <mx:LinearAxis id="vaxis1" baseAtZero="false" />
                </mx:verticalAxis>
 
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="haxis1" categoryField="Date" />
                </mx:horizontalAxis>
 
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{haxis1}" canDropLabels="true" />
                </mx:horizontalAxisRenderers>
 
                <mx:series>
                    <mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
                        fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
                </mx:series>
            </mx:CandlestickChart>
 
            <mx:CandlestickChart id="detailcandlestickchart" 
                width="100%" height="100%" 
                showDataTips="true"
                dataProvider="{candlestickBaseElement.selectData}">
 
                <mx:verticalAxis>
                    <mx:LinearAxis id="vaxis2" baseAtZero="false" />
                </mx:verticalAxis>
 
                <mx:horizontalAxis>
                    <mx:CategoryAxis id="haxis2" categoryField="Date" />
                </mx:horizontalAxis>
 
                <mx:horizontalAxisRenderers>
                    <mx:AxisRenderer axis="{haxis2}" canDropLabels="true" />
                </mx:horizontalAxisRenderers>
 
                <mx:series>
                    <mx:CandlestickSeries openField="Open" highField="High" lowField="Low" closeField="Close"
                        fill="{up}" declineFill="{down}" stroke="{wick}" boxStroke="{box}" />
                </mx:series>
            </mx:CandlestickChart>
        </mx:HBox>
    </mx:Panel>
</mx:Application>
Image:BaseElementExample.jpg
Retrieved from "http://www.openzet.org/wiki_en/index.php/BaseElement"
Personal tools
Participation
Silverlight