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; } } }

Images on stacked bars

OhPun

I am trying to create a stacked bar chart where each section of the stack is filled with a color (no problem) or an image. This works quite well for pie and non-stacked bar charts. Attached is an image of a bar chart with images filling some of the bars (mostly on the right side). Basically I want to stack these bars by type. 
 
Currently, I am using scripting to color the stacked bars because I can not figure out how to set the default color palette. When I use an image, I get an error because the fill passed into beforeDrawDataPoint is already ColorDefinitonImpl. So, I either need to figure out how to set the palette or figure out how to get an EmbeddedImageImpl fill passed into beforeDrawDataPoint. 
 
Code for creating the stacked bar chart is below with comments. 
 
Each ArrayList of Fill (not the BIRT Fill) is placed into a single stacked bar, so all other bars are populated with zero for that item. This all works correctly, but I can not get the section of the stacked bar to fill with an image. 
 
public static void stackedbarChart(PPS pps, LinkedHashMap<String, ArrayList<Fill>> data) 
{ 
if ((data == null) || (data.size() < 1)) 
{ 
// PPS.diagnose("Chart.barChart data is null"); //$NON-NLS-1$ 
return; // nothing to chart 
} 
 
if (pps == null) 
{ 
// PPS.diagnose("Chart.barChart pps is null"); //$NON-NLS-1$ 
return; 
} 
 
String baseTag = chartType.getBaseTag(), 
tag = null; 
 
// Data Set 
// use data in order given 
 
String fileName = "Chart.png"; 
 
ChartWithAxes cwaBar = ChartWithAxesImpl.create( ); 
cwaBar.setDimension( ChartDimension.TWO_DIMENSIONAL_LITERAL ); 
cwaBar.setType("Bar Chart"); //$NON-NLS-1$ 
cwaBar.setSubType("Stacked"); //$NON-NLS-1$ 
/* */ 
StringBuilder script = new StringBuilder("importClass( com.performanceplanningsystem.site.setup.Setup );\n") //$NON-NLS-1$ 
.append("importClass( com.performanceplanningsystem.site.setup.Fill );\n") //$NON-NLS-1$ 
.append("importClass( org.eclipse.swt.graphics.RGB );\n") //$NON-NLS-1$ 
.append("importClass( com.performanceplanningsystem.ui.actions.Chart );\n") //$NON-NLS-1$ 
.append("function beforeDrawDataPoint(dph, fill, icsc)\n") //$NON-NLS-1$ 
.append("{\n") //$NON-NLS-1$ 
.append(" importClass( java.lang.Iterable );\n") //$NON-NLS-1$ 
.append(" importPackage( Packages.org.eclipse.birt.chart.model.attribute.impl );\n") 
.append(" dphSeriesName = dph.getSeriesDisplayValue();\n") //$NON-NLS-1$ 
// .append(" Packages.java.lang.System.out.println(\"beforeDrawDataPoint \"+dphName);\n") //$NON-NLS-1$ 
.append(" fillList = Setup.getPps().getSite().getSetup().getFillMap().values().toArray();\n" ) //$NON-NLS-1$ 
.append(" for (i=0;i<fillList.length;i=i+1)\n") //$NON-NLS-1$ 
.append(" {\n") //$NON-NLS-1$ 
.append(" f = fillList;\n") //$NON-NLS-1$ 
.append(" desc = f.getName();\n") //$NON-NLS-1$ 
.append(" if (dphSeriesName == desc) {\n") //$NON-NLS-1$ 
// Chart.getFillImpl() returns either at ColorDefinitionImpl or EmbeddedImageImpl 
.append(" seriesFill = Chart.getFillImpl(f);\n") 
.append(" if(seriesFill instanceof ColorDefinitionImpl){\n") 
.append(" Packages.java.lang.System.out.println(\"beforeDrawDataPoint found series color\"+desc);\n") //$NON-NLS-1$ 
.append(" fill.setType(seriesFill.getType());\n") 
.append(" fill.setRed(seriesFill.getRed());\n") 
.append(" fill.setGreen(seriesFill.getGreen());\n") 
.append(" fill.setBlue(seriesFill.getBlue());\n") 
.append(" fill.setTransparency(seriesFill.getTransparency());\n") 
.append(" return;\n") 
.append(" }\n") 
.append(" else if(seriesFill instanceof EmbeddedImageImpl){\n") 
.append(" Packages.java.lang.System.out.println(\"beforeDrawDataPoint found series image\"+desc);\n") //$NON-NLS-1$ 
.append(" fill.setType(seriesFill.getType());\n") 
.append(" fill.setData(seriesFill.geData());\n") 
.append(" return;\n") 
.append(" }\n") 
.append(" }\n") //$NON-NLS-1$ 
.append(" }\n") //$NON-NLS-1$ 
.append("}\n") //$NON-NLS-1$ 
.append("function beforeDrawSeries(series, isr, icsc)\n") 
.append("{\n") //$NON-NLS-1$ 
.append("}\n") //$NON-NLS-1$ 
; 
 
cwaBar.setScript(script.toString()); 
/* */ 
 
// set chart background color 
ColorDefinition backgroundColor = ColorDefinitionImpl.WHITE(); 
backgroundColor.setTransparency(255); 
cwaBar.getBlock( ).setBackground(backgroundColor); 
 
// Plot 
Plot p = cwaBar.getPlot( ); 
p.getClientArea( ).setBackground( backgroundColor.copyInstance() ); 
p.getClientArea( ).getOutline( ).setVisible( false ); 
p.getOutline( ).setVisible( false ); 
 
// Line Attributes to black 
p.getOutline().setColor(ColorDefinitionImpl.BLACK()); 
 
// Legend 
Legend lg = cwaBar.getLegend( ); 
lg.setPosition( Position.BELOW_LITERAL ); // put legend at the bottom 
lg.setOrientation(Orientation.VERTICAL_LITERAL); // make legend items stacked 
lg.setItemType( LegendItemType.CATEGORIES_LITERAL ); 
lg.setVisible(false); 
// not relevant since legend is invisible 
lg.getClientArea( ).getOutline( ).setVisible( true ); 
lg.getTitle( ).setVisible( false ); 
lg.setShowPercent(true); 
org.eclipse.birt.chart.model.attribute.Text t = lg.getText(); 
FontDefinition fd = t.getFont(); 
fd.setName("Courier"); //$NON-NLS-1$ 
fd.setBold(true); 
lg.updateLayout(cwaBar); 
// end not relevant legend 
 
// X-Axis 
Axis xAxisPrimary = cwaBar.getPrimaryBaseAxes()[0]; 
xAxisPrimary.setType(AxisType.TEXT_LITERAL); 
xAxisPrimary.getMajorGrid().setTickStyle(TickStyle.BELOW_LITERAL); 
xAxisPrimary.getOrigin().setType(IntersectionType.MIN_LITERAL); 
xAxisPrimary.getLabel().getCaption().getFont().setBold(true); 
xAxisPrimary.getLabel().getCaption().getFont().setRotation(-30); 
 
xAxisPrimary.getTitle().setVisible(true); 
 
tag = new StringBuilder(baseTag).append(".SeriesTitle.total").toString(); //$NON-NLS-1$ 
String seriesId = PPS.getPpsResources().getString(tag); 
xAxisPrimary.getTitle().getCaption().setValue(seriesId); 
 
// Y-Axis 
Axis yAxisPrimary = cwaBar.getPrimaryOrthogonalAxis(xAxisPrimary); 
yAxisPrimary.getMajorGrid().setTickStyle(TickStyle.LEFT_LITERAL); 
yAxisPrimary.setType(AxisType.LINEAR_LITERAL); 
yAxisPrimary.getLabel().getCaption().getFont().setBold(true); 
yAxisPrimary.getTitle().setVisible(false); 
//yAxisPrimary.getTitle().getCaption().setValue(chartSpec.getyAxisTitle()); 
 
 
String[] categories = new String[data.size()]; 
data.keySet().toArray(categories); 
 
String title = null; 
 
Setup setup = Setup.getPps().getSite().getSetup(); 
PointNum valueFactor = PointNum.ONETHOUSAND.multiply(PointNum.ONETHOUSAND); 
tag = new StringBuilder(baseTag).append(".charttitle").toString(); //$NON-NLS-1$ 
title = PPS.getPpsResources().getMessage(tag, new Object[] { setup.formatPointNum(valueFactor, 0, 0, false) }); 
 
cwaBar.getTitle( ) 
.getLabel( ) 
.getCaption( ) 
.setValue(title); 
cwaBar.getTitle( ).getOutline( ).setVisible( false ); 
TextDataSet categoryValues = TextDataSetImpl.create(categories); 
 
// X-Series 
SeriesDefinition sdX = SeriesDefinitionImpl.create( ); 
xAxisPrimary.getSeriesDefinitions().add(sdX); 
Series seCategory = SeriesImpl.create(); 
seCategory.setDataSet(categoryValues); 
sdX.getSeries().add(seCategory); 
 
int dataCount = 0; 
for (ArrayList<Fill> fills: data.values()) 
{ 
for (Fill fill: fills) 
{ 
MarketData marketData = fill.getMarketData(); 
if (marketData != null) 
{ 
double[] values = new double[data.size()]; 
// populate columns with zero 
Arrays.fill(values, 0.0); 
PointNum totalValue = fill.getMarketData().calcTotalValue(); 
if (totalValue != null) 
{ 
values[dataCount] = totalValue.divide(valueFactor).doubleValue(); 
} 
 
 
Series stackedSeries = (BarSeries) BarSeriesImpl.create(); 
stackedSeries.setSeriesIdentifier(fill.getName()); 
stackedSeries.setStacked(true); 
DataSet ds = NumberDataSetImpl.create(values); 
stackedSeries.setDataSet(ds); 
 
SeriesDefinition sdVal = SeriesDefinitionImpl.create(); 
sdVal.getSeriesPalette().shift(0); 
yAxisPrimary.getSeriesDefinitions().add(sdVal); 
 
// attempting to set the color or image for the series, has no effect on the chart 
// setting color or image for number of columns also has no effect 
setSeriesDefinitionPattern(sdVal, fill); 
 
sdVal.getSeries().add(stackedSeries); 
} // end has market data 
} // end for each fill 
 
dataCount++; 
} 
 
final String chartFileName = renderChart((org.eclipse.birt.chart.model.Chart) cwaBar, fileName); 
 
}

Find more posts tagged with

Comments

mwilliams

Maybe this devShare entry will help with setting the palette:

http://www.birt-exchange.org/org/devshare/designing-birt-reports/1437-birt-palette-examples/

OhPun

I have looked at that page. It tells me that I can have different fill types depending on the palette. Unfortunately, a chart with axes (bar chart) does does not have cwaBar.getSeriesDefinitions(), so how do you set the palette?

I am setting the palette for each individual series, but that seems to have no effect.

mwilliams

On a chart with axes, you grab the Series Definitions from the xAxis:

importPackage(Packages.org.eclipse.birt.chart.model.attribute.impl);

var xAxis = chart.getAxes().get(0);
var sd = xAxis.getSeriesDefinitions().get(0);

I believe you should only have to set the palette for the first series. The very last example from the blog that the above link points to shows this. This isn't working for you? Let me know.

OhPun

I have twelve bar series that I add to the y axis. Each series has four values. When I set the x axis Series Definition, each of the four bars is colored with the first four colors. The remaining eight colors are ignored. The individual sections are not individually colored. 
 
1) Should I be making four series with twelve values? then setting the x axis Series Definition? 
 
2) I suppose if I set the x axis Series Definition to embedded image, then I could replace them in the scripting with embedded images, forcing the colors to be embedded images too. 
 
3) In the code of the original post, I changed 
<pre class='_prettyXprint _lang-auto _linenums:0'>lg.setItemType( LegendItemType.CATEGORIES_LITERAL );</pre>
to 
<pre class='_prettyXprint _lang-auto _linenums:0'>lg.setItemType( LegendItemType.SERIES_LITERAL );</pre>
 
Attached is the chart I am currently producing with scripting. The data is complete and utter garbage, but correctly graphed garbage. It all works with colors. Unfortunately it does not work with embedded images.

OhPun

<blockquote class='ipsBlockquote' data-author="'OhPun'" data-cid="93461" data-time="1325689775" data-date="04 January 2012 - 08:09 AM">
 
2) I suppose if I set the x axis Series Definition to embedded image, then I could replace them in the scripting with embedded images, forcing the colors to be embedded images too. 
 </blockquote>
 
Option 2 does not work. Even when I set the x axis Series Definition to EmbeddedImageImpl, the fills that are passed into beforeDrawDataPoint are ColorDefinitionImpl.

OhPun

Answer: no scripting is needed. 
 
Before creating any BarSeries, make one SeriesDefinitionImpl, clear the SeriesPalette, add it to the y axis 
 
<pre class='_prettyXprint _lang-auto _linenums:0'>SeriesDefinition sdVal = SeriesDefinitionImpl.create();
sdVal.getSeriesPalette().getEntries().clear();
yAxisPrimary.getSeriesDefinitions().add(sdVal);</pre>
 
for each series ('data' in this example) 
{ 
<pre class='_prettyXprint _lang-auto _linenums:0'>BarSeries stackedSeries = (BarSeries) BarSeriesImpl.create();

String desc = data.getDescription(); // series description
double[] values = data.getValues(); // series values

stackedSeries.setSeriesIdentifier(desc);
stackedSeries.setStacked(true);
DataSet ds = NumberDataSetImpl.create(values);
stackedSeries.setDataSet(ds);

// add ColorDefinitionImpl or EmbeddedImageImpl to sdVal.getSeriesPalette().getEntries()
sdVal.getSeriesPalette().getEntries().add(data.getFillImpl());

sdVal.getSeries().add(stackedSeries);</pre>
}

mwilliams

Great! Glad you found a solution. Sorry for the delayed response, the forums have been crazy so far this new year! Let us know whenever you have questions!

mwilliams

Would you mind creating a simple example of how to get images onto bars in a chart and putting it in the devShare? It could be a great help to other users!