2 Replies Latest reply on Apr 30, 2009 6:07 AM by Gregory Lafrance

    Multiple chart effects conflicting with each other

    Thorn, Inc.

      Hello all!  

       

      Issue Description:

       

      -  Two chart series of two different series types (mx:ColumnSeries and mx:LineSeries)
      -  Trying to run two different chart data effects (mx:SeriesZoom and mx:SeriesSlide) simultaneously 
      -  Having some sort of conflict

       

      My application is more complex than this, but this is a good example of the type of thing that's happening on our chart when the data provider changes:

       

      1)  Please compile and run the following code.  
      2)  Then click the button at the bottom of the application.
      3)  Notice how after the line series gets removed, it appears for a second, then disappears without using its hide and show effects.  Then it reappears, but this time using the appropriate chart data effect.

       

      Can anyone tell me how to fix this?

       

      Thanks,

       

      Anton

       

      -----------------------------   THE CODE:  -------------------------------

       

      <?xml version="1.0"?>
      <!-- charts/MultipleSeries.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
      height="100%">
        <mx:Script>
          <![CDATA[
          
               import mx.collections.ArrayCollection;
          
              [Bindable]
              public var SMITH:Array = [
                 {date:"22-Aug-05", close:42.87},
                 {date:"23-Aug-05", close:45.74},
                 {date:"24-Aug-05", close:48.77},
                 {date:"25-Aug-05", close:44.06},
              ];
              [Bindable]
              public var DECKER:Array = [
                 {date:"22-Aug-05", close:49.59},
                 {date:"23-Aug-05", close:45.3},
                 {date:"24-Aug-05", close:43.71},
                 {date:"25-Aug-05", close:47.88},
              ];
              
              public var year:int = 1;

       

              public function changeProvider():void {
                  if (year == 2) {
                      lineSeries.dataProvider=DECKER;
                      colSeries.dataProvider=SMITH;
                      b1.label="View Second Year Data";
                      year=1;
                  } else {
                      lineSeries.dataProvider=SMITH;
                      colSeries.dataProvider=DECKER;
                      b1.label="View First Year Data";            
                      year=2;
                  }
              }

       

          ]]>
        </mx:Script>
        
        <!-- Define chart effects -->
          <mx:SeriesSlide 
              id="slideIn" 
              duration="1000" 
              direction="right"
          />
          <mx:SeriesSlide 
              id="slideOut" 
              duration="1000" 
              direction="left"
          />
          
          <!-- Define chart effects --> 
        <mx:SeriesZoom id="zoomOut" 
           duration="2000" 
           minimumElementDuration="50"
           elementOffset="50" 
           verticalFocus="top" 
           horizontalFocus="left"
           relativeTo="series"
        />
        <mx:SeriesZoom id="zoomIn" 
           duration="2000" 
           minimumElementDuration="50" 
           elementOffset="-50" 
           verticalFocus="top" 
           horizontalFocus="right"
           relativeTo="series"
        />

       


        <mx:Panel title="Multiple Data Series" width="100%" height="100%">
           <mx:ColumnChart id="myChart"
              dataProvider="{SMITH}"
              showDataTips="true"
              height="100%"
              width="100%"
           >        
           
              <mx:horizontalAxis>
                 <mx:CategoryAxis categoryField="date"/>
              </mx:horizontalAxis>
              <mx:verticalAxis>
                 <mx:LinearAxis minimum="40" maximum="50"/>
              </mx:verticalAxis>
              
              <mx:series>
                 <mx:ColumnSeries
                           id="colSeries"
                      dataProvider="{SMITH}"
                      xField="date"
                      yField="close"
                      displayName="SMITH"                   
                      showDataEffect="zoomIn"
                      hideDataEffect="zoomOut"
                 >
                 </mx:ColumnSeries>
                 <mx:LineSeries
                           id="lineSeries"
                      dataProvider="{DECKER}"
                      xField="date"
                      yField="close"
                      displayName="DECKER"
                           showDataEffect="slideIn"
                           hideDataEffect="slideOut"
                 >
                 </mx:LineSeries>
              </mx:series>
              
           </mx:ColumnChart>
           <mx:Legend dataProvider="{myChart}"/>
        </mx:Panel>    
        <mx:Button id="b1" click="changeProvider()" label="View Second Year Data"/>
      </mx:Application>