1 Reply Latest reply on Apr 21, 2011 10:40 AM by digsafe

    itemRollOver for chart in AS3?

    digsafe

      I need to have a custom function fire on rollOver  for the individual wedges of a pie chart.

      I can accomplish this if I instantiate the chart in the main Flex application like this;

       

      <mx:PieChart id="pieChart"

                       dataProvider="{dataProviderName}"
                      itemRollOver="pieWedgeRoll(event);"
                       >
              <mx:series>
                  <mx:PieSeries
                      field="myField"
                    >
                  </mx:PieSeries>
              </mx:series>
      </mx:PieChart>

       

       

      However, when I instantiate a pie chart using ActionScript like this;

       

          <fx:Script>
              <![CDATA[

                     var myPieSeries:PieSeries = new PieSeries();
                      myPieSeries.field="myField"


                      var myChart:PieChart = new PieChart();
                     myChart.itemRollOver="pieWedgeRoll(event);"
                      myChart.dataProvider = dataProviderName


                      myChart.series = [myPieSeries];
                      myGroup.addElement(myChart);

          ]]>
          </fx:Script>

       

      Flex throws and undefined property error.

      Can someone please help??

      Thanks.

        • 1. Re: itemRollOver for chart in AS3?
          digsafe Level 1

          Figured it out. Am still thinking like an AS2 coder.

           

          Hope this helps someone in the future.

           

          Cheers.

           

          <?xml version="1.0" encoding="utf-8"?>


          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      creationComplete="makePieChart();">
            
             <fx:Script>
                <![CDATA[
                   //---imports---
                   import mx.charts.PieChart;
                   import mx.charts.events.ChartEvent;
                   import mx.charts.events.ChartItemEvent;
                   import mx.charts.series.PieSeries;
                   import mx.charts.series.items.PieSeriesItem;

           

                   [Bindable]
                   public var chartDP:Array = [
                      {wedgeName:'Wedge 0', wedgeAmt:65},
                      {wedgeName:'Wedge 1', wedgeAmt:70},
                      {wedgeName:'Wedge 2', wedgeAmt:22},
                      {wedgeName:'Wedge 3', wedgeAmt:8}
                   ];
                   //---build pie---
                   private function makePieChart():void{
                     
                      var myPieSeries:PieSeries = new PieSeries();
                      myPieSeries.field = "wedgeAmt";
                      // Remove default dropshadow filter.
                      myPieSeries.filters = [];
                     
                      // Define pie chart.
                      var myChart:PieChart = new PieChart();
                      myChart.height = 210;
                      myChart.width = 210;
                      myChart.name = "myPieName";
                      myChart.addEventListener(ChartItemEvent.ITEM_ROLL_OVER, overFunction);
                      myChart.addEventListener(ChartItemEvent.ITEM_CLICK, clickFunction);
                      myChart.showDataTips = true;
                      myChart.dataProvider = chartDP;
                      myChart.series = [myPieSeries];
                      //---custom functions---
                      function overFunction(evt:ChartItemEvent):void {
                         var psi:PieSeriesItem = evt.hitData.chartItem as PieSeriesItem;
                         trace("An OVER event occurred: "+psi.item.wedgeName);
                      }
                      function clickFunction(evt:ChartItemEvent):void {
                         trace("A CLICK event occurred: "+evt.target.name);
                      }
                      // Add myChart to the display list.
                      myGroup.addElement(myChart);
                   }
                  
                ]]>
             </fx:Script>
            
             <s:VGroup id="myGroup" />