LineChart category axis labelFunction / dataProvider problem

Question

Hi,
I am trying to plot a line chart using actionscript.
What I am trying to achive is plot the chart with entire dataset, but show only limited number of points in x and y axis's.
Problem:
     When I give dataProvider to category axis with some limited values, nothing gets plotted .
Explaination:
     In the attached main.mxml file
                var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
                //lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
                lineCategoryXAxis.categoryField = "DATE";
                lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
                lineChart.horizontalAxis = lineCategoryXAxis;
Here, I am giving category axis for x-axis. Linechart takes care of values in the vertical axis by itself and so the line chart gets plotted properly.
But when I try giving values to vertical axis, then nothing is plotted in the line chart.
                var lineCategoryYAxis:CategoryAxis = new CategoryAxis();
                 lineCategoryYAxis.dataProvider = getNumericPointsArray(valuesArray)
                 //lineCategoryYAxis.categoryField = "VALUE";
                 lineCategoryYAxis.labelFunction = lineCategoryYAxisLabelFunction;
                 lineChart.verticalAxis = lineCategoryYAxis;
Also if I try to reduce the number of points in the x-axis, nothing gets plotted
               var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
                 lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
                 lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
                 lineChart.horizontalAxis = lineCategoryXAxis;
where getNumericPointsArray() returns an array with 7 values for vertical axis and getDatePointsArray() returns array with 7 dates for horizontal axis.
Need help in resolving this problem.
P.S: Unable to attach mxml file so attaching it as a txt file.

Answer 1

Hi,
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:components="com.yahoo.data.digits.components.*"
    layout="vertical"
    backgroundColor="#FFFFFF"
    backgroundGradientAlphas="[0,0]"
    width="100%" creationComplete="cc()">
    <mx:Script>
        <![CDATA[
            import mx.utils.ArrayUtil;
            import mx.collections.XMLListCollection;
            import mx.collections.Sort;
            import mx.charts.CategoryAxis;
            import mx.charts.chartClasses.Series;
            import mx.collections.ArrayCollection;
            import mx.charts.series.LineSeries;
            import mx.charts.LineChart;
            public var dataForLineChart:ArrayCollection = new ArrayCollection([
                                                            {DATE:"20090509", VALUE:"3538943147"},
                                                            {DATE:"20090510", VALUE:"5047760823"},
                                                            {DATE:"20090511", VALUE:"5046865494"},
                                                            {DATE:"20090512", VALUE:"4983771032"},
                                                            {DATE:"20090513", VALUE:"5032039834"},
                                                            {DATE:"20090514", VALUE:"4897303525"},
                                                            {DATE:"20090515", VALUE:"4496020991"},
                                                            {DATE:"20090516", VALUE:"3525547244"},
                                                            {DATE:"20090517", VALUE:"3596982398"},
                                                            {DATE:"20090518", VALUE:"4947978254"},
                                                            {DATE:"20090519", VALUE:"4932182219"},
                                                            {DATE:"20090520", VALUE:"4909069875"},
                                                            {DATE:"20090521", VALUE:"4781830807"},
                                                            {DATE:"20090522", VALUE:"4431176690"},
                                                            {DATE:"20090523", VALUE:"3476323135"},
                                                            {DATE:"20090524", VALUE:"3444512240"},
                                                            {DATE:"20090525", VALUE:"4329018809"},
                                                            {DATE:"20090526", VALUE:"5086390081"},
                                                            {DATE:"20090527", VALUE:"5012778551"},
                                                            {DATE:"20090528", VALUE:"4770167180"},
                                                            {DATE:"20090529", VALUE:"4408927585"},
                                                            {DATE:"20090531", VALUE:"3488537357"},
                                                            {DATE:"20090601", VALUE:"3630748728"},
                                                            {DATE:"20090602", VALUE:"5007093913"},
                                                            {DATE:"20090603", VALUE:"5015210737"},
                                                            {DATE:"20090604", VALUE:"4999236097"},
                                                            {DATE:"20090605", VALUE:"4934609881"},
                                                            {DATE:"20090606", VALUE:"4588135281"},
                                                            {DATE:"20090607", VALUE:"3615291868"},
                                                            {DATE:"20090608", VALUE:"3666209346"},
            private function cc():void
                var lineSeriesArray:Array = new Array();
                var lineChart:LineChart = new LineChart();
                lineChart.percentHeight = 100;
                lineChart.percentWidth = 100;
                lineChart.showDataTips = true;
                lineChart.dataProvider = dataForLineChart;
                var valuesArray:Array = new Array();
                var datesArray:Array = new Array();
                var lineSeries:LineSeries;
                lineSeries = new LineSeries();
                lineSeries.dataProvider = dataForLineChart;
                lineSeries.dataFunction = lineSeriesDataFunction;
                lineSeriesArray.push(lineSeries);
                var dLength:int = dataForLineChart.length;
                for (var k:int=0;k<dLength;k++)
                    valuesArray.push(dataForLineChart[k].VALUE);
                    datesArray.push(dataForLineChart[k].DATE);
                lineChart.series = lineSeriesArray;
                var lineCategoryXAxis:CategoryAxis = new CategoryAxis();
                //lineCategoryXAxis.dataProvider = getDatePointsArray(datesArray);
                lineCategoryXAxis.categoryField = "DATE";
                lineCategoryXAxis.labelFunction = lineCategoryXAxisLabelFunction;
                lineChart.horizontalAxis = lineCategoryXAxis;
                var lineCategoryYAxis:CategoryAxis = new CategoryAxis();
                //lineCategoryYAxis.dataProvider = getNumericPointsArray(valuesArray)
                lineCategoryYAxis.categoryField = "VALUE";
                lineCategoryYAxis.labelFunction = lineCategoryYAxisLabelFunction;
                //lineChart.verticalAxis = lineCategoryYAxis;
                chartContainer.removeAllChildren();
                chartContainer.addChild(lineChart);
            private function lineCategoryXAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
                /** Will do date formatting here */
                return categoryItem.DATE;
                //return categoryItem.toString();
            private function lineCategoryYAxisDataFunction(axis:CategoryAxis, item:Object):Object
                return item.VALUE;
            private function lineCategoryYAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
                /** Will do number formatting here */
                return categoryItem.VALUE;
                //return categoryItem.toString();
            private function lineSeriesDataFunction(series:Series, item:Object, fieldName:String):Object
                if (fieldName == "yValue")
                    return item.VALUE;
                else if(fieldName == "xValue")
                    return item.DATE.toString();
                return null;
            private function getNumericPointsArray(inputArray:Array):Array
                var numValues:int = inputArray.length;
                /** Sorting the array to find min and max values */
                var inputAC:ArrayCollection = new ArrayCollection(inputArray);
                inputAC.sort = new Sort();
                inputAC.refresh();
                var minValue:Number = Number(inputAC.getItemAt(0));
                var maxValue:Number = Number(inputAC.getItemAt(inputAC.length - 1));
                var outputArray:Array = new Array();
                var i:int;
                var diffFactor:Number;
                var diffMinMax:Number;
                /** axis takes 0 by default so not pushing that into array */       
                if (minValue == maxValue)
                    /** Dividing by 6 to get 5 points */
                    diffFactor = Math.round(maxValue / 6);
                    for (i=1;i<=5;i++)
                        outputArray.push((i * diffFactor));
                    outputArray.push(maxValue);
                else
                    outputArray.push(minValue);
                    /** Find some points between minValue and maxValue */
                    diffMinMax = (maxValue - minValue);
                    /** Dividing by 5 to get 4 points */
                    diffFactor = Math.round(diffMinMax / 5);
                    for (i=1;i<=4;i++)
                        outputArray.push((i * diffFactor) + minValue);
                    outputArray.push(maxValue);
                return outputArray;
            private function getDatePointsArray(inputArray:Array):Array
                var numValues:int = inputArray.length;
                /** Subtracting 2 because first and last values are undconditinally pushed in output array.*/
                var stepValue:int = (numValues - 2) / 5;
                var outputArray:Array = new Array();
                outputArray.push(inputArray[0]);
                /** Starting from 1 and ending in numValues - 2 because first and last values of array are already taken.*/
                for (var i:int=stepValue;i<numValues - 2;i+=stepValue)
                    outputArray.push(inputArray[i]);
                outputArray.push(inputArray[numValues - 1]);
                return outputArray;
        ]]>
    </mx:Script>
    <mx:HBox id="chartContainer" width="100%" height="100%">
    </mx:HBox>
</mx:Application>
As you can see in the code, my dataPovider is complex (can become much more complex). In the code above, the ArrayCollection has only one element currently but will have more. So the graph should be plotted in such a way that each array element corresponds to one line series.
What I need to achive is that the horizontal axis should show dates only from the "0th" element of the ArrayCollection and that too only some limited 6-7 points, the rest of the ArrayCollection elements should get plotted according to these dates.
I think I was able to explain my problem. Pls let me know if any more explaination is required.
P.S. Re-attaching the file.
Thanks in advance