One of the most common requests I hear with BIRT charting is that people want interactive charts. So, when someone mouse over a series in a Pie Chart, they would like to see that series jump out, or highlight. I’ve heard this request over and over again.
The problem is that BIRT charts render charts as single images. So, when you render a chart, it renders a JPG or a PNG file, and when it displays in the browser, it displays with an image map to handle interactivity. This makes doing a highlighting chart series very difficult. Typically the solutions that is given is to use the SVG output for charts. While this will work, I don’t like the solution for a number of reasons. First, the behavior is not consistent. Secondly, SVG is not a standard format. In some browsers it requires a plugin.
So, I took a page out of history to come up with a solution. This harkens back to the yesteryear of the good old image swap Javascript. The solution is simple. Basically, BIRT will render the chart multiple times, once for ever series in the chart. It does so by using a script in the initialize tag (this needs to be done during the generation phase, I used Initialize in this example). The script reads the parent chart, makes a copy, and modifies the explosion expression to explode only a single series. Once completed, a Javascript on the client side will retrieve the chart images by ID and store them in an array. The Chart interactivity will then call a swap function when the user mouse-overs that particular series, causing it to swap. The example report below leave room for improvement, but it is a workable example of how this can be accomplished. I combined this example with an example on BIRT Exchange that shows how to highlight of table rows that correspond to the chart series. This gives it a little extra umph.
<?xml version="1.0" encoding="UTF-8"?>
<report xmlns="http://www.eclipse.org/birt/2005/design" version="3.2.17" id="1">
<property name="createdBy">Eclipse BIRT Designer Version 2.3.2.r232_20090202 Build <2.3.2.v20090218-0730></property>
<property name="units">in</property>
<method name="initialize"><![CDATA[var reportDesignHandle = reportContext.getReportRunnable().getDesignHandle();
var re = reportDesignHandle.findElement("NewChart");
var pieChart = re.getReportItem().getProperty("chart.instance");
for (var x = 1; x <= 20; x++)
{
importPackage(Packages.org.eclipse.emf.ecore.util);
var chartCopy = EcoreUtil.copy(pieChart);
var outerSeries = chartCopy.getSeriesDefinitions().get(0);
var innerSeries = outerSeries.getSeriesDefinitions().get(0);
var pieSeries = innerSeries.getSeries().get(0);
pieSeries.setExplosionExpression("valueData == " + x);
pieSeries.setExplosion(5);
var eih = reportDesignHandle.getElementFactory().newExtendedItem("chart-" + x, "Chart");
eih.getReportItem().setProperty("chart.instance", chartCopy);
eih.setBookmark("\"Chart-" + x + "\"");
re.getContainerSlotHandle().add(eih);
}]]></method>
<property name="iconFile">/templates/blank_report.gif</property>
<property name="bidiLayoutOrientation">ltr</property>
<data-sources>
<script-data-source name="Data Source" id="7"/>
</data-sources>
<data-sets>
<script-data-set name="Data Set" id="8">
<list-property name="resultSetHints">
<structure>
<property name="position">0</property>
<property name="name">id</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">1</property>
<property name="name">count</property>
<property name="dataType">integer</property>
</structure>
</list-property>
<list-property name="columnHints">
<structure>
<property name="columnName">id</property>
</structure>
<structure>
<property name="columnName">count</property>
</structure>
</list-property>
<structure name="cachedMetaData">
<list-property name="resultSet">
<structure>
<property name="position">1</property>
<property name="name">id</property>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="position">2</property>
<property name="name">count</property>
<property name="dataType">integer</property>
</structure>
</list-property>
</structure>
<property name="dataSource">Data Source</property>
<method name="open"><![CDATA[count = 0;
id = 0;]]></method>
<method name="fetch"><![CDATA[if (id < 20)
{
id++;
count++;
row["id"] = id;
row["count"] = count;
return true;
}
return false;]]></method>
</script-data-set>
</data-sets>
<styles>
<style name="report" id="4">
<property name="fontFamily">"Verdana"</property>
<property name="fontSize">10pt</property>
</style>
<style name="crosstab-cell" id="5">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
<style name="crosstab" id="6">
<property name="borderBottomColor">#CCCCCC</property>
<property name="borderBottomStyle">solid</property>
<property name="borderBottomWidth">1pt</property>
<property name="borderLeftColor">#CCCCCC</property>
<property name="borderLeftStyle">solid</property>
<property name="borderLeftWidth">1pt</property>
<property name="borderRightColor">#CCCCCC</property>
<property name="borderRightStyle">solid</property>
<property name="borderRightWidth">1pt</property>
<property name="borderTopColor">#CCCCCC</property>
<property name="borderTopStyle">solid</property>
<property name="borderTopWidth">1pt</property>
</style>
</styles>
<page-setup>
<simple-master-page name="Simple MasterPage" id="2">
<property name="topMargin">0.25in</property>
<property name="leftMargin">0.25in</property>
<property name="bottomMargin">0.25in</property>
<property name="rightMargin">0.25in</property>
<page-footer>
<text id="3">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<value-of>new Date()</value-of>]]></text-property>
</text>
</page-footer>
</simple-master-page>
</page-setup>
<body>
<table id="9">
<property name="width">100%</property>
<property name="dataSet">Data Set</property>
<list-property name="boundDataColumns">
<structure>
<property name="name">id</property>
<property name="displayName">id</property>
<expression name="expression">dataSetRow["id"]</expression>
<property name="dataType">integer</property>
</structure>
<structure>
<property name="name">count</property>
<property name="displayName">count</property>
<expression name="expression">dataSetRow["count"]</expression>
<property name="dataType">integer</property>
</structure>
</list-property>
<column id="23"/>
<column id="24"/>
<header>
<row id="25">
<cell id="26">
<property name="colSpan">2</property>
<property name="rowSpan">1</property>
<extended-item extensionName="Chart" name="NewChart" id="29">
<xml-property name="xmlRepresentation"><![CDATA[<model:ChartWithoutAxes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:attribute="http://www.birt.eclipse.org/ChartModelAttribute" xmlns:layout="http://www.birt.eclipse.org/ChartModelLayout" xmlns:model="http://www.birt.eclipse.org/ChartModel" xmlns:type="http://www.birt.eclipse.org/ChartModelType">
<Type>Pie Chart</Type>
<SubType>Standard</SubType>
<Block>
<Children xsi:type="layout:TitleBlock">
<Bounds>
<Left>0.0</Left>
<Top>0.0</Top>
<Width>0.0</Width>
<Height>0.0</Height>
</Bounds>
<Insets>
<Top>3.0</Top>
<Left>3.0</Left>
<Bottom>3.0</Bottom>
<Right>3.0</Right>
</Insets>
<Row>-1</Row>
<Column>-1</Column>
<Rowspan>-1</Rowspan>
<Columnspan>-1</Columnspan>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Visible>true</Visible>
<Label>
<Caption>
<Value>Highlight Chart</Value>
<Font>
<Size>16.0</Size>
<Bold>true</Bold>
<Alignment>
<horizontalAlignment>Center</horizontalAlignment>
<verticalAlignment>Center</verticalAlignment>
</Alignment>
</Font>
</Caption>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>0</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>2.0</Left>
<Bottom>0.0</Bottom>
<Right>3.0</Right>
</Insets>
<Visible>true</Visible>
</Label>
</Children>
<Children xsi:type="layout:Plot">
<Bounds>
<Left>0.0</Left>
<Top>0.0</Top>
<Width>0.0</Width>
<Height>0.0</Height>
</Bounds>
<Insets>
<Top>3.0</Top>
<Left>3.0</Left>
<Bottom>3.0</Bottom>
<Right>3.0</Right>
</Insets>
<Row>-1</Row>
<Column>-1</Column>
<Rowspan>-1</Rowspan>
<Columnspan>-1</Columnspan>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Visible>true</Visible>
<HorizontalSpacing>5</HorizontalSpacing>
<VerticalSpacing>5</VerticalSpacing>
<ClientArea>
<Outline>
<Style>Solid</Style>
<Thickness>0</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>0.0</Left>
<Bottom>0.0</Bottom>
<Right>0.0</Right>
</Insets>
</ClientArea>
</Children>
<Children xsi:type="layout:Legend">
<Bounds>
<Left>0.0</Left>
<Top>0.0</Top>
<Width>0.0</Width>
<Height>0.0</Height>
</Bounds>
<Insets>
<Top>3.0</Top>
<Left>3.0</Left>
<Bottom>3.0</Bottom>
<Right>3.0</Right>
</Insets>
<Row>-1</Row>
<Column>-1</Column>
<Rowspan>-1</Rowspan>
<Columnspan>-1</Columnspan>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Visible>true</Visible>
<ClientArea>
<Outline>
<Style>Solid</Style>
<Thickness>0</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Insets>
<Top>2.0</Top>
<Left>2.0</Left>
<Bottom>2.0</Bottom>
<Right>2.0</Right>
</Insets>
</ClientArea>
<Text>
<Value></Value>
<Font>
<Alignment/>
</Font>
</Text>
<Orientation>Vertical</Orientation>
<Direction>Top_Bottom</Direction>
<Separator>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>true</Visible>
</Separator>
<Position>Right</Position>
<ItemType>Categories</ItemType>
<Title>
<Caption>
<Value></Value>
<Font>
<Alignment/>
</Font>
</Caption>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>0</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>2.0</Left>
<Bottom>0.0</Bottom>
<Right>3.0</Right>
</Insets>
<Visible>false</Visible>
</Title>
<TitlePosition>Above</TitlePosition>
</Children>
<Bounds>
<Left>0.0</Left>
<Top>0.0</Top>
<Width>561.75</Width>
<Height>351.75</Height>
</Bounds>
<Insets>
<Top>3.0</Top>
<Left>3.0</Left>
<Bottom>3.0</Bottom>
<Right>3.0</Right>
</Insets>
<Row>-1</Row>
<Column>-1</Column>
<Rowspan>-1</Rowspan>
<Columnspan>-1</Columnspan>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Visible>true</Visible>
</Block>
<Dimension>Two_Dimensional</Dimension>
<Units>Points</Units>
<SeriesThickness>10.0</SeriesThickness>
<GridColumnCount>0</GridColumnCount>
<SampleData>
<BaseSampleData>
<DataSetRepresentation>'A','B','C','D','E'</DataSetRepresentation>
</BaseSampleData>
<OrthogonalSampleData>
<DataSetRepresentation>6,4,12,8,10</DataSetRepresentation>
<SeriesDefinitionIndex>0</SeriesDefinitionIndex>
</OrthogonalSampleData>
</SampleData>
<Interactivity>
<Enable>true</Enable>
<LegendBehavior>None</LegendBehavior>
</Interactivity>
<SeriesDefinitions>
<Query>
<Definition></Definition>
</Query>
<SeriesPalette>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>80</Red>
<Green>166</Green>
<Blue>218</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>242</Red>
<Green>88</Green>
<Blue>106</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>232</Red>
<Green>172</Green>
<Blue>57</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>255</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>64</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>170</Red>
<Green>85</Green>
<Blue>85</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>192</Red>
<Green>192</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>192</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>7</Red>
<Green>146</Green>
<Blue>94</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>128</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>255</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>0</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>64</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>80</Red>
<Green>240</Green>
<Blue>120</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>64</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>0</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>0</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>64</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>0</Blue>
</Entries>
</SeriesPalette>
<SeriesDefinitions>
<Query>
<Definition></Definition>
</Query>
<SeriesPalette>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>80</Red>
<Green>166</Green>
<Blue>218</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>242</Red>
<Green>88</Green>
<Blue>106</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>232</Red>
<Green>172</Green>
<Blue>57</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>255</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>64</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>170</Red>
<Green>85</Green>
<Blue>85</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>192</Red>
<Green>192</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>192</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>7</Red>
<Green>146</Green>
<Blue>94</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>128</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>255</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>192</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>0</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>64</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>80</Red>
<Green>240</Green>
<Blue>120</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>64</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>0</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>0</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>64</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>128</Red>
<Green>128</Green>
<Blue>128</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>64</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Entries>
<Entries xsi:type="attribute:ColorDefinition">
<Transparency>255</Transparency>
<Red>255</Red>
<Green>128</Green>
<Blue>0</Blue>
</Entries>
</SeriesPalette>
<Series xsi:type="type:PieSeries">
<Visible>true</Visible>
<Label>
<Caption>
<Value></Value>
<Font>
<Alignment/>
</Font>
</Caption>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>0</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>2.0</Left>
<Bottom>0.0</Bottom>
<Right>3.0</Right>
</Insets>
<Visible>true</Visible>
</Label>
<DataDefinition>
<Definition>row["count"]</Definition>
</DataDefinition>
<SeriesIdentifier></SeriesIdentifier>
<DataPoint>
<Components>
<Type>Orthogonal_Value</Type>
</Components>
<Separator>, </Separator>
</DataPoint>
<LabelPosition>Outside</LabelPosition>
<Stacked>false</Stacked>
<Triggers>
<Condition>onmouseover</Condition>
<Action>
<Type>Invoke_Script</Type>
<Value xsi:type="attribute:ScriptValue">
<Script>swapImage(categoryData);
highlight(categoryData);</Script>
</Value>
</Action>
</Triggers>
<Explosion>0</Explosion>
<ExplosionExpression></ExplosionExpression>
<Title>
<Caption>
<Value></Value>
<Font>
<Size>16.0</Size>
<Bold>true</Bold>
<Alignment/>
</Font>
</Caption>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>0</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>2.0</Left>
<Bottom>0.0</Bottom>
<Right>3.0</Right>
</Insets>
<Visible>true</Visible>
</Title>
<TitlePosition>Below</TitlePosition>
<LeaderLineAttributes>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>true</Visible>
</LeaderLineAttributes>
<LeaderLineStyle>Fixed_Length</LeaderLineStyle>
<LeaderLineLength>10.0</LeaderLineLength>
</Series>
<Grouping>
<Enabled>false</Enabled>
<GroupingInterval>1.0</GroupingInterval>
<GroupType>Text</GroupType>
<AggregateExpression>Sum</AggregateExpression>
</Grouping>
</SeriesDefinitions>
<Series>
<Visible>true</Visible>
<Label>
<Caption>
<Value></Value>
<Font>
<Alignment/>
</Font>
</Caption>
<Background xsi:type="attribute:ColorDefinition">
<Transparency>0</Transparency>
<Red>255</Red>
<Green>255</Green>
<Blue>255</Blue>
</Background>
<Outline>
<Style>Solid</Style>
<Thickness>1</Thickness>
<Color>
<Transparency>255</Transparency>
<Red>0</Red>
<Green>0</Green>
<Blue>0</Blue>
</Color>
<Visible>false</Visible>
</Outline>
<Insets>
<Top>0.0</Top>
<Left>2.0</Left>
<Bottom>0.0</Bottom>
<Right>3.0</Right>
</Insets>
<Visible>false</Visible>
</Label>
<DataDefinition>
<Definition>row["id"]</Definition>
</DataDefinition>
<SeriesIdentifier></SeriesIdentifier>
<DataPoint>
<Components>
<Type>Orthogonal_Value</Type>
</Components>
<Separator>, </Separator>
</DataPoint>
<LabelPosition>Outside</LabelPosition>
<Stacked>false</Stacked>
</Series>
<Grouping>
<Enabled>false</Enabled>
<GroupingInterval>1.0</GroupingInterval>
<GroupType>Text</GroupType>
<AggregateExpression>Sum</AggregateExpression>
</Grouping>
</SeriesDefinitions>
</model:ChartWithoutAxes>
]]></xml-property>
<property name="outputFormat">PNG</property>
<expression name="bookmark">"Chart-Main"</expression>
<property name="height">4.885416666666667in</property>
<property name="width">7.802083333333333in</property>
</extended-item>
</cell>
</row>
<row id="10">
<property name="textAlign">left</property>
<cell id="11">
<label id="12">
<text-property name="text">id</text-property>
</label>
</cell>
<cell id="13">
<label id="14">
<text-property name="text">count</text-property>
</label>
</cell>
</row>
</header>
<detail>
<row id="15">
<expression name="bookmark">row["id"]</expression>
<cell id="16">
<data id="17">
<property name="resultSetColumn">id</property>
</data>
</cell>
<cell id="18">
<data id="19">
<property name="resultSetColumn">count</property>
</data>
</cell>
</row>
</detail>
<footer>
<row id="20">
<cell id="21">
<text id="31">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<script type="text/javascript">
/**
Javascript for setting up hte image swap from all the chart instances
**/
imageArray = new Array();
mainImageSrc = document.getElementById("Chart-Main").src;
for (x = 0; x < 20; x++)
{
currentImage = document.getElementById("Chart-" + (x + 1));
imageArray[x] = currentImage;
currentImage.style.display = "none";
}
function swapImage(num)
{
mainImage = document.getElementById("Chart-Main");
mainImage.src = imageArray[num - 1].src;
}
function showMain()
{
document.getElementById("Image-Main").src = mainImageSrc;
}
</script>]]></text-property>
</text>
</cell>
<cell id="22">
<text id="30">
<property name="contentType">html</property>
<text-property name="content"><![CDATA[<!-- Dummy tag to get parent nodes -->
<div id="tableAnchor"></div>
<script>
// Get the table object itself
var o = document.getElementById("tableAnchor");
while(o != null){
if (o.tagName == "TBODY")
break;
o = o.parentNode;
}
// Add the mouseover event to each of the table rows
for (var i = 1; i < o.children.length; i++) {
var ro = o.children[i];
ro.onmouseover = function(){highlight(this.id);swapImage(this.id);};
ro.onmouseout = function(){unhighlight(this.id);};
}
// Highlight function is called from mouseove events (see above)
// and also from chart mouseover events.
var g_previousHighlight = "";
function highlight(category) {
// Remove previous highlight (if any)
if (g_previousHighlight > "") {
var o = document.getElementById(g_previousHighlight);
o.style.backgroundColor="";
}
// Apply new highlight
var o = document.getElementById(category);
o.style.backgroundColor="#8080ff";
g_previousHighlight = category;
}
function unhighlight(category) {
// Remove previous highlight (if any)
if (g_previousHighlight > "") {
var o = document.getElementById(g_previousHighlight);
o.style.backgroundColor="";
}
// Apply new highlight
var o = document.getElementById(category);
o.style.backgroundColor="#FFFFFF";
g_previousHighlight = category;
}
</script>]]></text-property>
</text>
</cell>
</row>
</footer>
</table>
</body>
</report>
Posts
4 comments:
Hi John,
nice example, but it only works if you disable the ability for svg charts in the preferences of the report designer, otherwise the multiple copies of the chart are referenced as svg images in the resulting report output.
Yeah, but if your using SVG, you don't need this example anyhow. There is already a highlight option for SVG mouse over events.
hi John Ward,
I am using SVG format and using highlight on value series as well as legend but m not able to figure out any changes on mouse-over event.
hi John Ward,
I am using pie-chart in SVG format and trying to use highlight facility but I am not able to figure out any changes while i do mouse over.I had added highlight option on legend mouse over but it seems that it is not working.please help me.
Post a Comment