Using Images As Charts

De Qknow
Ir para: navegação, pesquisa



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.

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

Oie transparent.png

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:


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:


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.

Idea 1.jpg

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!

Need more? Mail Us!

Summary | Main Page