2 Replies Latest reply on May 15, 2007 8:59 AM by Mr_Fin

    Newbie transition effects woes

    Mr_Fin
      Hi All,
      I know this is probably a common mistake but i can't find anything on the forums and a larger search of the web has proved fruitless. My problem is simply described I have a panel resource, which contains a databound chart but when the data provider is updated the chart jumps to display the new data before the transition effect plays. I would obviously like the datahide event / transition to play without this jerking and as these transitions are basic slides I can't find out why the data would be redrawn before the transition.

      If it would help to see the App in action as is you can view it Here <- link deleted
      Please help if you can the panel shown above is the top-left in the app. also any further help would be greatfull recieved.

      Yours Desperately

      Fin
        • 1. Re: Newbie transition effects woes
          Mr_Fin Level 1
          the code for the panel in question is below:

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Panel xmlns:mx=" http://www.adobe.com/2006/mxml"
          xmlns="*"
          title="CRI Score By Response Type"
          creationComplete="init();"
          >
          <!-- creationComplete="initPanel()" -->
          <mx:Metadata>
          [Event("contextListChange")]
          </mx:Metadata>
          <mx:Script>
          <![CDATA[
          import mx.controls.Alert;
          import mx.charts.chartClasses.ChartBase;
          import mx.events.FlexEvent;
          import mx.controls.ToolTip;
          import mx.controls.Button;
          [Bindable]
          public var responsesByType:Array;
          [Bindable]
          public var slicedCentreData2:Array;

          [Bindable]
          public var selectedContext:Object;

          protected function contextChange(rankPlace:Object):void
          {
          trace("Bar hit"+rankPlace.context_id);
          selectedContext = rankPlace;
          dispatchEvent(new Event("contextChange"));
          }

          private var chartToolTip:String;
          private var gridToolTip:String;
          private var selectedIndex:String;

          [Bindable]
          private var togToolTip:String = "";

          [Bindable]
          private var chartDGToolTip:String = "";

          [Bindable]
          public var pcToolTip:String = "";

          import flash.events.KeyboardEvent;
          import mx.events.DataGridEvent;

          private function init():void
          {
          this.tabIndex=120;
          //Show Score chare by default
          toggle.selectedIndex = 0;

          var chartButton:Button = Button(toggle.getChildAt(0));
          var gridButton:Button = Button(toggle.getChildAt(1));
          var chartButtonGroup:Button = Button(toggle.getChildAt(2));
          var gridButtonGroup:Button = Button(toggle.getChildAt(3));

          chartButton.toolTip = "View Score breakdown in chart";
          gridButton.toolTip = "View Score breakdown in grid" ;
          chartButtonGroup.toolTip = "View group breakdown in chart" ;
          gridButtonGroup.toolTip = "View group breakdown in grid";
          }
          ]]>
          </mx:Script>
          <mx:SeriesSlide
          id="slideUp"
          duration="2000"
          direction="up"
          minimumElementDuration="20"
          elementOffset="30"
          />
          <mx:SeriesSlide
          id="slideDown"
          duration="2000"
          direction="down"
          minimumElementDuration="20"
          elementOffset="30"
          />
          <mx:SeriesSlide
          id="slideLeft"
          duration="2000"
          direction="left"
          minimumElementDuration="20"
          elementOffset="30"
          />
          <mx:SeriesSlide
          id="slideRight"
          duration="2000"
          direction="right"
          minimumElementDuration="20"
          elementOffset="30"
          />
          <mx:SeriesInterpolate
          id="interpolateIn"
          duration="2000"
          minimumElementDuration="200"
          elementOffset="0"
          />
          <mx:Fade
          id="fadeOut"
          duration="2000"
          alphaFrom="1.0"
          alphaTo="0.0"
          />
          <mx:Fade
          id="fadeIn"
          duration="2000"
          alphaFrom="0.0"
          alphaTo="1.0"/>
          <mx:ViewStack id="vs1" width="100%" height="100%">
          <mx:VBox id="chartVBox" width="100%" height="100%" icon="@Embed('icon_chart.png')" toolTip="View in Chart" hideEffect="Fade" showEffect="Fade">
          <mx:ColumnChart
          id="columnchart1"
          dataProvider="{responsesByType}"
          showDataTips="true"
          fontSize="14"
          fontFamily="PorscheNewsGothic"
          color="#666666"
          width="100%"
          height="100%"
          type="overlaid"
          maxColumnWidth="12"
          >
          <mx:verticalAxis>
          <mx:LinearAxis
          title="Scores Achieved - %"
          minimum="0"
          maximum="100"
          interval="10"
          maximumLabelPrecision="1"
          />
          </mx:verticalAxis>
          <mx:horizontalAxis>
          <mx:CategoryAxis categoryField="responseType"/>
          </mx:horizontalAxis>
          <mx:series>
          <mx:ColumnSeries
          dataProvider="{responsesByType}"
          xField="responseType"
          yField="reportCRI"
          displayName="reportCRI"
          showDataEffect="slideUp"
          hideDataEffect="slideDown"
          itemRenderer="utils.ColorColumnChartRenderer"
          />
          <mx:LineSeries
          dataProvider="{responsesByType}"
          form="curve"
          xField="responseType"
          yField="globalCRI"
          displayName="GlobalCRI"
          hideDataEffect="fadeOut"
          showDataEffect="fadeIn"
          lineSegmentRenderer="mx.charts.renderers.ShadowLineRenderer"
          >
          <mx:lineStroke>
          <mx:Stroke weight="1" color="#82C9EB"/>
          </mx:lineStroke>
          </mx:LineSeries>
          </mx:series>
          </mx:ColumnChart>
          </mx:VBox>
          <mx:VBox width="100%" height="100%" icon="@Embed('icon_grid.png')" toolTip="View in Grid" hideEffect="Fade" showEffect="Fade">
          <mx:DataGrid id="dgRankingRequest" x="10" y="10" dataProvider="{responsesByType}" width="100%" height="100%" fontFamily="PorscheNewsGothic" fontSize="12" >
          <mx:columns>
          <mx:DataGridColumn headerText="Type" dataField="responseType"/>
          <mx:DataGridColumn headerText="Percent" dataField="reportCRI"/>
          <mx:DataGridColumn headerText="Sample" dataField="reportCount"/>
          </mx:columns>
          </mx:DataGrid>
          </mx:VBox>
          <mx:VBox id="chartVBox3" width="100%" height="100%" icon="@Embed('icon_group.png')" toolTip="View in Chart" hideEffect="Fade" showEffect="Fade">
          <mx:BarChart
          id="barchart2"
          dataProvider="{slicedCentreData2}"
          showDataTips="true"
          fontSize="14"
          fontFamily="PorscheNewsGothic"
          color="#666666"
          width="100%"
          paddingRight="4"
          height="100%"
          type="overlaid"
          maxBarWidth="12"
          >
          <mx:verticalAxis>
          <mx:CategoryAxis dataProvider="{slicedCentreData2}" categoryField="label"/>
          </mx:verticalAxis>
          <mx:series>
          <mx:BarSeries
          yField="label"
          xField="avg_score"
          displayName="Average"
          itemRenderer="utils.AverageLineRenderer"
          />
          <mx:BarSeries
          displayName="CRI Rating"
          yField="label"
          xField="score"
          itemRenderer="utils.ColorBarChartRenderer"
          showDataEffect="slideRight"
          hideDataEffect="slideLeft"
          />
          </mx:series>
          </mx:BarChart>
          </mx:VBox>
          <mx:VBox id="gridVBox4" width="100%" height="100%" icon="@Embed('icon_grid.png')" toolTip="View in Grid" hideEffect="Fade" showEffect="Fade">
          <mx:DataGrid id="dgRankingRequest2" x="10" y="10" dataProvider="{slicedCentreData2}" width="100%" height="100%" fontFamily="PorscheNewsGothic" fontSize="12" >
          <mx:columns>
          <mx:DataGridColumn headerText="Centre ID" dataField="context_id" width="60"/>
          <mx:DataGridColumn headerText="Centre" dataField="label" width="60"/>
          <mx:DataGridColumn headerText="Score" dataField="score"/>
          <mx:DataGridColumn headerText="Sample Size" dataField="sample"/>
          </mx:columns>
          </mx:DataGrid>
          </mx:VBox>
          </mx:ViewStack>
          <mx:ControlBar>
          <mx:ToggleButtonBar dataProvider="{vs1}" id="toggle" toolTip="{togToolTip}"/>
          </mx:ControlBar>
          </mx:Panel>

          The data provider is very small and only returns the basic data shown in the datagrid behind.

          • 2. Re: Newbie transition effects woes
            Mr_Fin Level 1
            never mind it seems to have sorted itself out :)