Skip to Content

The blog post was created after addressing this interesting requirement that @edwar.lara had. Instead of creating an Alerter in Chart, in the usual way of coloring the Bars/Columns/Lines with different colors depending on a Target value, he wanted to color the background of Chart itself, as below.

Simple idea or workaround, is to leave the Chart alone and create a Vertical table with 3 rows, format the background color (of those 3 rows), and place it behind (in the background) of the Chart.

I used sample/dummy data to recreate this scenario and the solution. Simple way to understand the data is that, the more the usage of yard, the negative is the impact. Similar to Processor/RAM usage in a computer, we want them to be as low as possible.

Steps to recreate the scenario and the solution:
1. Please create a Line Chart with the dummy data (it’s a simple one, I won’t write steps for it)
2. Create a Vertical table with 3 rows
3. Format the background colors of rows in table – top one as red, middle as yellow, and bottom as green
4. Set the Size (height and width) of the rows (this is little tedious as we’ll have to set height and width depending on how it appears to our eyes, its a trial and error process)
For Height – we’ll have to look at the requirements that we need the top cell as red to spread from 100% to 50% on Y axis scale, middle cell as yellow to spread from 50% to 30%, and bottom cell as green from 30% to 0%
For Width – we’ll have to look at the width of the Chart itself and set the width as whatever value, say 10cms, and update it later while setting relative position of the table.
5. Set the Relative Position of the table (again, this depends on how it appears to our eyes, it’s trial and error process)
6. Order the table and Send to back of the Chart (behind the chart)
7. Make the grid color and background color in Chart as 0% (which makes them transparent)

This is the result of that workaround.

Hope you enjoyed it, and will try it. Comments and/or feedback is appreciated.

Would you like to get this as a feature in Webi, so that we don’t have to do this tedious workaround? If yes, please vote up on this idea I created on Idea Place.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply