Introduction
Images are good to show to users a concept about dashboards. Some cases a image tell more than words and it can be used to create more visual and user friendly reports. For example, a dashboard designed to show accidents on roads can show small images with data about different root causes for crashes. Show a image in a dashboard is very easy, because a Text Box can be set to show any drawing. But, is possible fill images with different colors based on data loaded? Yes, you can.
Instead of use static images and add new texts to show expressions, is it possible fill in with a results of expressions using colors. This document shows you how to combine gauges charts with images with no fill. So, when users select some values from any field, that image will fill with colors to represent a expression formula. For that, is necessary configure images as transparent.
First all, it’s necessary images with no fill, but with borders. A lot of tools are able to edit images to set its contents as transparent. Take a look at pictures below were some data were selected by user. This sequence shows how interaction by user is changing picture’s fill by percentage of genders. Of course any image can be used for different messages. If you wanna test how to create this effect, load the data sample present at below images.
DataSample: LOAD * INLINE [ yearCharge, Power, City 2010, 102, São Paulo 2010, 103, Madri 2010, 114, Miami 2011, 123, Madri 2011, 100, São Paulo 2011, 413, Miami 2012, 321, Miami 2012, 313, São Paulo 2012, 323, Madri 2013, 142, Madri 2013, 322, São Paulo 2013, 422, Miami ];
Image Setup
As mentioned above image need to be transparent because gauge chart will be placed from behind it. That mean not all images can be used. If you’ve a image you would like to use is necessary change its content. This can be done with a tool like Online Image Editor that you don’t need install to use. This tool allow change solid fill by transparent fill. For test purposes take the battery picture at side with no fill. For example, the original image at side was changed to remove its content. Using the tool described we changed it to transparent fill. The second image is showing its result. You can to use it to test this technique.
If you need more information about how to change pictures, take a look this web page. Remember you can use any image, of course transparent. If you downloaded image at side create a new project and add sample data from previous section. After run the script go back to main area of the document. After that, follow the steps below:
1. Click right button at empty area and select New Sheet Object.
2. Create a new Text Box from shortcut menu.
3. From General tab, select the image you want. After that, adjust the image’s strech as Keep Aspect.
4. Resize your image to size desirable.
Creating Gauge
Before create gauge chart is necessary change the layer from text box propierties for image. As a chart needs to be placed behind the image, the text box need stay always on top. So, to do this, access the text box properties, and from Layout tab select Top option from Layer list. After that, create a new Chart from shortcut menu clicking any empty place.
1. Create a new chart, selecting Gauge type.
2. Gauges chart have no dimension. So, go ahead to Expression window. Enter the following formula:
=SUM(Power)
3. After enter a formula, advance to Style tab and select model as showed at image at side.
4. Go to Presentation tab and set Max Value for Gauge Settings as =SUM(ALL Power).
5. At same tab, uncheck Show Scale and Autowidth Segments.
6. On Indicator option select No Indicator.
7. Select both Hide Segments Boundaries and Hide Gauge Guidelines.
8. Now, let start to configure segments. First segment with any color should start at zero in Lower Bound option.
9. For second segment enter the following formula for Lower Bound:
=SUM(Power)
10. For color in segment 2 configure to transparent color.
After these configurations just remove title chart and window title. This can be done at General and Title tabs. And more, it’s recommended configure Border Width to zero in Layout tab, with no shadow. Now, it’s possible put the chart behind of image created before. Result is something like image at side. After positioning both elements add some lists to main interface to test this new composite object. Final result is showed below.
Samples in this article can be downloaded here.
When a same expression is used in different objects you can create a variable to store its formula.
Variables can be defined with parameters and act as a typical function. Learn here!
