dimanche 21 février 2016

Why is the total size of bars in a flex stacked bar chart only equal the largest item?

I have created a vertical stacked bar chart using mxml & actionscript. The problem is;

The height of each bar is only as high as the largest item in the stack. So if I have two items, "a = 1.5" and "b = 2.75", the first item, "a", goes to the about the 1.5 grid line, but the total height of the bar only goes to about the 2.75 mark on the grid leaving the "b" portion of the stack smaller than the "a" portion and the overall height wrong.

I would expect in the example above that the bar would go to the 4.25 mark on the grid.

Here is the mxml;

            <mx:ColumnChart id="myChart" dataTipFunction="formatDataTip" maximumDataTipCount="1" dataProvider="{_acChartData}" showDataTips="true"
                        height="100%" width="100%">

            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{_acChartData}" categoryField="ActivityDate" title="Dates"/>
            </mx:horizontalAxis>
            <mx:horizontalAxisRenderer>
                <mx:AxisRenderer showLabels="true" labelRotation="0" labelGap="1" tickPlacement="inside"/>
            </mx:horizontalAxisRenderer>

            <mx:verticalAxis>
                <mx:LinearAxis id="lnaChart" minimum="0" maximum="24" maximumLabelPrecision="2" interval="2" title="Hours"/>
            </mx:verticalAxis>
            <mx:verticalAxisRenderer>
                <mx:AxisRenderer showLabels="true" labelGap="1"/>
            </mx:verticalAxisRenderer>

            <mx:series>
                <mx:ColumnSet type="stacked" id="csDays" allowNegativeForStacked="false" baseline="0" dataProvider="{_acChartData}">
                </mx:ColumnSet>
            </mx:series>

        </mx:ColumnChart>

Here is the actionScript to build the series;

        public function rebuildStack(ev:Event):void
        {
            var seriesArray:Array = new Array();
            acData.removeEventListener("listChanged", rebuildStack);
            var seriesActivity:ColumnSeries;
            var intMaxMinutes:int = 0;
            var intDayMinutes:int = 0;
            for (var i:int = 0; i < acCategory.length; i++)
            {
                seriesActivity = new ColumnSeries();
                seriesActivity.yField = acCategory[i]["CATEGORY"];
                seriesActivity.displayName = acCategory[i]["DESCRIPTION"];
                seriesArray.push(seriesActivity);
            }
            csDays.series = seriesArray;
            _acChartData = new ArrayCollection;
            var dtCurrentDate:Date;
            var objData:Object = new Object;
            for (i = 0; i < acData.length; i++)
            {
                if (dtCurrentDate == null)
                {
                    dtCurrentDate = acData[i]["TIMELOGS_TRANS_DATE"];
                }
                if (dtCurrentDate != acData[i]["TIMELOGS_TRANS_DATE"])
                {
                    _acChartData.addItem(objData);
                    dtCurrentDate = acData[i]["TIMELOGS_TRANS_DATE"];
                    objData = new Object;
                    if (intMaxMinutes < intDayMinutes)
                        intMaxMinutes = intDayMinutes;
                    intDayMinutes = 0;
                }
                objData["ActivityDate"] = dfMMDD.format(acData[i]["TIMELOGS_TRANS_DATE"]);
                for (var j:int = 0; j < acCategory.length; j++)
                {
                    var nbrMinutes:Number = 0;
                    if (acData[i]["CATEGORY"] == acCategory[j]["CATEGORY"])
                    {
                        nbrMinutes = Number(acData[i]["TIME_WORKED"]);
                    }
                    if (objData.hasOwnProperty(acCategory[j]["CATEGORY"]))
                    {
                        objData[acCategory[j]["CATEGORY"]] += nbrMinutes / 60;
                    }
                    else
                    {
                        objData[acCategory[j]["CATEGORY"]] = nbrMinutes / 60;
                    }
                    intDayMinutes += nbrMinutes;
                }
            }
            lnaChart.minimum = 0;
            lnaChart.maximum = Math.round((intMaxMinutes / 60) * 100) / 100;
            _acChartData.addItem(objData);
            _acChartData.refresh();
            _objAppUtilities.loadDataGrid(_acChartData, grid, true);
            acData.addEventListener("listChanged", rebuildStack);
        }

The chart is to display the number of hours worked in a given day for the last 30 days based on activity. The bars are the days, the items stacked are the activities. One purpose is to be able look at a give day and see the total hours worked, and all the activities that made up the work day.

Aucun commentaire:

Enregistrer un commentaire