Thursday, June 25, 2009

Nike+: Update to Site Requires Additional Exemptions in AdBlock Plus

I wrote previously about needing to add an exemption for Nike Plus if you are running Firefox with AdBlock Plus. Two days ago Nike did some updates to the Nikeplus site, and the original issue of just getting a white screen came up again. Turns out, there is a new domain needed to add to the exemption list.

So, adding a new exemption like so will get around this:
@@http://nikerunning.nike.com

I will need to investigate further, I am fairly sure you can a wildcard, like either @@.nike.com, or maybe @@*.nike.com to get around this, the only concern for me are ads that come from the Nike domain...

Wednesday, June 17, 2009

BIRT - Highlight Chart Series on MouseOver Event

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 &lt;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[&quot;count&quot;]</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);&#xD;
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[&quot;id&quot;]</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>