1 Reply Latest reply on May 12, 2010 7:14 AM by AustinAngel

    2 Vertical Axis Chart & State Change Bug

    AustinAngel

      When a column or line chart has 2 vertical axis (one on the left and one  on the right), the additional vertical axis must be defined at the series level  as the definition at the chart level only allows for one vertical axis.


      When you define the additional vertical axis at the series level, it will populate on the chart when the chart is first rendered.  But, it fails to populate after a state change.


      This problem does not occur if the data provider uses static data defined in Action Script as an array collection.  But, the problem always occurs if the data provider uses a web service.


      This is a Flex 4 problem.  Flex 3 does not have this problem.


      Below is an example that will demonstrate the problem.  It uses the Flex Grocer web service that comes on the CD with Jeff Tapper’s book “Adobe FLEX 3 Training from the Source” (an Adobe Press book).  However, this example can be easily modified to use any web service.


      The example is currently pointing to static data defined in Action Script.


      You can switch from static data to web service data by commenting the instruction on line 32 ( dp = dpStatic; ) and un-commenting the instruction on line 33 ( dp = (event.result as ArrayCollection); ).


      The example first presents a chart with Gross Sales plotted as columns using the left axis and Net Sales plotted as a line using the right axis.  Note, the vertical axis for Net Sales is defined at the series level.


      When you click the “Data” button a state change occurs and a data grid is presented showing Gross Sales and Net Sales.  When you click the “Chart” button another state change occurs and the chart is presented again.  If you are pointing to static data, both Gross Sales and Net Sales will populate on the chart.  If you are pointing to web service data, Gross Sales will still populate, but Net Sales fails to populate.  This is the problem.


      Does anyone have a solution or work around for this problem?

       

      <?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="init()">
        <fx:Script>
          <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            [Bindable]
            public var selectedType:String = "All";
            [Bindable]
            public var startDate:Date = new Date(2006, 4, 1);
            [Bindable]
            public var endDate:Date = new Date(2006, 4, 5);
            [Bindable]
            public var dp:ArrayCollection;
            public var dpStatic:ArrayCollection = new ArrayCollection([
              {DTSALE:"11-Nov-07", NET:41.87, GROSS:63.34},
              {DTSALE:"12-Nov-07", NET:45.74, GROSS:58.56},
              {DTSALE:"13-Nov-07", NET:42.77, GROSS:62.34},
              {DTSALE:"14-Nov-07", NET:48.06, GROSS:75.65},
            ]);
            private function init():void {
              getData();
            }
            private function getData():void {
              dashboardWS.getSalesData.send();
            }
            private function salesRPCResult(event:ResultEvent):void {
              dp = dpStatic;                                        // Line on chart always populates with static data
              // dp = (event.result as ArrayCollection);   // Line on chart does not populate with WebService data after state change
            }
            private function showFault(event:FaultEvent):void {
              trace(event.fault.faultCode + ":" + event.fault.faultString);
                  }
          ]]>
        </fx:Script>
        <fx:Declarations>
          <mx:WebService id="dashboardWS" fault="showFault(event)"
                         wsdl="http://localhost:8300/flexGrocer/cfcs/aggregate.cfc?wsdl">
            <mx:operation name="getSalesData" result="salesRPCResult(event)">
              <mx:request>
                <startDate>{startDate}</startDate>
                <endDate>{endDate}</endDate>
                <category>{selectedType}</category>
              </mx:request>
            </mx:operation>
          </mx:WebService>
        </fx:Declarations>
        <s:states>
          <s:State name="chart"/>
          <s:State name="data"/>
        </s:states>
        <s:controlBarContent>
          <s:Button label="Chart" click="this.currentState='chart'"/>
          <s:Button label="Data" click="this.currentState='data'"/>
        </s:controlBarContent>
        <s:HGroup width="100%" height="100%">
          <mx:ColumnChart includeIn="chart"
                          width="100%" height="100%" dataProvider="{dp}">
            <mx:horizontalAxis>
              <mx:CategoryAxis categoryField="DTSALE"/>
            </mx:horizontalAxis>
            <mx:verticalAxis>
              <mx:LinearAxis id="vLeft" title="Gross Sales Columns"/>
            </mx:verticalAxis>
            <mx:series>
              <mx:ColumnSeries yField="GROSS" verticalAxis="{vLeft}"/>
              <mx:LineSeries yField="NET">
                <mx:verticalAxis>
                  <mx:LinearAxis id="vRight" title="Net Sales Line"/>
                </mx:verticalAxis>
              </mx:LineSeries>
            </mx:series>
            <mx:verticalAxisRenderers>
              <mx:AxisRenderer axis="{vLeft}" placement="left"/>
              <mx:AxisRenderer axis="{vRight}" placement="right"/>
            </mx:verticalAxisRenderers>
          </mx:ColumnChart>
          <mx:DataGrid dataProvider="{dp}" width="100%" height="100%" includeIn="data">
            <mx:columns>
              <mx:DataGridColumn dataField="DTSALE"/>
              <mx:DataGridColumn dataField="NET"/>
              <mx:DataGridColumn dataField="GROSS"/>       
            </mx:columns>
          </mx:DataGrid>
        </s:HGroup>
      </s:Application>

        • 1. Re: 2 Vertical Axis Chart & State Change Bug
          AustinAngel Level 1

           

           

           

          I found a workaround.

          When the chart goes through a state change, the “maximum” property on the additional vertical axis defined at the series level defaults to 100 causing the line not to render as the data values are greater than 100.  Setting this to a higher value (maximum="10000" ) forces the line to appear consistently after a state change.

          I still believe this is a bug.

          The downside is that I will have to dynamically determine the maximum vale to use at runtime, but at least I can still use state changes on two vertical axis charts.