1 Reply Latest reply on Dec 13, 2011 10:09 PM by Deeptika Gottipati

    FlashBuilder bar chart - data appears only outside chart range

    benn0034

      I'm relatively new to FlashBuilder development and I'm having some issues with a bar chart.  I'm try to create a chart to show the timeline of projects, each with a start and end date.

       

      (1) The actual bars appear only on the left side of the y-axis. 

      (2) If I hover the mouse over the blank chart area, it shows a tip for the bar that is not visible (see screenshot). 

      (3) The dates on the x-axis are in descending order and should be in ascending order.

       

      I would appreciate any help with any of these issues.  Thanks!

       

       

      ChartIssue1.jpg

       

       

      ----------

      Code to display the chart:

       

          <s:NavigatorContent id="navProjectChart" label="Project Chart">

              <mx:BarChart id="bcProjectChart" dataProvider="{chartData}"  left="2" top="40" width="710" includeIn="List" paddingRight="5" paddingLeft="5" showDataTips="true" type="clustered" height="505">

              <mx:horizontalAxis>

                  <mx:DateTimeAxis dataUnits="days" title="Timeline" parseFunction="parseDateStringToDate" />

              </mx:horizontalAxis>

              <mx:verticalAxis>

                  <mx:CategoryAxis categoryField="Name" />

              </mx:verticalAxis>

              <mx:series>

                  <mx:BarSeries xField="EndDate" minField="StartDate" fill="{sc1}" stroke="{s1}" />

              </mx:series>

          </mx:BarChart>

          </s:NavigatorContent>

       

       

      ----------

          protected function parseDateStringToDate(s:String):Date

          {

              var newDate:Date = DateFormatter.parseDateString(s);

              trace("Input string: "+s+", Parsed Date: "+newDate);

              return newDate;

          }

        • 1. Re: FlashBuilder bar chart - data appears only outside chart range
          Deeptika Gottipati Adobe Employee

          Hi,

           

          Can you please send me a sample application at deeptika(at)adobe(dot)com?

           

          I used the following app and it seems to be working fine

           

          <?xml version="1.0"?>

          <!-- Simple example to demonstrate the BubbleChart control. -->

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx">

              <fx:Script>

                  <![CDATA[       

                      import mx.collections.ArrayCollection;

                      import mx.formatters.DateFormatter;

                     

                      [Bindable]

                      private var chartData:ArrayCollection = new ArrayCollection([

                          {Name: "A1", StartDate: new Date(2011,10,10), EndDate: new Date(2011, 11, 10)},

                          {Name: "A2", StartDate: new Date(2011,7,9), EndDate: new Date(2011, 10, 10)}

                          ]);

                     

                      protected function parseDateStringToDate(s:String):Date

                         

                      {

                         

                          var newDate:Date = DateFormatter.parseDateString(s);

                         

                          trace("Input string: "+s+", Parsed Date: "+newDate);

                         

                          return newDate;

                         

                      }

                     

                  ]]>

              </fx:Script>

             

              <s:NavigatorContent id="navProjectChart" label="Project Chart">

                 

                  <mx:BarChart id="bcProjectChart" dataProvider="{chartData}"  left="2" top="40" width="710" 

                               paddingRight="5" paddingLeft="5" showDataTips="true" type="clustered" height="505">

                     

                      <mx:horizontalAxis>

                         

                          <mx:DateTimeAxis dataUnits="days" title="Timeline" />

                         

                      </mx:horizontalAxis>

                     

                      <mx:verticalAxis>

                         

                          <mx:CategoryAxis categoryField="Name" />

                         

                      </mx:verticalAxis>

                     

                      <mx:series>

                         

                          <mx:BarSeries xField="EndDate" minField="StartDate"  />

                         

                      </mx:series>

                     

                  </mx:BarChart>

                 

              </s:NavigatorContent>

             

          </s:Application>

           

          Thanks,

          Deeptika