Handling user interactions with charts

Chart controls accept many kinds of user interactions, from moving the mouse over a data point to clicking or double-clicking on that data point. You can create an event handler for each of these interactions and use the Event object in that handler to access the data related to that interaction. For example, if a user clicks on a column in a ColumnChart control, you can access that column’s data in the click event handler of that chart.

The chart controls support the mouse events that are inherited from the UIComponent class: mouseMove, mouseOver, mouseUp, mouseDown, and mouseOut. These events are of type MouseEvent. In addition, the base class for all chart controls, ChartBase, adds support for the the ChartEvent and ChartItemEvent events.

The ChartItemEvent class defines events that are specific to the chart components, such as when the user clicks a data item in a chart. The ChartEvent class defines events that occur when the user clicks or double-clicks on a chart control, but not on a chart item in that chart control.

The following table describes the ChartEvent event types:

Chart event type

Description

chartClick

Broadcast when the user clicks the mouse button while the mouse pointer is over a chart but not on a chart item.

chartDoubleClick

Broadcast when the user double-clicks the mouse button while the mouse pointer is over a chart but not on a chart item.

The following table describes the ChartItemEvent event types:

Chart data event type

Description

change

Dispatched when the selected item or items changes in the chart.

itemClick

Broadcast when the user clicks the mouse button while over a data point.

itemDoubleClick

Broadcast when the user double-clicks the mouse button while over a data point.

itemMouseDown

Broadcast when the mouse button is down while over a data point.

itemMouseMove

Broadcast when the user moves the mouse pointer while over a data point.

itemMouseUp

Broadcast when the user releases the mouse button while over a data point.

itemRollOut

Broadcast when the closest data point under the mouse pointer changes.

itemRollOver

Broadcast when the user moves the mouse pointer over a new data point.

In addition to the ChartEvent and ChartItemEvent classes, there is also the LegendMouseEvent. This class defines events that are broadcast when the user clicks on legend items or mouses over them.

About chart events

Chart events are triggered when the user clicks or double-clicks the mouse button while the mouse pointer is over a chart control, but not over a chart item in that chart control. These events are dispatched only if the hit data set is empty.

Chart events are of type ChartEvent. Because ChartEvent events are part of the charts package, and not part of the events package, you must import the appropriate classes in the mx.charts.events package to use a ChartEvent event.

The following example logs a ChartEvent when you click or double-click the chart control, but only if you are not over a chart item or within it’s range, as determined by its mouseSensitivity property.

<?xml version="1.0"?>
<!-- charts/BasicChartEvent.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600" width="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>
    
    <fx:Script><![CDATA[
        import mx.charts.events.ChartEvent;

        private function chartEventHandler(event:ChartEvent):void {
            /*
             * The ChartEvent will only be dispatched if the mouse is _not_ over a 
             * chart item or if it is outside of the range defined by the 
             * mouseSensitivity property.
            */
            ta1.text += "Event of type " + event.type + " was triggered.\n";        
        }
    ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    
    s|Panel {
        paddingLeft:5;
        paddingRight:5;
        paddingTop:5;
        paddingBottom:5;
    }
  </fx:Style>
  
  <s:Panel title="Chart click events">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <s:HGroup>
         <mx:PlotChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true"
            mouseSensitivity="10"
            doubleClickEnabled="true"
            chartClick="chartEventHandler(event)"
            chartDoubleClick="chartEventHandler(event)">
            <mx:series>
               <mx:PlotSeries 
                    xField="expenses" 
                    yField="profit"
                    displayName="Plot 1"/>
               <mx:PlotSeries 
                    xField="amount" 
                    yField="expenses"
                    displayName="Plot 2"/>
               <mx:PlotSeries 
                    xField="profit" 
                    yField="amount" 
                    displayName="Plot 3"/>
            </mx:series>
         </mx:PlotChart>
         <s:TextArea id="ta1" width="150" height="300"/>
       </s:HGroup>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>

</s:Application>

The executing SWF file for the previous example is shown below:

About chart data events

Chart data events are triggered only when the user moves the mouse pointer over a data point, whereas UIComponent events are triggered by any mouse interaction with a control.

The chart data events are of type ChartItemEvent. Because ChartItemEvent events are part of the charts package, and not part of the events package, you must import the appropriate classes in the mx.charts.events package to use a ChartItemEvent event.

The following example opens an alert when the user clicks a data point (a column) in the chart:

<?xml version="1.0"?>
<!-- charts/DataPointAlert.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
      <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
      <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
      <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import mx.controls.Alert;
     import mx.charts.events.ChartItemEvent;

     public function myHandler(e:ChartItemEvent):void {
        Alert.show("Chart data was clicked");
     }
  ]]></fx:Script>
  
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Clickable Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        itemClick="myHandler(event)"
        dataProvider="{srv.lastResult.data.result}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries yField="expenses" displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

Using the HitData object

Flex dispatches a ChartItemEvent object for each chart data event such as when you click on an item in the series. In addition to the standard target and type properties that all Event objects have, Flex adds the hitData property to the ChartItemEvent object. This property is an object instance of the HitData class. The hitData property contains information about the data point that is closest to the mouse pointer at the time of the mouse event.

The item property of the HitData object refers to the data point. You can use that property to access its value by its name, as the previous example shows. The HitDatax and y properties refer to the screen coordinates of the data point.

Only data points within the radius determined by the mouseSensitivity property can trigger an event on that data point. For more information, see Changing mouse sensitivity.

The following example uses the itemDoubleClick event handler to display HitData information for data points in a column chart when the user clicks on a column. Because each column in the ColumnChart control is associated with a single data point value, clicking the mouse anywhere in a column displays the same information for the x and y coordinates.

<?xml version="1.0"?>
<!-- charts/HitDataOnClick.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send();init()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import mx.charts.events.ChartItemEvent;

     // Define the event handler.
     public function myListener(e:ChartItemEvent):void {
        ti1.text = e.hitData.item.expenses;
        ti2.text = String(e.hitData.x) + ", " + String(e.hitData.y);
     }

     // Define event listeners when the application initializes.
     public function init():void {
        myChart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK, myListener);
     }
  ]]></fx:Script>
  
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Accessing HitData Object in Event Handlers">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        doubleClickEnabled="true"
        showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries yField="expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <s:Form width="100%">
        <!--Define a form to display the event information.-->
        <s:FormItem label="Expenses:">
           <s:TextInput id="ti1" width="100%"/>
        </s:FormItem>
        <s:FormItem label="x/y:">
           <s:TextInput id="ti2" width="100%"/>
        </s:FormItem>
     </s:Form>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

Getting chart elements

The HitData object accesses the chart’s ChartItem objects. These objects represent data points on the screen. In addition to providing access to the data of data points, ChartItem objects provide information about the size and position of graphical elements that make up the chart. For example, you can get the x and y positions of columns in a ColumnChart.

The following example uses a semitransparent Canvas container to highlight the data point that the user clicks on with the mouse. The application also accesses the ChartItem object to get the current value to display in a ToolTip on that Canvas:

<?xml version="1.0"?>
<!-- charts/ChartItemObjectAccess.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send();init()"
    height="600">

    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Style>
     @namespace mx "library://ns.adobe.com/flex/mx";
     
     mx|ToolTip {
        fontSize:24;
     }
     mx|ColumnChart {
        gutterLeft: 54;
     }
  </fx:Style>

  <fx:Script><![CDATA[
     import mx.core.IFlexDisplayObject;
     import mx.charts.events.ChartItemEvent;
     import mx.charts.series.items.ColumnSeriesItem;
     import mx.charts.series.ColumnSeries;
     import mx.effects.Move;
     import mx.charts.HitData;

     public var m:mx.effects.Move;
     public var hitData:mx.charts.HitData;
     public var chartItem:ColumnSeriesItem;
     public var renderer:IFlexDisplayObject;
     public var series:ColumnSeries;

     public var chartItemPoint:Point;
     public var highlightBoxPoint:Point;
     public var leftAdjust:Number;

     private function init():void {
        m = new Move(highlightBox);

        /* This is used to adjust the x location of
           highlightBox to account for the left gutter width. */
        leftAdjust = myChart.getStyle("gutterLeft") - 14;
        trace("leftAdjust: " + leftAdjust);
     }

     private function overData(event:ChartItemEvent):void {

        hitData = event.hitData;
        chartItem = ColumnSeriesItem(hitData.chartItem);
        renderer = chartItem.itemRenderer;
        series = ColumnSeries(hitData.element);

        /* Add 10 pixels to give it horizontal overlap. */
        highlightBox.width = renderer.width * 2 + 10;

        /* Add 20 pixels to give it vertical overlap. */
        highlightBox.height = renderer.height + 20;

        highlightBoxPoint = new Point(highlightBox.x,
            highlightBox.y);

        /* Convert the ChartItem's pixel values from local 
           (relative to the component) to global (relative 
           to the stage). This enables you to place the Canvas 
           container using the x and y values of the stage. */
        chartItemPoint = myChart.localToGlobal(new Point(chartItem.x, chartItem.y));

        /* Define the parameters of the move effect and play the effect. */
        m.xTo = chartItemPoint.x + leftAdjust;
        m.yTo = chartItemPoint.y;
        m.duration = 500;
        m.play();

        highlightBox.toolTip = "$" + chartItem.yValue.toString();
     }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel id="p1" title="Highlighted Columns">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        itemClick="overData(event)" 
        mouseSensitivity="0">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                displayName="Expenses" 
                yField="expenses"/>
           <mx:ColumnSeries 
                displayName="Profit"  
                yField="profit"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>

  <!-- Define the canvas control that will be used as a highlight. -->
  <mx:Canvas id="highlightBox" 
        y="0" x="0" 
        backgroundColor="0xFFFF00"
        alpha=".5"/>
</s:Application>

The executing SWF file for the previous example is shown below:

For information about changing the appearance of ChartItem objects, see Skinning ChartItem objects.

Getting data with coordinates

When you create charts, you can use the coordinates on the screen to get the nearest data point or data points, or conversely, to pass the data point and get the coordinates.

The findDataPoints() and localToData() methods take coordinates and return data. The findDataPoints() method returns a HitData object. The localToData() method returns an Array of the data.

You can also pass the data itself and get the coordinates with the dataToLocal() method.

Using the findDataPoints() method

You can use the chart control’s findDataPoints() method to get an Array of HitData objects by passing in x and y coordinates. If the coordinates do not correspond to the location of a data point, the findDataPoints() method returns null. Otherwise, the findDataPoints() method returns an Array of HitData objects.

The findDataPoints() method has the following signature:

findDataPoints(x:Number, y:Number):Array

The following example creates a PlotChart control and records the location of the mouse pointer as the user moves the mouse over the chart. It uses the findDataPoints() method to get an Array of HitData objects, and then displays some of the first object’s properties.

<?xml version="1.0"?>
<!-- charts/FindDataPoints.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import mx.charts.HitData;

     public function handleMouseMove(e:MouseEvent):void {
        // Use coordinates to get HitData object of 
        // current data point.
        var hda:Array = 
            chart.findDataPoints(e.currentTarget.mouseX, 
            e.currentTarget.mouseY);
        if (hda[0]) {
           ta.text = "Found data point " + 
                hda[0].chartItem.index + " (x/y):" + 
                Math.round(hda[0].x) + "," + 
                Math.round(hda[0].y) + "\n";
           ta.text += "Expenses:" + hda[0].item.expenses;
        } else {
           ta.text = "No data point found  (x/y):" +
                Math.round(e.currentTarget.mouseX) + 
                "/" + Math.round(e.currentTarget.mouseY);
        }
     }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Plot Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:PlotChart id="chart" 
        mouseMove="handleMouseMove(event)"
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"
        mouseSensitivity="5">
        <mx:series>
           <mx:PlotSeries 
                xField="profit" 
                yField="expenses"/>
        </mx:series>
     </mx:PlotChart>
  </s:Panel>
  <s:TextArea id="ta" width="300" height="50"/>
</s:Application>

The executing SWF file for the previous example is shown below:

Using the localToData() method

The localToData() method takes a Point object that represents the x and y coordinates you want to get the data for and returns an Array of data values, regardless of whether any data items are at or near that point. You call this method on the series.

The following example creates a Point object from the mouse pointer’s location on the screen and displays the data values associated with that point:

<?xml version="1.0"?>
<!-- charts/LocalToData.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">
     
    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/stocks-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/stocks.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     public var p:Point;

     private function updateDetails(e:MouseEvent):void {
        p = new Point(myChart.mouseX, myChart.mouseY);
        mpos.text = "(" + p.x + "," + p.y + ")";

        var d:Array = series1.localToData(p);
        var da:Date = new Date(d[0]);     
        
        // Round y coordinate value on column to two places.
        var v:Number = int((d[1])*100)/100;
        
        dval.text = "(" + daxis.formatForScreen(da) + ", " + v + ")";        

        p = series1.dataToLocal(d[0], d[1]);
        dpos.text ="(" + Math.floor(p.x) + ", " + Math.floor(p.y) + ")";
     }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        mouseMove="updateDetails(event)"
        showDataTips="true">
        <mx:horizontalAxis> 
           <mx:DateTimeAxis id="daxis" dataUnits="days"/> 
        </mx:horizontalAxis> 
        <mx:series>
           <mx:ColumnSeries id="series1"
                xField="date" 
                yField="close"
                displayName="Close"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>

  <s:Form width="300">
     <s:FormItem label="Mouse Position:">
        <s:Label id="mpos"/>
     </s:FormItem>
     <s:FormItem label="Data Position:">
        <s:Label id="dpos"/>
     </s:FormItem>
     <s:FormItem label="Data:">
        <s:Label id="dval"/>
     </s:FormItem>
  </s:Form>

</s:Application>

The executing SWF file for the previous example is shown below:

The chart type determines how coordinates are mapped, and how many values are returned in the Array. The values returned are typically numeric values.

In a chart that is based on the CartesianChart class (for example, a BarChart or ColumnChart control), the first item in the returned Array is the value of the x-coordinate along the horizontal axis, and the second item is the value of the y-coordinate along the vertical axis.

In a chart based on the PolarChart class (such as PieChart), the returned Array maps the coordinates to a set of polar coordinates—an angle around the center of the chart, and a distance from the center. Those values are mapped to data values that use the first (angular) and second (radial) axes of the chart.

Using the dataToLocal() method

The dataToLocal() method converts a set of values tox and y coordinates on the screen. The values you give the method are in the “data space” of the chart; this method converts these values to coordinates. The data space is the collection of all possible combinations of data values that a chart can represent.

The number and meaning of arguments passed to the dataToLocal() method depend on the chart type. For CartesianChart controls, such as the BarChart and ColumnChart controls, the first value is used to map along the x axis, and the second value is used to map along the y axis.

For PolarChart controls, such as the PieChart control, the first value maps to the angle around the center of the chart, and the second value maps to the distance from the center of the chart along the radius.

The coordinates returned are based on 0,0 being the upper-left corner of the chart. For a ColumnChart control, for example, the height of the column is inversely related to the x coordinate that is returned.

Changing mouse sensitivity

You use the mouseSensitivity property of the chart control to determine when the mouse pointer is considered to be over a data point; for example:

<mx:ColumnChart id="chart" dataProvider="{dataSet}" mouseSensitivity="30">

The current data point is the nearest data point to the mouse pointer that is less than or equal to the number of pixels that the mouseSensitivity property specifies.

The default value of the mouseSensitivity property is 3 pixels. If the mouse pointer is 4 or more pixels away from a data point, Flex does not trigger a ChartItemEvent (of types such as itemRollOver or itemClick). Flex still responds to events such as mouseOver and click by generating a ChartEvent object of type chartClick or chartDoubleClick.

The following example initially sets the mouseSensitivity property to 20, but lets the user change this value with the HSlider control:

<?xml version="1.0"?>
<!-- charts/MouseSensitivity.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Mouse Sensitivity">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:PlotChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true"
        mouseSensitivity="{mySlider.value}">
        <mx:series>
           <mx:PlotSeries 
                xField="expenses" 
                yField="profit"
                displayName="Plot 1"/>
           <mx:PlotSeries 
                xField="amount" 
                yField="expenses"
                displayName="Plot 2"/>
           <mx:PlotSeries 
                xField="profit" 
                yField="amount" 
                displayName="Plot 3"/>
        </mx:series>
     </mx:PlotChart>

     <s:HGroup>
         <mx:Legend dataProvider="{myChart}"/>
         <s:VGroup>
             <s:Label text="Mouse Sensitivity:"/>
             <mx:HSlider id="mySlider"
                minimum="0"
                maximum="300"
                value="20"
                dataTipPlacement="top"
                tickColor="black"
                snapInterval="1"
                tickInterval="20"
                labels="['0','300']"
                allowTrackClick="true"
                liveDragging="true"/>
        </s:VGroup>
      </s:HGroup>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

You can use the mouseSensitivity property to increase the area that triggers DataTip events or emits chart-related events. If the mouse pointer is within the range of multiple data points, Flex chooses the closest data point. For DataTip events, if you have multiple DataTip controls enabled, Flex displays all DataTip controls within range. For more information, see Showing multiple DataTip objects.

Disabling interactivity

You can make the series in a chart ignore all mouse events by setting the interactive property to false for that series. The default value is true. This lets you disable mouse interactions for one series while allowing it for another.

The following example disables interactivity for events on the first and third PlotSeries objects:

<?xml version="1.0"?>
<!-- charts/DisableInteractivity.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Disable Interactivity">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:PlotChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:series>
           <mx:PlotSeries 
                xField="expenses" 
                yField="profit"
                displayName="Plot 1" 
                interactive="false"/>
           <mx:PlotSeries 
                xField="amount" 
                yField="expenses"
                displayName="Plot 2"/>
           <mx:PlotSeries 
                xField="profit" 
                yField="amount" 
                displayName="Plot 3" 
                interactive="false"/>
        </mx:series>
     </mx:PlotChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

Disabling the series interactivity has the following results:

  • The series does not show DataTip controls.

  • The series does not generate a hitData structure on any chart data event.

  • The series does not return a hitData structure when you call the findDataPoints() method on the chart.