1 Reply Latest reply on Jul 15, 2010 8:22 AM by rtalton

    Bar Chart Bar Width

    post2umesh

      I am strugllig hard to have all my bars have a same width. Followig is what the code looks like:

       

      <?xml version="1.0"?>
      <!-- charts/UsingBarSets.mxml -->
      <s:Application
          xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:s="library://ns.adobe.com/flex/spark"
          >
         
          <s:layout>
              <s:VerticalLayout/>
          </s:layout>
         
          <fx:Script><![CDATA[
              import mx.charts.Legend;
              import mx.charts.BarChart;
              import mx.charts.series.BarSet;
              import mx.charts.series.BarSeries;
              import mx.collections.ArrayCollection;
             
              [Bindable]
              private var yearlyData:ArrayCollection = new ArrayCollection([
                  {month:"January", label:"January", planned:5000, funded:5000,
                      spent:4000},
                  {month:"February", label:"February", planned:7000, funded:6000,
                      spent:7000},
                  {month:"March", label:"March", planned:8000, funded:7000,
                      spent:6000},
                  {month:"April", label:"April",planned:10000, funded:1000,
                      spent:12000}
              ]);
             
             
             
              [Bindable]
              private var yearlyData1:ArrayCollection = new ArrayCollection([
                  {month:"January", revenue:120, costs:45,
                      overhead:102, oneTime:23},
                  {month:"February", revenue:108, costs:42,
                      overhead:87, oneTime:47},
                  {month:"March", revenue:150, costs:82,
                      overhead:32, oneTime:21},
                  {month:"April", revenue:170, costs:44,
                      overhead:68},
                  {month:"May", revenue:250, costs:57,
                      overhead:77, oneTime:17},
                  {month:"June", revenue:200, costs:33,
                      overhead:51, oneTime:30},
                  {month:"July", revenue:145, costs:80,
                      overhead:62, oneTime:18},
                  {month:"August", revenue:166, costs:87,
                      overhead:48},
                  {month:"September", revenue:103, costs:56,
                      overhead:42},
                  {month:"October", revenue:140, costs:91,
                      overhead:45, oneTime:60},
                  {month:"November", revenue:100, costs:42,
                      overhead:33, oneTime:67},
                  {month:"December", revenue:182, costs:56,
                      overhead:25, oneTime:48},
                  {month:"May", revenue:120, costs:57,
                      overhead:30}
              ]);
             
             
          ]]></fx:Script>
         
         
              <mx:BarChart id="myChart"
                           dataProvider="{yearlyData}" showDataTips="true"  width="100%" height="100%" >
                  <mx:verticalAxis>
                      <mx:CategoryAxis categoryField="month"/>
                  </mx:verticalAxis>
                  <mx:series>
                      <mx:BarSet type="clustered" >

       

                          <mx:BarSeries xField="planned"
                                        displayName="Planned" />
                          <mx:BarSet type="overlaid">
                              <mx:BarSeries
                                  xField="funded"
                                     displayName="Funded"/>
                              <mx:BarSeries
                                  xField="spent"
                                  displayName="Spent"/>
                          </mx:BarSet>
                      </mx:BarSet>

       

                  </mx:series>
              </mx:BarChart>
             
      </s:Application>

        • 1. Re: Bar Chart Bar Width
          rtalton Level 4

          Take a look at the Bar Chart's barWidthRatio and maxBarWidth styles. They interact with one another,so are a little unpredictable.
          One tactic I use in the case where the bar widths are critical to the design is to set up two horizontal slider and bind the barWidthRatio and maxBarWidth properties to them. Now you can adjust them at run time and watch how they interact, and pick up the most appropriate values to use. Makes it much easier.