6 Replies Latest reply: Feb 7, 2014 10:22 AM by buddyp450 RSS

    Flex column chat's columnset doesn't scale properly in vertical axis

    niranjan swain Community Member

      Hi All,

       

      I createda column chart having serieses in column set and this colun set is mapped to a custom vertical axis.

      Issue:- This custom vetical axis only show the default value from 0 to 100 instead of its own min max value.

       

      The sample code are given below

       

       

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"

                                              creationComplete="application1_creationCompleteHandler(event)" xmlns:local="*">

      <mx:Script>

                          <![CDATA[

                                    import mx.charts.AxisRenderer;

                                    import mx.charts.ColumnChart;

                                    import mx.charts.LinearAxis;

                                    import mx.charts.series.ColumnSeries;

                                    import mx.charts.series.ColumnSet;

                                    import mx.charts.series.LineSeries;

                                    import mx.collections.ArrayCollection;

                                    import mx.events.FlexEvent;

       

                                    [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:10, close:41.87, open: 30},

                                              {date:20, close:45.74, open: 40},

                                              {date:30, close:42.77, open: 60},

                                              {date:40, close:48.06, open: 50}]);

       

                                    [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:10, close:157.59},

                                              {date:20, close:160.3},

                                              {date:30, close:150.71},

                                              {date:40, close:156.88},]);

       

       

                                    private var myChart:ColumnChart = new ColumnChart();

       

                                    protected function application1_creationCompleteHandler(event:FlexEvent):void

                                    {

        // VERTICAL AXIS

                                              var verticalAxisLeft:LinearAxis = new LinearAxis();

                                              var verticalAxisRight:LinearAxis = new LinearAxis();

       

                                              var verticalAxisRendererLeft:AxisRenderer = new AxisRenderer();

                                              var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();

       

                                              verticalAxisRendererLeft.axis = verticalAxisLeft;

                                              verticalAxisRendererLeft.placement = 'left';

                                              verticalAxisRendererRight.axis = verticalAxisRight;

                                              verticalAxisRendererRight.placement  = 'right';

       

       

        // SERIES

       

                                              var newSeries:Array = new Array();

                                              var columnset:ColumnSet = new ColumnSet();

                                              columnset.type = 'stacked';

       

                                              var columnSeries:ColumnSeries = new ColumnSeries();

                                              columnSeries.dataProvider = SMITH;

                                              columnSeries.yField = "close";

                                              columnSeries.displayName = "SMITH_close";

                                              columnset.series.push(columnSeries);

       

                                              var columnSeries1:ColumnSeries = new ColumnSeries();

                                              columnSeries1.dataProvider = SMITH;

                                              columnSeries1.yField = "open";

                                              columnSeries1.displayName = "SMITH_open";

                                              columnset.series.push(columnSeries1);

       

                                              columnset.verticalAxis = verticalAxisLeft;

                                              newSeries.push(columnset);

       

                                               var lineSeries:LineSeries = new LineSeries();

                                              lineSeries.dataProvider = DECKER;

                                              lineSeries.yField = "close";

                                              lineSeries.verticalAxis = verticalAxisRight;

                                              lineSeries.displayName = "DECKER";

                                              newSeries.push(lineSeries);

       

                                              myChart.verticalAxisRenderers = [verticalAxisRendererLeft,verticalAxisRendererRight];

       

                                              myChart.series = newSeries;

                                              myChart.showDataTips = true;

       

                                              chartContainer.addChildAt(myChart, 0);

                                    }

                          ]]>

      </mx:Script>

      <mx:Panel id="chartContainer" title="Column Chart With Multiple Axes">

                          <mx:Legend dataProvider="{myChart}"/>

      </mx:Panel>

       

       

      Thanks in advance

        • 1. Re: Flex column chat's columnset doesn't scale properly in vertical axis
          DeanLoganBH Community Member

          Not sure, but it could be

           

          private var myChart:ColumnChart = new ColumnChart();

           

          is missing a bindable

           

          [Bindable]

          private var myChart:ColumnChart = new ColumnChart();

           

          Is this what it is supposed to look like?

          LineColumnChart.png

           

          Okay, re-reading your statement.  Are you saying it shouldn't show anything over the "60" value on the left?  Because I think it is just showing the other values to correspond with one of the Arrays?  That's because you haven't sent a minimum or maximum value.

           

          var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();

          verticalAxisRendererLeft.axis = verticalAxisLeft;

          verticalAxisRendererLeft.placement = 'left';

          verticalAxisLeft.minimum = 0;

          verticalAxisLeft.maximum = 60;

          • 2. Re: Flex column chat's columnset doesn't scale properly in vertical axis
            DeanLoganBH Community Member

            Here is some code that gets the minimum and maximum from the array, so you can set those values.  But, obviously, it sets the bottom value to the smallest number and not 0, but that's up to you.

             

             

            I created two functions.  One gets the Maximum value from an array and the other gets the Minimum.  The second asks for a Maximum value, so that it can find values smaller than that.

             

            private function findMax(sourceArray:Array, sourceValue:String):Number {
            var maxNumber:Number = 0;
            for (var i:int = 0; i < sourceArray.length; i++) {
              var tmpNum:Number = new Number((sourceArray[i][sourceValue]).toString());
              if(tmpNum > maxNumber) {
               maxNumber = sourceArray[i][sourceValue];
              }
            }
            
            return maxNumber;
            }
            private function findMin(sourceArray:Array, sourceValue:String, startMax:Number):Number {
            var minNumber:Number = startMax;
            for (var i:int = 0; i < sourceArray.length; i++) {
              var tmpNum:Number = new Number((sourceArray[i][sourceValue]).toString());
              if(tmpNum < minNumber) {
               minNumber = sourceArray[i][sourceValue];
              }
            }
            
            return minNumber;
            }
            

             

            Then when you create the LinearAxis, you can call the functions to set the minimum and maximum.

             

            var verticalAxisLeft:LinearAxis = new LinearAxis();
            verticalAxisLeft.autoAdjust = true;
            verticalAxisLeft.maximum = Math.ceil(findMax(SMITH.source, "open"));
            verticalAxisLeft.minimum = Math.ceil(findMin(SMITH.source, "open", verticalAxisLeft.maximum));
            var verticalAxisRight:LinearAxis = new LinearAxis();
            verticalAxisRight.autoAdjust = true;
            verticalAxisRight.maximum = Math.ceil(findMax(DECKER.source, "close"));
            verticalAxisRight.minimum = Math.ceil(findMin(DECKER.source, "close", verticalAxisRight.maximum));
            

             

             

            Note that the verticalAxisRight minimum probably should be set to 0 or the same as the verticalAxisLeft or it won't draw correctly.

             

            i.e.

            LineColumnChart_3.png

            • 3. Re: Flex column chat's columnset doesn't scale properly in vertical axis
              niranjan swain Community Member

              Hi DeanLoganBH,

               

              Thanks for ur answare however my problem is littlebit different. According to u if i set the min and max value manually the axis value units are showing perfectly but the column draw region are not in properly. please have a look to the attached screen shot of the chat and the sample code as well.

               

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

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"

                                                      creationComplete="application1_creationCompleteHandler(event)" xmlns:local="*">

              <mx:Script>

                                  <![CDATA[

                                            import mx.charts.AxisRenderer;

                                            import mx.charts.ColumnChart;

                                            import mx.charts.LinearAxis;

                                            import mx.charts.series.ColumnSeries;

                                            import mx.charts.series.ColumnSet;

                                            import mx.charts.series.LineSeries;

                                            import mx.collections.ArrayCollection;

                                            import mx.events.FlexEvent;

               

                                            [Bindable] public var SMITH:ArrayCollection = new ArrayCollection([{date:10, close:41.87, open: 30},

                                                      {date:20, close:45.74, open: 40},

                                                      {date:30, close:42.77, open: 60},

                                                      {date:40, close:48.06, open: 50}]);

               

                                            [Bindable] public var DECKER:ArrayCollection = new ArrayCollection([{date:10, close:157.59},

                                                      {date:20, close:160.3},

                                                      {date:30, close:150.71},

                                                      {date:40, close:156.88},]);

               

               

                                            private var myChart:ColumnChart = new ColumnChart();

               

                                            protected function application1_creationCompleteHandler(event:FlexEvent):void

                                            {

               

               

                // VERTICAL AXIS

                                                       var verticalAxisLeft:LinearAxis = new LinearAxis();

                                                      verticalAxisLeft.autoAdjust = true;

                                                      verticalAxisLeft.minimum = 0;

                                                      verticalAxisLeft.maximum = 120;

                                                      var verticalAxisRight:LinearAxis = new LinearAxis();

               

                                                      var verticalAxisRendererLeft:AxisRenderer = new AxisRenderer();

                                                      var verticalAxisRendererRight:AxisRenderer = new AxisRenderer();

               

                                                      verticalAxisRendererLeft.axis = verticalAxisLeft;

                                                      verticalAxisRendererLeft.placement = 'left';

                                                      verticalAxisRendererRight.axis = verticalAxisRight;

                                                      verticalAxisRendererRight.placement  = 'right';

               

                // SERIES

               

                                                      var newSeries:Array = new Array();

                                                      var columnset:ColumnSet = new ColumnSet();

                                                      columnset.type = 'stacked';

               

                                                      var columnSeries:ColumnSeries = new ColumnSeries();

                                                      columnSeries.dataProvider = SMITH;

                                                      columnSeries.yField = "close";

                                                      columnSeries.displayName = "SMITH_close";

                                                      columnset.series.push(columnSeries);

               

                                                      var columnSeries1:ColumnSeries = new ColumnSeries();

                                                      columnSeries1.dataProvider = SMITH;

                                                      columnSeries1.yField = "open";

                                                      columnSeries1.displayName = "SMITH_open";

                                                      columnset.series.push(columnSeries1);

               

                                                      columnset.verticalAxis = verticalAxisLeft;

                                                      newSeries.push(columnset);

               

                                                       var lineSeries:LineSeries = new LineSeries();

                                                      lineSeries.dataProvider = DECKER;

                                                      lineSeries.yField = "close";

                                                      lineSeries.verticalAxis = verticalAxisRight;

                                                      lineSeries.displayName = "DECKER";

                                                      newSeries.push(lineSeries);

               

                                                      myChart.verticalAxisRenderers = [verticalAxisRendererLeft,verticalAxisRendererRight];

               

                                                      myChart.series = newSeries;

                                                      myChart.showDataTips = true;

               

                                                      chartContainer.addChildAt(myChart, 0);

                                            }

               

               

                                  ]]>

              </mx:Script>

              <mx:Panel id="chartContainer" title="Column Chart With Multiple Axes">

                                  <mx:Legend dataProvider="{myChart}"/>

              </mx:Panel>

               

              </mx:Application>

               

              stackedColumnChart.png

               

              In the above image the tooltip display Smith_Close value is 41.87 however it's pillar vertical axis maped with value nearly  28. and the total value is 71 but it map with below 50 in vertical axis. which seems visually inconsistent.

               

              Problem:- why the column set is not calculate min and max value automatically and scale the colums appropiatly  in case of custom axisrenderer however it is working fine default axis rendere.

              Again the calculation of min max is little bit complex when my column set is containing more serieses and thereir value is varies in negative and positive side.

               

              DeanLoganBH, if is there any point is not understandable please let me know..

               

              Thanks in advance

              • 4. Re: Flex column chat's columnset doesn't scale properly in vertical axis
                Ajju_garg

                I think you can add a line as :

                 

                columnSeries.verticalAxis = verticalAxisLeft;

                • 5. Re: Flex column chat's columnset doesn't scale properly in vertical axis
                  DeanLoganBH Community Member

                  I descontructed the example by creating the items in the group and I think the isses is how yo are adding the series to the chart.

                   

                  Instead of trying to push an array, just set the columnSet to the values as an array

                    
                  // add column series to column set
                  
                  columnset.series = [columnSeries1, columnSeries2];
                  
                  

                   

                  Then when you add the columnSet and line Series to the chart, do the same.

                   

                   

                    myChart.series = [columnset, lineSeries];
                  

                   

                   

                  I have modified one of my other charts that creates data dynamically as an example.

                  The View Source is available, so you can look it over to see what I did.

                  • 6. Re: Flex column chat's columnset doesn't scale properly in vertical axis
                    buddyp450 Community Member

                    Hello DeanLoganBH,

                     

                    The modification you made to setting the series to the array directly vs setting it via push doesn't have any effect on this problem. Your example even showcases the issue! Notice that your stacked columns do not go as high as they should. For example, if you look at the very first column you have in your example, it says that there are 12 apples but it's visibly under the 10 tickmark for the left axis. Same goes for all of the columns but the line chart is fine.

                     

                    The issue is simply put: the columns should rise to the tickmarks that represent their values just like the line chart does. Currently they do not.

                     

                    Edit: I was able to solve my issue! I personally was applying my yAxis to my columnSeries verticalAxis property and not the columnSet! It looks like the reverse of this problem may be happening in this tread as I do not see the verticalAxis being set for the column series, only the set. Thanks everyone!