<?xml version="1.0" encoding="utf-8"?>
<!--
Ofir Shemesh - http://shemesh.wordpress.com
BMC Software, 2008
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns="*" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.charts.chartClasses.Series;
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.charts.series.items.LineSeriesItem;
            import mx.charts.HitData;
            import mx.charts.events.ChartItemEvent;
            import mx.collections.ArrayCollection;

            [Bindable]
            private var DP1:ArrayCollection = new ArrayCollection( [
                { Month: "Jan", Profit: 2000, Expenses: 700, Column: 100},
                { Month: "Feb", Profit: 1000, Expenses: 985, Column: 980},
                { Month: "Mar", Profit: 1500, Expenses: 500, Column: 1400},
                { Month: "Apr", Profit: 1800, Expenses: 1785, Column: 1780},
                { Month: "Apr", Profit: 1800, Expenses: 100, Column: 1000},
                { Month: "May", Profit: 2400, Expenses: 2385, Column: 2410 } ]);
            
            /* dataPonit array */
            [Bindable] private var dataPointsArray:Array;
            
            private function itemRollOverHandler(event:ChartItemEvent):void {
                // first find all the data points under the mouse.
                dataPointsArray = event.currentTarget.findDataPoints(event.currentTarget.mouseX, event.currentTarget.mouseY);
                
                if(dataPointsArray.length > 1){
                    // in case we have more then one HitData under the mouse.
                    for each(var h:HitData in dataPointsArray){
                        // format each HitData text.
                        h.dataTipFunction = formatDisplayText;
                    }
                    event.target.dataTipMode = "single";
                    event.target.dataTipFunction = dtFunc;
                }else{
                    // revert to default.
                    chart.dataTipFunction = null;
                }
            }
            
            private function  formatDisplayText(h:HitData):String{
                var value:String;
                if(h.chartItem is LineSeriesItem)
                    value = new String((h.chartItem as LineSeriesItem).yValue);
                else if(h.chartItem is ColumnSeriesItem)
                    value= new String((h.chartItem as ColumnSeriesItem).yValue);
                return Series(h.element).displayName + ": " + value;
            }
            
            private function dtFunc(h:HitData):String {
                var p:Point;
                if(h.chartItem is LineSeriesItem){
                    p = new Point((h.chartItem as LineSeriesItem).x, (h.chartItem as LineSeriesItem).y);
                }
                else if(h.chartItem is ColumnSeriesItem){
                    p = new Point((h.chartItem as ColumnSeriesItem).x, (h.chartItem as ColumnSeriesItem).y);
                }
                
                var m:Array = (h.element as Series).localToData(p);
                var tip:String = "<b>"+m[0]+"</b>\n";
                
                for each(var h:HitData in dataPointsArray){
                    tip += h.displayText+"\n";
                }
                return tip;
            }
        ]]>
    </mx:Script>
    
    <mx:Panel width="80%" height="80%" title="dataTips are grouped into one" >
        <mx:LineChart id="chart" height="100%" width="100%"
            showDataTips="true" dataProvider="{DP1}"
            mouseSensitivity="10"
            itemRollOver="itemRollOverHandler(event)"  >
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>
            <mx:series>
               <mx:ColumnSeries yField="Column" displayName="Column"
                       columnWidthRatio="1" />
                <mx:LineSeries yField="Profit" displayName="Green Sreies"
                    interpolateValues="true" />
                <mx:LineSeries yField="Expenses" displayName="Blue Series"
                    interpolateValues="true" />
            </mx:series>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>