3 Replies Latest reply on Oct 30, 2009 3:34 AM by Tommy866

    Problem with displaying chart data

    Tommy866

      Hello everybody,

       

      I have problem with displaying chart data correctly. I'm using a cartesian chart with DateTimeAxis. The stockdata I'm using is for half a year and

      with ticks for every day. The problem is, that Flex displays the data of february in march together with the data of march. I have added a picture

      to show the result. The second column of the grid is for february and the third for march.

       

      Could anybody help me with this problem. Thanks in advance.

       

      Thomas

        • 1. Re: Problem with displaying chart data
          christopher.mina

          you'll certainly need to post more information.  An example of you dataprovider and maybe an example of your chart source code.

           

          -Chris

          • 2. Re: Problem with displaying chart data
            Tommy866 Level 1

            Hi Chris,

             

            thanks for your reply. Here you get the source code:

             

            The following method creates the LineChart:

             

                    public function init():void
                    {
                        model.upperChart = this;
                        model.upperChartStyle.setChartViewStyle(this);
                        this.hAxis = new MyDateTimeAxis();
                        model.upperChartData.configureHAxis(this.hAxis);
                        this.vAxis = new LinearAxis();
                        model.upperChartData.configureVAxis(this.vAxis);           
                        this.vAxisTitle = new Label();
                        this.vAxisTitle.text = model.upperChartData.getVAxisTitle();
                        model.upperChartStyle.setVAxisTitleLabelStyle(this.vAxisTitle);
                        this.vAxisTitle.x = 10
                        this.vAxisTitle.y = 0;
                        this.addChild(this.vAxisTitle);
                        this.myChart = new CartesianChart();
                        //remove default datatip
                        this.myChart.showDataTips = false;
                        this.myChart.x = 10;
                        this.myChart.y = 0;
                        this.myChart.width = 768; 
                        this.myChart.height = 196;
                        model.upperChartStyle.setChartStyle(this.myChart);
                        this.addChild(this.myChart);
                        //Remove line shadow
                        this.myChart.seriesFilters = null;
                        this.myChart.horizontalAxis = this.hAxis;
                        this.myChart.verticalAxis = this.vAxis;
                        this.hAxisRenderer = new AxisRenderer();
                        model.upperChartData.configureHAxisRenderer(this.hAxisRenderer);
                        this.hAxisRenderer.axis = this.hAxis;        
                        model.upperChartStyle.setHAxisRendererStyle(this.hAxisRenderer);
                        this.myChart.horizontalAxisRenderers.push(this.hAxisRenderer);
                        this.vAxisRenderer = new AxisRenderer();
                        model.upperChartData.configureVAxisRenderer(this.vAxisRenderer);
                        this.vAxisRenderer.axis = this.vAxis;
                        model.upperChartStyle.setVAxisRendererStyle(this.vAxisRenderer);
                        this.myChart.verticalAxisRenderers.push(this.vAxisRenderer);
                        model.upperChartStyle.setVAxisDataLabelStyle(this.vAxisMinLabel);
                        this.addChild(this.vAxisMinLabel);   
                        model.upperChartStyle.setSeriesStyle(model.upperChartData.series, model.upperChartData.shares);           
                        this.myChart.dataProvider = model.upperChartData.dataProvider;
                        this.myChart.series = model.upperChartData.series;

             

                    }

             

            The data for dataprovider and series you can see in attached file dataprovider.xml.

             

            xfield is equivalent to timestamp

            yfield is equivalent to absolute

             

            I think the problem could be the configuration of the datetimeaxis. The following method shows the parameter for the datetimeaxis:

             

                    public function configureHAxis(axis:MyDateTimeAxis):void
                    {       
                        axis.parseFunction = UtilityClass.parseYYYYMMDDHHNNSSString2Date;
                        axis.dataUnits = "days";
                        axis.dataInterval = 1;
                        axis.title = "";
                        axis.minimum = new Date(UtilityClass.parseYYYYMMDDHHNNSSString2Date("2009-01-07 00:00:00").time);
                        axis.maximum = new Date(UtilityClass.parseYYYYMMDDHHNNSSString2Date("2009-07-06 00:00:00").time);
                    }

             

             

            And finally you get the function, that I'm using for string to date conversion:

             

                    public static function parseYYYYMMDDHHNNSSString2Date(input:String):Date
                    {
                        var result:Date = new Date();
                        var year:Number = Number(input.substring(0,4));
                        var month:Number = Number(input.substring(5,7));
                        var date:Number = Number(input.substring(8,10));
                        var hours:Number = Number(input.substring(11,13));
                        var minutes:Number = Number(input.substring(14,16));
                        var seconds:Number = Number(input.substring(17,19));           
                        result.setUTCFullYear(year);
                        result.setUTCMonth(month-1);
                        result.setUTCDate(date);
                        result.setUTCHours(hours);
                        result.setUTCMinutes(minutes);
                        result.setUTCSeconds(seconds);
                        return result;           
                    }

             

            I hope that will help to locate the reason for the wrong chart visualization.

             

            Thanks for any help.

            • 3. Re: Problem with displaying chart data
              Tommy866 Level 1

              Hello again,

               

               

              I have found the problem for the wrong visualization. The parseFunction of the datetimeaxis was not correctly.

               

              Here is the new parseFunction:

               

                      public static function parseYYYYMMDDHHNNSSString2Date(input:String):Date
                      {
                          var result:Date = new Date();
                          var year:Number = Number(input.substring(0,4));
                          var month:Number = Number(input.substring(5,7));
                          var date:Number = Number(input.substring(8,10));
                          var hours:Number = Number(input.substring(11,13));
                          var minutes:Number = Number(input.substring(14,16));
                          var seconds:Number = Number(input.substring(17,19));           
                          result.setUTCSeconds(seconds);
                          result.setUTCMinutes(minutes);
                          result.setUTCHours(hours);
                          result.setUTCDate(date);
                          result.setUTCMonth(month-1);
                          result.setUTCFullYear(year);
                          return result;           
                      }

               

              I must change the order of the result.set methods. Now the set methods starts with Seconds and ends with Year. I think, this must be the right approach. The visualization is now correctly, see attached image.