nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Set an image as the background palette for pie charts

Calvin902 · 2012-01-30T08:35:35+00:00

Hi There I searched all over the web and can't find anyone that has done this. I want to set an image as the palette of one of the slice within the pie. I added the image inside the embedded images folder and also at the root folder where the report is located. This is what I tried…

Calvin902

Hi There 
 
I searched all over the web and can't find anyone that has done this. I want to set an image as the palette of one of the slice within the pie. 
 
I added the image inside the embedded images folder and also at the root folder where the report is located. 
 
This is what I tried so far... It seems to fail at the start of the "if" when it tries to switch "fill" from ColorDefinitionImpl to ImageImpl. 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>function beforeDrawDataPoint( dph, fill, icsc )
{
importPackage( Packages.org.eclipse.birt.chart.model.attribute.impl );
var sValue = lerh.getLabel().getCaption().getValue();
if( sValue == "apple" )
{
if (fill.getClass().isAssignableFrom(ImageImpl)){
fill.create(reportContext.getResource("red_and_white.JPG"));
}else{
fill.set( 0,128,255 );
}
}
}</pre>
 
Oh also I'm using birt 2.3.2 and there are no way I can upgrade right now.

Any ideas?

Find more posts tagged with

Comments

mwilliams

And it won't work for you to just add the images to your palette? You need to do it dynamically in script? Let me know.

Calvin902

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="94758" data-time="1327945211" data-date="30 January 2012 - 10:40 AM">
And it won't work for you to just add the images to your palette? You need to do it dynamically in script? Let me know. </blockquote>
Ya I need to use the script because the data returned have a set color that they need to be in. I know you can set it with the UI but I can't get the script to do the same thing. Any ideas?

mwilliams

So far I've been able to set the palette with images in script, but not using "fill". I don't know that that will work for you. I'll let you know if I find more on setting images for individual data points.

Calvin902

<blockquote class='ipsBlockquote' data-author="'mwilliams'" data-cid="94825" data-time="1328071289" data-date="31 January 2012 - 09:41 PM">
So far I've been able to set the palette with images in script, but not using "fill". I don't know that that will work for you. I'll let you know if I find more on setting images for individual data points. </blockquote>
Can I see how you did it with the palette?

mwilliams

Sorry for the delay. You can fill the palette with images like: 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>
importPackage(Packages.org.eclipse.birt.chart.model.attribute.impl);
function beforeGeneration( chart, icsc )
{
var sd = chart.getSeriesDefinitions().get(0);
sd.getSeriesPalette().getEntries().clear();
sd.getSeriesPalette().getEntries().add(ImageImpl.create("http://www.psdgraphics.com/file/yellow-pattern-background.gif"));
sd.getSeriesPalette().getEntries().add(ImageImpl.create("http://www.sron.nl/~jeanz/cai/coded_xrt_fine_small.gif"));
sd.getSeriesPalette().getEntries().add(ImageImpl.create("http://image.naldzgraphics.net/2011/03/1-pattern.jpg"));
}
</pre>

mwilliams

You can set the fill to an image conditionally, like this: 
 
beforeFactory Script: 
<pre class='_prettyXprint _lang-auto _linenums:0'>
var green =reportContext.getDesignHandle().getAllImages().get(0);
var yellow = reportContext.getDesignHandle().getAllImages().get(1);
var red = reportContext.getDesignHandle().getAllImages().get(2);
importPackage(Packages.org.apache.commons.codec.binary)
importPackage(Packages.java.lang);
var green64 = Base64.encodeBase64(green.getData());
var yellow64 = Base64.encodeBase64(yellow.getData());
var red64 = Base64.encodeBase64(red.getData());
var myGreenFill = new String( green64, "UTF-8" );
var myYellowFill = new String( yellow64, "UTF-8" );
var myRedFill = new String( red64, "UTF-8" );
reportContext.setPersistentGlobalVariable("green", myGreenFill);
reportContext.setPersistentGlobalVariable("yellow", myYellowFill);
reportContext.setPersistentGlobalVariable("red", myRedFill);
</pre>
 
 
Chart Script: 
<pre class='_prettyXprint _lang-auto _linenums:0'>
importPackage(Packages.org.eclipse.birt.chart.model.attribute.impl);

function beforeDrawDataPoint( dph, fill, icsc )
{
var rc = icsc.getExternalContext().getScriptable();
if (fill.getClass().isAssignableFrom(EmbeddedImageImpl)){
// PGVs set in beforeFactory
if (dph.getBaseDisplayValue() == "green"){
fill.setData(rc.getPersistentGlobalVariable("green"));
}
else if (dph.getBaseDisplayValue() == "yellow"){
fill.setData(rc.getPersistentGlobalVariable("yellow"));
}
else {
fill.setData(rc.getPersistentGlobalVariable("red"));
}
}
}

function beforeDrawLegendItem( lerh, bounds, icsc )
{
var rc = icsc.getExternalContext().getScriptable();
if (lerh.getFill().getClass().isAssignableFrom(EmbeddedImageImpl)){
// PGVs set in beforeFactory
if (lerh.getLabel().getCaption().getValue() == "green"){
lerh.getFill().setData(rc.getPersistentGlobalVariable("green"));
}
else if (lerh.getLabel().getCaption().getValue() == "yellow"){
lerh.getFill().setData(rc.getPersistentGlobalVariable("yellow"));
}
else {
lerh.getFill().setData(rc.getPersistentGlobalVariable("red"));
}
}
}

</pre>
 
The images are added as embedded images in the report outline. For this to work, you'll need to make sure your palette is filled with embedded images. If you have it filled with colors, it won't work exactly like this. You'd have to figure out how to set the fill type before trying to assign an image to a color type fill. 
 
Hope this helps.