Skip navigation
Currently Being Moderated

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

Feb 28, 2013 1:57 AM

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="" layout="absolute" minWidth="955" minHeight="600"

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



                              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;



                              [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



                                        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';





                                        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";



                                        var columnSeries1:ColumnSeries = new ColumnSeries();

                                        columnSeries1.dataProvider = SMITH;

                                        columnSeries1.yField = "open";

                                        columnSeries1.displayName = "SMITH_open";



                                        columnset.verticalAxis = verticalAxisLeft;



                                         var lineSeries:LineSeries = new LineSeries();

                                        lineSeries.dataProvider = DECKER;

                                        lineSeries.yField = "close";

                                        lineSeries.verticalAxis = verticalAxisRight;

                                        lineSeries.displayName = "DECKER";



                                        myChart.verticalAxisRenderers = [verticalAxisRendererLeft,verticalAxisRendererRight];


                                        myChart.series = newSeries;

                                        myChart.showDataTips = true;


                                        chartContainer.addChildAt(myChart, 0);




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

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




Thanks in advance

  • Currently Being Moderated
    Feb 28, 2013 9:54 AM   in reply to niranjan swain

    Not sure, but it could be


    private var myChart:ColumnChart = new ColumnChart();


    is missing a bindable



    private var myChart:ColumnChart = new ColumnChart();


    Is this what it is supposed to look like?



    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;

    Mark as:
  • Currently Being Moderated
    Feb 28, 2013 10:35 AM   in reply to DeanLoganBH

    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.




    Mark as:
  • Currently Being Moderated
    Mar 1, 2013 5:45 AM   in reply to niranjan swain

    I think you can add a line as :


    columnSeries.verticalAxis = verticalAxisLeft;

    Mark as:
  • Currently Being Moderated
    Mar 1, 2013 8:09 AM   in reply to niranjan swain

    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.

    Mark as:
  • Currently Being Moderated
    Feb 7, 2014 10:22 AM   in reply to DeanLoganBH

    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!

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points