4 Replies Latest reply on Jun 14, 2009 10:03 AM by ramace

    LineChart category axis labelFunction / dataProvider problem

    ramace

      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.

        • 1. Re: LineChart category axis labelFunction / dataProvider problem
          _Natasha_ Level 4

          Hi,

          your attached don't accesseble for view. Try to reattache it.

           

          As I understand you want to create a LineChart with both CategoryAxis? What is a very special in your category that you need to set dataProvider for your axis? The values may be doesn't match to data from line.

          • 2. Re: LineChart category axis labelFunction / dataProvider problem
            ramace Level 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

            • 3. Re: LineChart category axis labelFunction / dataProvider problem
              _Natasha_ Level 4

              Hi,

              you don't understand the meaning of dataProvider for CategoryAxis.

              From docs: "Specifies the data source containing the label names. The dataProvider can be an Array of Strings, an Array of Objects, or any object that implements the IList or ICollectionView interface. If the dataProvider is an Array of Strings, ensure that the categoryField property is set to null. If the dataProvider is an Array of Objects, set the categoryField property to the name of the field that contains the label text."

               

              So you need to correct the fromat of your dataProvider, it should be not the simple ArrayCollection of strings, but it should have the same structure as a dataProvider for Series.

               

              Hope it's helpful.

              • 4. Re: LineChart category axis labelFunction / dataProvider problem
                ramace Level 1

                Ok. Will try that out.

                 

                Thanks for the help so far...