Flex Examples » showDataTips

Toggling data tip targets on a PieChart in Flex

Peter deHaan — Sun, 14 Sep 2008 05:19:59 +0000

In a previous example, “Toggling data tips on a PieChart in Flex”, we saw how you could toggle data tips on a Flex PieChart control by setting the showDataTips property.

The following example shows how you can toggle data tip targets on a Flex PieChart control by setting the showDataTipTargets style.

Full code after the jump.

View MXML

View source is enabled in the following example.

You can also set the showDataTipTargets style in an external .CSS file or block, as seen in the following example:

View MXML





    
        PieChart {
            showDataTipTargets: false;
        }

Or, you can set the showDataTipTargets style using ActionScript, as seen in the following example:

View MXML

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML





    
        
                        
                        
                        
                        
                        
                        
                    ;
                dp = new XMLListCollection(productsXML.product);

                checkBox = new CheckBox();
                checkBox.label = "showDataTipTargets:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.setStyle("showDataTipTargets", true);
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                var legend:Legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.percentWidth = 100;

                var panelControlBar:ControlBar = new ControlBar();
                panelControlBar.percentWidth = 100;
                panelControlBar.addChild(legend);

                var panel:Panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(panelControlBar);
                addChild(panel);
            }

            private function checkBox_change(evt:Event):void {
                pieChart.setStyle("showDataTipTargets", checkBox.selected);
            }
        ]]>

Toggling data tips on a PieChart in Flex

Peter deHaan — Sun, 14 Sep 2008 05:08:14 +0000

The following example shows how you can toggle data tips on a Flex PieChart control by setting the showDataTips property.

Full code after the jump.

View MXML

View source is enabled in the following example.

You can also set the showDataTips using ActionScript, as seen in the following example:

Due to popular demand, here is the “same” example in a more ActionScript friendly format:





    
        
                        
                        
                        
                        
                        
                        
                    ;
                dp = new XMLListCollection(productsXML.product);

                checkBox = new CheckBox();
                checkBox.label = "showDataTips:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.selected = true;
                checkBox.addEventListener(Event.CHANGE, checkBox_change)

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                pieSeries = new PieSeries();
                pieSeries.field = "@data";
                pieSeries.nameField = "@label";
                pieSeries.filters = [];

                pieChart = new PieChart();
                pieChart.dataProvider = dp;
                pieChart.showDataTips = true;
                pieChart.percentWidth = 100;
                pieChart.percentHeight = 100;
                pieChart.series = [pieSeries];

                var legend:Legend = new Legend();
                legend.dataProvider = pieChart;
                legend.direction = TileDirection.HORIZONTAL;
                legend.setStyle("horizontalGap", 100);
                legend.percentWidth = 100;

                var panelControlBar:ControlBar = new ControlBar();
                panelControlBar.percentWidth = 100;
                panelControlBar.addChild(legend);

                var panel:Panel = new Panel();
                panel.styleName = "opaquePanel";
                panel.percentWidth = 100;
                panel.percentHeight = 100;
                panel.addChild(pieChart);
                panel.addChild(panelControlBar);
                addChild(panel);
            }

            private function checkBox_change(evt:Event):void {
                pieChart.showDataTips = checkBox.selected;
            }
        ]]>

Creating clustered, stacked, overlaid, and 100% Bar charts in Flex 3

Peter deHaan — Fri, 12 Oct 2007 06:19:03 +0000

The following example shows the differences between a clustered, stacked, 100%, and overlaid Bar chart in Flex 3.

Full code after the jump.

View MXML

View source is enabled in the following example.

Sorting date columns in a DataGrid

Peter deHaan — Sun, 12 Aug 2007 15:51:01 +0000

Here’s an example of sorting a column of dates in a Flex DataGrid. The dates start out as Strings (such as “04/14/1980″) so you create a custom sortCompareFunction on that DataGrid column which converts the strings to dates so Flex will sort the dates in sequential order (as oppsed to string order). Hope that helps somebody out there.

I also created a little tooltip on the date column which shows the dates in a somewhat more readable form (“April 14 1980″) using the DataGridColumn object’s showDataTips and dataTipFunction properties.

Full code after the jump.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            import mx.utils.ObjectUtil;
 
            private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
                /* Date.parse() returns an int, but
                   ObjectUtil.dateCompare() expects two
                   Date objects, so convert String to
                   int to Date. */
                var dateA:Date = new Date(Date.parse(itemA.dob));
                var dateB:Date = new Date(Date.parse(itemB.dob));
                return ObjectUtil.dateCompare(dateA, dateB);
            }
 
            private function date_dataTipFunc(item:Object):String {
                return dateFormatter.format(item.dob);
            }
        ]]>
    
 
     id="arrColl">
        >
            >
                 name="User A" dob="04/14/1980" />
                 name="User B" dob="01/02/1975" />
                 name="User C" dob="12/30/1977" />
                 name="User D" dob="10/27/1968" />
            >
        >
    >
 
     id="dateFormatter" formatString="MMMM D, YYYY" />
 
     id="dataGrid" dataProvider="{arrColl}">
        >
             dataField="name"
                    headerText="Name:" />
 
             dataField="dob"
                    headerText="Date of birth:"
                    sortCompareFunction="date_sortCompareFunc"
                    showDataTips="true"
                    dataTipFunction="date_dataTipFunc" />
        >
    >
 
>

View source is enabled in the following example.

Downloading files in Flex using the FileReference class

Peter deHaan — Sat, 28 Jul 2007 17:20:53 +0000

OK, enough embedding examples, lets take a look at downloading files using Flash Player’s FileReference class (flash.net.FileReference). This example demonstrates a basic usage of the FileReference class within Flex, allowing users to download a file from the server. This example also shows how you can use data tips in the DataGrid control by setting the data grid column’s showDataTips property to true and specifying a value for the dataTipField column.

Full code after the jump.

The following example downloads a ZIP file when the user presses the Button control. You can mouse over the items in the DataGrid control’s “Type” column to see additional event information.

Download source (ZIP, 3K) | View MXML

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    
        
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import flash.net.FileReference;
 
            [Bindable]
            [Embed('assets/disk.png')]
            private var diskIcon:Class;
 
            [Bindable]
            private var arrColl:ArrayCollection;
 
            /* URL of the file to download. */
            private const FILE_URL:String = "http://blog.flexexamples.com/wp-content/uploads/FileReference_download_test/bin/srcview/FileReference_download_test.zip";
 
            private var fileRef:FileReference;
            private var urlReq:URLRequest;
 
            private function init():void {
                /* Initialize the array collection to an empty collection. */
                arrColl = new ArrayCollection();
 
                /* Set up the URL request to download the file specified by the FILE_URL variable. */
                urlReq = new URLRequest(FILE_URL);
 
                /* Define file reference object and add a bunch of event listeners. */
                fileRef = new FileReference();
                fileRef.addEventListener(Event.CANCEL, doEvent);
                fileRef.addEventListener(Event.COMPLETE, doEvent);
                fileRef.addEventListener(Event.OPEN, doEvent);
                fileRef.addEventListener(Event.SELECT, doEvent);
                fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
                fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
                fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
                fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
            }
 
            private function doEvent(evt:Event):void {
                /* Create shortcut to the FileReference object. */
                var fr:FileReference = evt.currentTarget as FileReference;
 
                /* Add event order and type to the DataGrid control. */
                arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});
 
                try {
                    /* Update the Model. */
                    fileRefModel.creationDate = fr.creationDate;
                    fileRefModel.creator = fr.creator;
                    fileRefModel.modificationDate = fr.modificationDate;
                    fileRefModel.name = fr.name;
                    fileRefModel.size = fr.size;
                    fileRefModel.type = fr.type;
                    /* Display the Text control. */
                    txt.visible = true;
                } catch (err:*) {
                    /* uh oh, an error of sorts. */
                }
            }
 
            private function downloadSourceCodeZip():void {
                /* Clear existing array collection. */
                arrColl = new ArrayCollection();
                /* Hide the Text control. */
                txt.visible = false;
                /* Begin download. */
                fileRef.download(urlReq);
            }
 
            private function showAlert(item:Object):void {
                Alert.show(item.eventString, item.type);
            }
        ]]>
    
 
     id="fileRefModel">
        >
            >{""}>
            >{""}>
            >{""}>
            >{""}>
            >{""}>
            >{""}>
        >
    >
 
     id="downloadBtn"
            label="Download example source code"
            icon="{diskIcon}"
            click="downloadSourceCodeZip();"
            toolTip="{FILE_URL}"
            height="40" />
 
     id="debug"
            dataProvider="{arrColl}"
            width="{downloadBtn.width}"
            rowCount="5"
            rowHeight="22"
            itemClick="showAlert(event.currentTarget.selectedItem)">
        >
             dataField="data"
                    headerText="#"
                    width="20" />
             dataField="type"
                    headerText="Type"
                    showDataTips="true"
                    dataTipField="eventString" />
        >
    >
 
     id="txt" condenseWhite="true" visible="false">
        >
            creationDate: {fileRefModel.creationDate}
            creator: {fileRefModel.creator}
            modificationDate: {fileRefModel.modificationDate}
            name: {fileRefModel.name}
            size: {fileRefModel.size}
            type: {fileRefModel.type}
        >
    >
 
>

View source enabled in the following example.