FusionCharts allows user-end interactivity through tooltips, which are displayed when the user moves the mouse cursor over the data plots of the chart. The tooltip displays information pertaining to the data plot on which the mouse cursor is positioned. By default a tooltip will be wrapped if it exceeds the maximum chart width. However, we also allow the use of a special token for breaking up tool-tip text into multiple lines.
The token to be used as a line break is {br}. The code below shows implementation of the token in XML string:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" FCDataXML="{xmlData}"/>
<mx:Script>
<![CDATA[
//Chart data with line-break in tooltip
[Bindable]
private var xmlData:String="<chart>" +
"<set label='John' value='420' tooltext='John Miller{br}Score: 420{br}Rank:2'/>" +
"<set label='Mary' value='295' tooltext='Mary Evans{br}Score: 295{br}Rank:3'/>" +
"<set label='Tom' value='523' tooltext='Tom Bowler{br}Score: 523{br}Rank:1'/>" +
"</chart>";
]]>
</mx:Script>
</mx:Application>
The above code renders the following chart:
FusionCharts for Flex allows developers to represent tooltip definitions in Array, XMList, or Model. The following code demonstrates the implementation of the token in Array:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" >
<ns1:FCChartData FCData="{xmlData}" />
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var xmlData:ArrayCollection=new ArrayCollection([
{ label:'John', value:'420', tooltext: 'John Miller{br}Score: 420{br}Rank:2' },
{ label:'Mary', value:'295', tooltext: 'Mary Evans{br}Score: 295{br}Rank:3'},
{ label:'Tom', value:'523', tooltext: 'Tom Bowler{br}Score: 523{br}Rank:1'}
]);
]]>
</mx:Script>
</mx:Application>
In the code (above), we have created a standard single-series ArrayCollection object and then bind it to our FCData attribute. The actual manipulation is done within the value of the tooltext parameter, where {br} token has been used to denote line breaks.
Let us go through the equivalent example using XMLList:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" >
<ns1:FCChartData FCData="{xmlData.data[0]}" />
</ns1:FusionCharts>
<mx:Script>
<![CDATA[
[Bindable]
private var xmlData:XML=
<main>
<data>
<data label='John' value='420' tooltext='John Miller{br}Score: 420{br}Rank:2'/>
<data label='Mary' value='295' tooltext='Mary Evans{br}Score: 295{br}Rank:3'/>
<data label='Tom' value='523' tooltext='Tom Bowler{br}Score: 523{br}Rank:1'/>
</data>
</main>;
]]>
</mx:Script>
</mx:Application>
While using Model data structure, we cannot use {br} token as {expression). This is because in Flex, it implies data-binding. So we must declare the curly braces as an escape sequence. Thus, while using Model data structure, line break token should be declared as \{br\}.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCChartType="Column2D" >
<ns1:FCChartData FCData="{xmlData.data}" />
</ns1:FusionCharts>
<mx:Model id="xmlData">
<chart>
<data>
<label>John</label>
<value>420</value>
<tooltext>John Miller\{br\}Score: 420\{br\}Rank:2</tooltext>
</data>
<data>
<label>Mary</label>
<value>295</value>
<tooltext>Mary Evans\{br\}Score: 295\{br\}Rank:3</tooltext>
</data>
<data>
<label>Tom</label>
<value>523</value>
<tooltext>Tom Bowler\{br\}Score: 523\{br\}Rank:1</tooltext>
</data>
</chart>
</mx:Model>
</mx:Application>