1 Reply Latest reply on Sep 4, 2009 7:43 AM by Andrew Rosewarn

    Using more data in the DataTips of a LineChart

    Augusto Esteves

      Hi

       

      I was wondering if it's possible to show more information on the DataTips of the LineChart, such as a picture, or simply more information that it's not on the graph.

        • 1. Re: Using more data in the DataTips of a LineChart
          Andrew Rosewarn Level 3

          Yea

           

          Have a look at the dataTipRenderer.  You can use a custom comp to create your tip and then assign it to the chart, see below

           

          MyComp

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="64" backgroundColor="#241616" backgroundAlpha="0.5">
              <mx:Label x="10" y="10" text="{'Y value is : ' + data.chartItem.yValue}" color="#FFFFFF"/>
              <mx:Label x="10" y="36" text="And add what ever else you want." color="#FFFFFF"/>
          </mx:Canvas>

           

          The Application

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
              horizontalAlign="center" >
             
              <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>
             
              <mx:Panel title="LineChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
                   paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
                  
                   <mx:LineChart id="linechart" color="0x323232" height="100%"
                      showDataTips="true" dataProvider="{expensesAC}" dataTipRenderer="MyComp">
                         
                      <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="Month"/>
                      </mx:horizontalAxis>

           

                      <mx:series>
                          <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
                          <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
                          <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
                      </mx:series>
                  </mx:LineChart>

           

                  <mx:Legend dataProvider="{linechart}" color="0x323232"/>
                 
              </mx:Panel>
          </mx:Application>

           

          That shoudl do it

           

          Andrew