2 Replies Latest reply on Nov 11, 2010 11:01 PM by lshanka

    Adding image icon to chart horizontal axis

    lshanka

      Hi,

       

      Is it possible to add image icon to a chart's horizontal axis in addition to label?

       

      Any pointers in this regard is greatly appreciated.

       

      Thank you,

        • 1. Re: Adding image icon to chart horizontal axis
          BhaskerChari Level 4

          Hi Ishanka,

           

          You can try this code...Hoping this is what you need

           

          <?xml version="1.0"?>
          <!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

              <mx:Script>
                  <![CDATA[

                  import mx.collections.ArrayCollection;

                  [Bindable]
                  private var expensesAC:ArrayCollection = new ArrayCollection( [
                      { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
                      { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
                      { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
                      { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
                      { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
                  ]]>
              </mx:Script>

              <!-- Define custom colors for use as fills in the AreaChart control. -->
              <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
              <mx:SolidColor id="sc2" color="red" alpha=".3"/>
              <mx:SolidColor id="sc3" color="green" alpha=".3"/>

              <!-- Define custom Strokes. -->
              <mx:Stroke id = "s1" color="blue" weight="2"/>
              <mx:Stroke id = "s2" color="red" weight="2"/>
              <mx:Stroke id = "s3" color="green" weight="2"/>

              <mx:Panel title="LineChart and AreaChart Controls Example"
                  height="100%" width="100%" layout="horizontal">

                  <mx:LineChart id="linechart" height="100%" width="45%"
                      paddingLeft="5" paddingRight="5"
                      showDataTips="true" dataProvider="{expensesAC}">
                         
                      <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="Month"/>
                      </mx:horizontalAxis>

                      <mx:series>
                          <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
                          <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                          <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
                      </mx:series>
                  </mx:LineChart>

                  <mx:Legend dataProvider="{linechart}"/>

                  <mx:AreaChart id="Areachart" height="100%" width="45%"
                       paddingLeft="5" paddingRight="5"
                       showDataTips="true" dataProvider="{expensesAC}">
                          
                      <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="Month"/>
                      </mx:horizontalAxis>
             <mx:horizontalAxisRenderer>
              <mx:AxisRenderer visible="true" axisStroke="{new Stroke(0xBBCCDD,5)}" >
               <mx:labelRenderer>
                <mx:Component>
                 <mx:HBox horizontalGap="1">
                  <mx:Script>
                         <![CDATA[
                
                         override public function set data(value:Object):void
                         {
                          if(value != null)
                          {
                           axisLabel.text = value.text;
                          }
                         }
                         ]]>
                     </mx:Script>

                  <mx:Image source="assets/pin.png" width="10" height="10" maintainAspectRatio="false"/>
                  <mx:Label id="axisLabel"/>
                 </mx:HBox>
                </mx:Component>
               </mx:labelRenderer>
              </mx:AxisRenderer>
             </mx:horizontalAxisRenderer>
                      <mx:series>
                          <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
                          <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
                          <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
                      </mx:series>
                  </mx:AreaChart>
                     
                  <mx:Legend dataProvider="{Areachart}"/>

              </mx:Panel>
          </mx:Application>

           

           

          Thanks,

          Bhasker Chari

          • 2. Re: Adding image icon to chart horizontal axis
            lshanka Level 1

            Thank you very much Bhasker Chari !

             

            It works!

             

            Best Regards.