How to fade the background colour of a table/text box

Basically what I want to do is to apply some sort of styling, from either top to bottom or right to left, which goes from say dark blue to light blue.
 
Is this at all possible without using a separate image file for each cell of a table? I'm using BIRT 3.7.1
 
Many thanks

Find more posts tagged with

Comments

micajblock

Will background image on the master page work?

Dan Quadrozzi

I could probably get it to work that way but, correct me if I'm mistaken, doesn't the image have to fit the size of the cell it's going to fill?
This will be problematic for me as all my cells will have different widths

micajblock

Background image in a master page is for the whole page it is part of the advanced properties, See image below. Also you can do this via code:
 
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/400-watermark-examples/'>http://developer.actuate.com/community/forum/index.php?/files/file/400-watermark-examples/</a>

Dan Quadrozzi

is there a way to make the image fill out/ shrink to the size of each column within the table? rather than having to resize the image itself?

micajblock

can you provide a screenshot of what you are trying to accomplish?

Dan Quadrozzi

Basically I want the background that's displayed in the chart, as the background for each of the columns within the table (should be an easy enough task!!). I have a background image that has the dimensions 5000 x 490 which has a pre made gradient like the one in the chart (I've also tested the background image approach on an image 500 x 49 in size too). My problem is that the image doesn't seem to shrink/fit to the size of the columns so that the whole image is in each column/row/header, not just a small portion of it, i.e. the top left part that, in this case, happens to be white! 
 
<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1102-dan/'>http://developer.actuate.com/community/forum/index.php?/files/file/1102-dan/</a>

micajblock

The simple answer is no, this is not possible in BIRT. In reality with enough time a workaround could be found. That being said I would like to make a few comment on your chart and design.
<ol><li>3D charts are one of the worst design feature of charts. They might look pretty but they distort the chart and make them hard to read. Do a Google search on 'Why 3D charts are bad'</li>
<li>Additionally gradients on charts are also considered a bad effect on visualization. A good resource for that is here - <a data-ipb='nomediaparse' href='http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf'>http://www.perceptualedge.com/articles/visual_business_intelligence/rules_for_using_color.pdf</a></li>
</ol>

Dan Quadrozzi

Do you have a general direction as to where a workaround could be found to solve my problem? I've tried importing CSS files, but BIRT 3.7 doesn't support CSS3 which is where you can have colour gradients as part of the formatting, I've also tried mashing together the XML source code from the gradient in the chart with that of the table, but that doesn't work. I've also tried an onRender script for the table to change the X and Y position both to 100% - all these to no avail!
 
Any help would be appreciated

micajblock

Like I said what you are trying to accomplish is very bad visualization practice. The issue is that in BIRT one cannot set a gradient style to a column. The only way I can think of doing this off the top of my head is to dynamically create gradient images based on the number of rows in the table (not an easy task in itself). Also I said finding a workaround would be time consuming and I prefer not to spend time on what I think is a bad visualization.

Dan Quadrozzi

ok forget the whole gradient styling thing, the main thing I'm trying to accomplish it to make a background image fit to a column/row in a table, for instance - I can use this workaround to say place a company logo in the top left corner of a table column, however this won't fit different sized table cells as the size of the background image doesn't adjust - THIS is what I'm trying to accomplish

micajblock

OK, much easier. A few questions.
1. Can you send post an image you want me to use for an example.
2. I am assuming you do not want the image to be distorted so do you want the image to fit the width or the height of the cell.

Dan Quadrozzi

<a data-ipb='nomediaparse' href='http://www.therichten.com/wp-content/uploads/2014/08/McDonalds-Logo.jpg'>http://www.therichten.com/wp-content/uploads/2014/08/McDonalds-Logo.jpg</a>
 
The image will be large so will need to be shrunk by BIRT to fit the column width. For confidentiality purposes I can't give you the actual logo I'll be needing - this one is of similar dimensions though. Ideally I'd want it to fit the whole cell

micajblock

Thanks to Clement Wong for finding a solution. This will only work in OS BIRT 3.7.2/ The trick is to use script to change the style. Adding a text element with the below script works:
 
<div>
<pre class="_prettyXprint">
<div id="_qwerty"></div>
<script>document.getElementById("_qwerty").parentNode.parentNode.parentNode.parentNode.style.backgroundSize='contain';</script></pre>
</div>

micajblock

In commercial BIRT jquery is avaailable and this script works:
 
<div>
<pre class="_prettyXprint">
<div id="_qwerty"></div>
<script>$("#_qwerty").closest("th").css("background-size","contain");</script></pre>
</div>