8 Replies Latest reply on Sep 24, 2009 11:43 AM by paul.williams

    BarChart in flex.

    karnatis Level 1

      Hi All,

       

           I'm using Flex BarChart first time and I'm having following question, can anyone please let me know whether this is possible in Flex BarChart.

       

         1)   This below code is displaying 2,3,4,5 and 6 in VerticalAxis, I'd like to show months rather than these numbers like January,February,etc.

       

         2)  When I set value months 2 then it should display bar for January,February.

       

       

       

      --------------------------- Chart.mxml ---------------------------

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
              <![CDATA[
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.ArrayCollection;
                  import mx.messaging.messages.IMessage;
                  import mx.messaging.events.MessageAckEvent;
                  import mx.messaging.messages.AsyncMessage;
                  import mx.messaging.events.MessageEvent;
                 
                 
                 
                  [Bindable]
                      public var proj_plan:Array = [
                          {project:"Project 1", months:2},
                          {project:"Project 2", months:4},
                          {project:"Project 3", months:6},
                          {project:"Project 4", months:3},
                          ];

       


                
              ]]>       
             
          </mx:Script> 
          <mx:VBox width="100%">
              <mx:BarChart width="100%" id="projectChart" dataProvider="{proj_plan}">
                  <mx:horizontalAxis>
                      <mx:CategoryAxis categoryField="project"/>
                  </mx:horizontalAxis>
                 
                            
                  <mx:series>
                      <mx:ColumnSeries xField="project" yField="months"/>
                  </mx:series>
              </mx:BarChart>
            
          </mx:VBox>  
      </mx:Application>

       

      ---------------------------------- Chart.mxml ---------------------------------------------------

       

         Please let me know how to solve these issues.

       

      Thanks,

      Sharath.

        • 1. Re: BarChart in flex.
          karnatis Level 1

          Can anyone let me know how to fix this problem in Flex.

           

          Thanks,

          Sharath.

          • 2. Re: BarChart in flex.
            paul.williams Level 4

            If I understand you correctly you want Project 1, Project 2, etc on the horizontal axis and January, February, March, etc on the Vertical Axis, so for example, the Project 3 column will correspond with June?

             

            To do this, add a vertical axis of type LinearAxis. Use a label function and map the itemValue to the corresponding month string.

             

            The LinearAxis is documented here:

             

            http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html

            • 3. Re: BarChart in flex.
              karnatis Level 1

              Hi Williams,

               

                 I need similar one but it should be based on months not with Numbers, say

               

                 Project1:- is having  Open: 3  Close:5 means we need to show bar from March to May.

                 Project2:- is having  Open: 2  Close:8 means we need to show bar from February to August

               

                In verticalAxis it will display months from January to December.

               

               

                How to do this using Flex BarChart?

               

                Thanks in advance.

               

              Regards,

              Sharath.

              • 4. Re: BarChart in flex.
                paul.williams Level 4

                Take a look at the Floating Column Chart example below:

                 

                http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html

                 

                As stated before you can use the LinearAxis with a label function to display month names on the vertical axis rather than values.

                • 5. Re: BarChart in flex.
                  karnatis Level 1

                  Hi William,

                   

                     I tried below way but here it is displaying only 5 months in vertical axis(January to May) but I need to display January to December and one more thing is that it is not ploting graph because I gave dates in my input array.

                   

                     ------------------------------ Chart1.mxml (Begin) ------------------------------

                   

                     <?xml version="1.0"?>
                  <!-- charts/MinFieldColumn.mxml -->
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                    <mx:Script><![CDATA[
                       import mx.collections.ArrayCollection;
                       import mx.charts.chartClasses.IAxis;
                      
                       [Bindable]
                       public var plan:ArrayCollection = new ArrayCollection([
                          {Project:"Project 1", Start:"01/01/2008", End:"03/01/2008"},
                          {Project:"Project 2", Start:"03/01/2008", End:"06/01/2008"},
                          {Project:"Project 3", Start:"02/01/2008", End:"08/01/2008"},
                          {Project:"Project 4", Start:"06/01/2008", End:"10/01/2008"},
                          {Project:"Project 5", Start:"02/01/2008", End:"12/01/2008"}      
                       ]);
                      
                       private function vAxisFormatter(labelValue:Number, previousValue:Object, axis:IAxis):String
                       {
                           var returnLable:String = "";
                          
                                  if (labelValue == 20)
                                      returnLable = dateFormatterAbbr.format("01/01/2008");
                                  else if(labelValue == 40)
                                      returnLable = dateFormatterAbbr.format("02/01/2008");
                                  else if(labelValue == 60)
                                      returnLable = dateFormatterAbbr.format("03/01/2008");
                                  else if(labelValue == 80)
                                      returnLable = dateFormatterAbbr.format("04/01/2008");
                                  else if(labelValue == 100)
                                      returnLable = dateFormatterAbbr.format("05/01/2008");
                                     
                                  return returnLable;
                                 
                       }
                             
                    ]]></mx:Script>
                    <mx:DateFormatter id="dateFormatterAbbr" formatString="MMM" />
                   
                    <mx:Panel title="Floating Column Chart">
                       <mx:ColumnChart
                          dataProvider="{plan}"
                          showDataTips="true"
                       >
                          <mx:horizontalAxis>
                             <mx:CategoryAxis
                                  dataProvider="{plan}"
                                  categoryField="Project"
                              />
                          </mx:horizontalAxis>
                          <mx:verticalAxis>
                               <mx:LinearAxis title="Month" labelFunction="vAxisFormatter" />
                           </mx:verticalAxis>

                   

                          <mx:series>
                             <mx:ColumnSeries
                                  yField="Start"
                                  minField="End"
                                  displayName="Start"
                              />
                          </mx:series>
                       </mx:ColumnChart>
                    </mx:Panel>
                  </mx:Application>

                   

                   

                     ------------------------------ Chart1.mxml (End)   -------------------------------

                   

                     If I replace input array with below values then it is showing chart.

                   

                       public var plan:ArrayCollection = new ArrayCollection([
                          {Project:"Project 1", Start:"100", End:"250"},
                          {Project:"Project 2", Start:"200", End:"450"},
                          {Project:"Project 3", Start:"350", End:"1200"},
                          {Project:"Project 4", Start:"500", End:"1000"},
                          {Project:"Project 5", Start:"700", End:"1100"}

                   

                   

                    How to give data in dates so that it will plot chart depending upon vertical axis months. I'm new to this and no idea how to resolve this problem.

                   

                    Can anyone please give me solution to overcome this problem.

                   

                    Thanks in advance.

                   

                  Regards,

                  Sharath.

                  • 6. Re: BarChart in flex.
                    karnatis Level 1

                    Hi William,

                     

                    Can you please check this code and let me know how to correct this problem.

                     

                    Thanks in adavnce.

                     

                    Regards,

                    Sharath.

                    • 7. Re: BarChart in flex.
                      karnatis Level 1

                      Can anyone please let me know how to correct this problem.

                       

                      Thanks in adavnce.

                       

                      Regards,

                      Sharath.

                      • 8. Re: BarChart in flex.
                        paul.williams Level 4

                        I'm not sure you'll be able to pass in dates directly, I imagine you'll have to convert them to numbers as you had them before.

                         

                        For displaying January to December on the vertical axis, please take another look at the documentation for LinearAxis:

                         

                        http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html

                         

                        The first few paragraphs cover this in detail.