Flex Monkey Patches

Flex Charting: Label and Datatip Renderers with HTML Links

March 16th, 2007 by Kyle
Tags: charting, components, datatip-renderer, Flex, flex-charting, label-renderer, mxml, renderer
Posted in: Flex

I wrote a small sample for a customer to demonstrate how to write a Charting Datatip Renderer and Axis Label Renderer that displayed HTML links that when clicked on open up other web pages.

I based my renderers on the TextArea component, since that component has a link event that gets fired off if the TextArea htmlText contains an anchor tag that has an href that contains “event:”.

Here is the DataTip Renderer, 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>

Here is the Axis Label Renderer, 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>

And finally here is a simple app that puts both of them to use:

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