Flex Charting: Label and Datatip with Hyperlinks

Try this sample application: 

==================================

Application.mxml

================================== 

<?xml version=”1.0″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns=”*“>

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;import mx.charts.chartClasses.DataTip

 

[Bindable]

private var medalsAC:ArrayCollection = new ArrayCollection( [

{ Country: "USA", Gold: 35, Silver:39, Bronze: 29 },{ Country:

"China", Gold: 32, Silver:17, Bronze: 14 },{ Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);

]]>

</mx:Script>

<mx:Panel title=”BarChart Control Example”

height=”100%” width=”100%” layout=”horizontal“>

 

<mx:BarChart id=”bar” paddingLeft=”5” paddingRight=”5“

showDataTips=”true” dataProvider=”{medalsAC}” dataTipRenderer=”MyDataTipRenderer“>

 

<mx:verticalAxis>

<mx:CategoryAxis categoryField=”Country” />

</mx:verticalAxis>

<mx:verticalAxisRenderer>

<mx:AxisRenderer id=”va” placement=”right” labelRenderer=”MyLabelRenderer“/>

</mx:verticalAxisRenderer>

 

<mx:series>

<mx:BarSet type=”stacked” >

<mx:BarSeries yField=”Country” xField=”Gold” displayName=”Gold“/>

<mx:BarSeries yField=”Country” xField=”Silver” displayName=”Silver“/>

<mx:BarSeries yField=”Country” xField=”Bronze” displayName=”Bronze“/>

</mx:BarSet>

</mx:series>

</mx:BarChart>

 

<mx:Legend dataProvider=”{bar}“/>

 

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

==================================

MyDataTipRenderer.mxml

================================== 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml” borderStyle=”outset”

editable=”false” selectable=”true” link=”linkHandler(event)” fontSize=”16” >

 

<mx:Script>

<![CDATA[

 

import flash.events.TextEvent;

 

public function linkHandler(event:TextEvent):void {

// Open the link in a new window.

navigateToURL(new URLRequest(event.text), '_blank')

}

 

override public function set data(value:Object):void

{

super.data=value;htmlText="<a href='event:http://www.google.com/search?hl=en&q=" + data.chartItem.yValue + "+" + data.chartItem.xValue + "&btnG=Google+Search'>" + data.chartItem.yValue + ":" + data.chartItem.xValue + "</a>";

}

]]>

</mx:Script>

</mx:TextArea>

 

==================================

MyLabelRenderer.mxml

================================== 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml” borderStyle=”none” editable=”false” selectable=”true” link=”linkHandler(event)”

creationComplete=”setTxt()” fontSize=”16“>

 

<mx:Script>

<![CDATA[

 

import flash.events.TextEvent;

 

public function linkHandler(event:TextEvent):void {

// Open the link in a new window.

navigateToURL(new URLRequest(event.text), '_blank')

}

 

private function setTxt():void{htmlText="<a href='event:http://www.wikipedia.com/wiki/" + data.value + "'>" + data.value + "</a>";

}

]]>

</mx:Script>

 

</mx:TextArea>