Creating good visualizations with the SAPUI5 VizFrame

I have been experimenting a lot with the VizFrame control of the SAPUI5 framework lately. You can find my VizFrame Playground on JSFiddle. After some experimenting and learning by doing the VizFrame can be used for a lot of reporting and visualization tasks. Since I read two very interesting books on visualizations this year (The Truthful Art by Alberto Cairo and Storytelling with data by Cole Nussbaumer Knaflic) I also wanted my visualizations to look pretty. This blog post will show you the process of improving your VizFrame diagramm until it is clean and pretty. Each step contains an image so that you can see how the visualization improves. You can find the links to the JSFiddles underneath each graph.

INITIAL VERSION

I chose a really simple example to work on: an overview of the population and the GDP. I got the data from wikipedia.de on Tuesday, July 11th, but that is not important for this blog post. The image on the right shows my baseline visualization. As you can see all the important info is there. You can see the population and GDP of the countries. But there are some obvious design flaws. For example: 

  • the GDP is so small compared to the population that it can hardly be seen
  • some country names are truncated
  • the data is not sorted

In the following chapters I will try to improve this visualization step by step. Each step will contain a new image and the part of the code that I changed. The baseline model can be found on JSFiddle.

Fix Country Names and Category Axis Title (2)

The first thing I wanted to fix were the country names. Since most people can identify the countries by the 3-letter country code I chose to replace the country name with it. You can find these code on wikipedia. Since the VizFrame uses the name of the property as the axis label by default I had to adjust that, too, because ISO3166 wouldn't be a great axis label. To do that you have to set the VizProperties of the VizFrame. To find out which properties are available for each graph type please refer to the documentation.  We will use the VizProperties a lot in this blog post. To change the category axis label you have to pass the following dictionary to the setVizProperties() method. You can see the result on the right.

{
   categoryAxis: {
      title: {
         text: "Country"
      }
   }
}

fix sorting

The next thing I wanted to fix was the sorting of the data because it was random before. You should always think about every aspect of your visualization. Simply slapping a column diagram on your page does not help if it does not tell a story. Sorting your data helps the viewer to find meaning in your data. I sorted the data descending by population. To do that I created a little method that allowed me to sort ascending or descending by any property of the data. This made it easy for me to experiment with different sortings. 

_sort: function(arr, key, asc){
	var compareFunction = function(a,b){
		if(asc){
			return a[key] > b[key];
		}else{
			return a[key] < b[key];
		}
	}
	return arr.sort(compareFunction);
}

use dual axes

The next thing I wanted to fix was the different scales of the data. The population of China or India is over 1.2 billion while the highest GDP is around 18.5 million. You can see on the graphs above that is is not possible the recognize the GDP values of the countries. To fix this problem I changed the graph type to a column diagram with two y-axes. Note that it is not enough to change the graph type. Since there is a second y-axis you have to feed data to it. So you need another feed in your VizFrame. Please refer to the JSFiddle to find the code for this graph. I also sorted descending by GDP. You can see that the US have the highest GDP while having only the third biggest population. Germany and the UK also seem to do really well. But can you really learn a lot from this graph? A graph with two y-axes is always hard to read for the viewer.

use GDPPC instead of population and GDP

In the last chapter I learned that the solution with two y-axes did not really help. So I decided to go back and change the property that is displayed on the value axis. Since I am comparing population and the GDP it would be a great idea to introduce the property "GDP per capita". This property already includes population and GDP implicitly and can be compared easily. So I went back to the single y-axis and displayed the GDP per capita (GDPPC). I changed the value axis label the same way I changed the category axis label (with the setVizProperties() method). As you can see the graph looks a lot cleaner now and the viewer can read it easily. However there are still some optical things that can be improved.

HIDE LEGEND

The first thing that really bothered me was the legend on the right. Does it need to be there? There is only one value that is displayed on the value axis. Also there is an axis label on it. That is why I removed the legend. You can do this with the setVizProperties(), too:

legend: {
	visible: false
}

hide Gridlines

This looks much better but we can still improve. Both books I mentioned in the beginning talk about visual clutter and that removing it should be your goal. Visual clutter are useless optical distractions like gridlines. So that's were I started. You can remove gridlines with the VizProperties. There are a lot of settings available concerning the VizFrame appearance, so feel free to try them out. I made the following changes to the VizProperties: removed axis ticks and axis lines for both axes and the gridlines on the plotarea.

That looks great already but there are still some useless titles floating around.

{
	categoryAxis: {
		axisTick: {
			visible: false
		},
		axisLine: {
			visible: false
		}
	},
	valueAxis: {
		axisTick: {
			visible: false
		},
		axisLine: {
			visible: false
		}
	},
	plotArea: {
		gridline: {
			visible: false
		}
	}
}

hide useless Titles

This change was really quick. I just hid the graph title and the axis label of the category axis (everybody knows that these are countries). Most elements of the VizFrame have a property called visible that controls the visibility of it.

title: {
	visible: false
},
categoryAxis: {
	title: {
		text: "Country",
		visible: false
	}
}

Show Datalabels instead of Axis Labels

The graph already looks very good and we are now moving into the territory of personal preference. Every designer or programmer has his or her own taste, of course. But the big question you should always ask yourself is: Can the viewer read the information that you want to transport with the visualization? I thought that placing a scale to the left of the columns was a) visually unattractive and b) did not really help. So I hid the scale and made the GDP per capita visible directly on top of the columns. As always you can find the VizProperties to do that on the left.

valueAxis: {
	label: {
		visible: false
	}
},
plotArea: {
	dataLabel: {
		visible: true
	}
}

Now that the y-axis scale is gone, the title of it seems lost. So we should move it to the top.

move Titles to the correct position

Moving the value axis title to the graph title can be done very quick with the following VizProperties:

title: {
	text: "GDP per capita"
},
valueAxis: {
	title: {
		visible: false
	}
}

At this point I was already very satisfied with the graph. The following two adjustments are optional since they are heavily influenced by my personal taste. However I still think that they are interesting to look at.

change color palette

The default color palette of the VizFrame is rarely the perfect choice. Of course it works and the viewer can read the visualization nonetheless but does it really fit into your website or corporate design? I wanted to adjust the color palette to my blog. Intuitively I thought that this can be done using the VizProperties but I was wrong. You have to use the method setVizScales(). This method workds a little bit different compared to setVizProperties(). You are passing an array instead of a dictionary. The feed I was interested in is called color. It contains a property called palette. You have to pass an array to that property containing the color values in hex values. I just passed the value for the grey tone that I use on this blog. The graph already fits much better to this site.

this.oVizFrame.setVizScales([
	{
		feed: "color",
		palette: ["#E2E2E2"]
	}
]);

The only thing that was still bugging me had to do with the interaction with the graph. I was still able to select multiple values and there was a nasty border around the graph when I clicked on the plotarea.

Fix selection Issues

To fix the selection issues I mentioned before I had to resort to CSS for the first time. While the multiple selection could be deactivated using the VizProperties I could not hide the nasty border around the graph. With the following settings I could deactivate the multiple selection and the possibility to select a category axis label. You can find these settings in the interaction section of the VizProperties.

interaction: {
	selectability: {
		mode: "EXCLUSIVE",
		axisLabelSelection: false
	}
}
.v-info {
	outline: none;
}

With the developer tools in Chrome I discovered that the element that showed the border had a class called v-info. So I hid that outline with CSS. You can find the embedded final graph below. I hope that you liked my post on the styling possibilities of the SAPUI5 VizFrame. Please comment if you have any suggestions on how to improve the tutorial or ideas for further posts around the VizFrame.