4 Replies Latest reply on Mar 3, 2010 10:49 AM by BosDog

    Bar Chart horizontal x axis currency format

    BosDog Level 1

      I'm having trouble setting the currency format to USD with dollar sign for a bar chart. Here is the code to my bar chart. I'm trying to format the TOTAL value from my dataprovider:

       

      <mx:BarChart

       

       

      width="80%" height="100%" id="myChart" dataProvider="{QueryService.salesStages.lastResult}" showDataTips="true">

       

       

      <mx:verticalAxis>

       

      <mx:CategoryAxis dataProvider="{QueryService.salesStages.lastResult}" categoryField="STG_NAME" />

       

       

      </mx:verticalAxis>

       

       

      <mx:series>

       

       

      <mx:BarSeries xField="TOTAL" yField="STG_NAME"

      displayName="

      Sales Stage" showDataEffect="slideIn" />

       

       

      </mx:series>

      </mx:BarChart>

       

      I've tried labelfunction and everything with examples on the net... all leading to errors or just not formatting it. If someone could please help.

       

      Thanks!

        • 1. Re: Bar Chart horizontal x axis currency format
          Gregory Lafrance Level 6

          You may need to set the labelPosition property, and see my labelFunction below

          .

          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Script>
              <![CDATA[
                import mx.charts.series.items.BarSeriesItem;
                import mx.charts.ChartItem;
                import mx.charts.chartClasses.Series;
                import mx.collections.ArrayCollection;
                
                [Bindable] public var expenses:ArrayCollection = 
                  new ArrayCollection([
                  {Month:"Jan", Profit:2000, Expenses:1500},
                  {Month:"Feb", Profit:1000, Expenses:200},
                  {Month:"Mar", Profit:1500, Expenses:500}
                ]);
                
                private function formatCurrency(element:ChartItem, series:Series):String{
                  var item:BarSeriesItem = BarSeriesItem(element);
                  return(cf.format(item.xNumber));        
                }
              ]]>
            </mx:Script>
            <mx:CurrencyFormatter id="cf" precision="2" currencySymbol="$"/>
            <mx:Panel title="Bar Chart">
              <mx:BarChart id="myChart" dataProvider="{expenses}" 
                showDataTips="true">
                <mx:verticalAxis>
                  <mx:CategoryAxis dataProvider="{expenses}" 
                    categoryField="Month"/>
                </mx:verticalAxis>
                <mx:series>
                  <mx:BarSeries yField="Month" xField="Profit" labelPosition="outside" 
                    displayName="Profit" labelFunction="formatCurrency"/>
                  <mx:BarSeries yField="Month" xField="Expenses" labelPosition="outside" 
                    displayName="Expenses" labelFunction="formatCurrency"/>
                </mx:series>
              </mx:BarChart>
              <mx:Legend dataProvider="{myChart}"/>
            </mx:Panel>
          </mx:Application>
          
          • 2. Re: Bar Chart horizontal x axis currency format
            BosDog Level 1

            Hey Greg,

            I appreciate your help. I used your code and tweaked it to fit my dataprovider.

             

            I do see the currency format but its on the actualy bars themselves... not on the x-axis of the entire graph. This is where I'd like the currency format to be applied. Is this not possible in Flex? I attached a screenshot of my program output... if it doesn't come through i could email you

             

            graph.jpg

             

            Thanks!

            • 3. Re: Bar Chart horizontal x axis currency format
              Gregory Lafrance Level 6

              This seems to work, though you may have to find a way to programtically set the min and max.

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                <mx:Script>
                  <![CDATA[
                    import mx.charts.chartClasses.IAxis;
                    import mx.collections.ArrayCollection;
                    
                    [Bindable] public var expenses:ArrayCollection = 
                      new ArrayCollection([
                      {Month:"Jan", Profit:2000, Expenses:1500},
                      {Month:"Feb", Profit:1000, Expenses:200},
                      {Month:"Mar", Profit:1500, Expenses:500}
                    ]);
                    
                    private function formatCurrency(labelValue:Object, previousValue:Object, axis:IAxis):String{
                      return(cf.format(labelValue));        
                    }
                  ]]>
                </mx:Script>
                <mx:CurrencyFormatter id="cf" precision="2" currencySymbol="$"/>
                <mx:Panel title="Bar Chart">
                  <mx:BarChart id="myChart" dataProvider="{expenses}" 
                    showDataTips="true">
                    <mx:verticalAxis>
                      <mx:CategoryAxis dataProvider="{expenses}" 
                        categoryField="Month"/>
                    </mx:verticalAxis>
                    <mx:horizontalAxis>
                      <mx:LinearAxis minimum="0" maximum="2000" labelFunction="formatCurrency"/>
                    </mx:horizontalAxis>
                    <mx:series>
                      <mx:BarSeries yField="Month" xField="Profit" labelPosition="outside" 
                        displayName="Profit"/>
                      <mx:BarSeries yField="Month" xField="Expenses" labelPosition="outside" 
                        displayName="Expenses"/>
                    </mx:series>
                  </mx:BarChart>
                  <mx:Legend dataProvider="{myChart}"/>
                </mx:Panel>
              </mx:Application>


              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services

              • 4. Re: Bar Chart horizontal x axis currency format
                BosDog Level 1

                awesome thanks! i'm suprised i can't put a dataprovider in the linearaxis tag. if i give that tag an ID i should prob be able to get the max value from my dataset and set the maximum equal to that?

                 

                any tips on getting the datatip to also show the currency format?

                 

                again thanks for your help.