Charts in dataviews

Document created by raym on Jul 9, 2018Last modified by raym on Jul 11, 2018
Version 4Show Document
  • View in full screen mode

Add data bars to your dataviews. And then colour them, with conditional formatting.

While this might get colourful, sometimes, in terms of storytelling, more contrast is more helpful:


About the Solution/Project: 

About the solution

I wanted to recreate a solution where part of the information in the dataview is displayed as a chart. I've seen some examples, that I don't know how to recreate - such as these two:


Now I still don't know how the others were created. So here is my approach; I created images to mimick the excel data bars' conditional formatting.


Solution/Project info


A lot of images are necessary to do this. One then needs to compute the image name with a column algorithm. The images are then displayed by setting the column algorithm display type to Picture:

For the image name, it is necessary to round the numbers (down) to integers. To do so, use the mod(x; 1) function. Apparently you cannot use Nexel formulas in combinations with images and so the number of available functions is restricted.


In order to be able to use multiple colours, transparent images with white backgrounds are necessary. The transparent part gets its colours from the block alert.

Refer to Björn Reuber's Using "desaturate Alerts"/Treemaps with alerts and negative Numbers on why negative numbers need to be dealt with. In this case, not being able to use Nexel, the negative numbers will range between 0 and 100 and the positive numbers between 100 and 200.


And that's it from the board perspective. Now to the the image creation part. They need to be generated as there are many. My solution is to do that in html with canvas and javascript. I attached the file and won't go into the details, as it is just a side problem. The good thing though is, the ability to create many different versions, some could be with company logos. I created a fiddle to play around with here: canvas bar charts - JSFiddle 


The select-to-highlight was done using a cube with data entry, whose values conditionally colour the blocks and figures. Paul Wyatt - Avison Young's CUSTOM SORT and SELECT using Cubes really expands the topic of using data entry to modify the layout.


Takeaways/ Hints for other community Members:

If anyone knows how to do the other things, such as the inline pie chart, I'd be glad to hear.

10 people found this helpful