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



      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



          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




          <?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"/>


          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" >


                  import mx.collections.ArrayCollection;


                  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: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:CategoryAxis categoryField="Month"/>


                          <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:Legend dataProvider="{linechart}" color="0x323232"/>


          That shoudl do it