VizFrame Playground

I have been working a lot with visualizations (especially graphs) lately. While I use matplotlib and bokeh with Python I use the SAPUI5 framework when I develop in Javascript. Since the HANA database was released a lot in the SAP world has shifted towards analysis of data und therefor many customers are interested in reports and insights. The underlying UI5 control is the VizFrame. To help me with my visualization needs in UI5 I created a little JSFiddle that I call the VizFrame Playground. Feel free to use it to play around with it. In this blog post I want to highlight some issues with the VizFrame that I ran into from time to time.


In programming in general it is very important to have the latest documentation ready. There are three main entry points if I look for information about the VizFrame:

  1. the API documentation:
  2. the Viz documentation:
  3. the UI5 Explored App:

Be sure to familiarize yourself with these three resources if you want to work with the VizFrame.


As I mentioned above I created a little JSFiddle that allows you the play around with the VizFrame. You can see the result on the left. I embedded the source code in HTML and Javascript below. Feel free to use the JSFiddle as the starting point for your own VizFrame developments.


There are certain terms in the VizFrame world that you should be familiar with. If you worked with visualizations before than you may already know them.

There are two types of data that can be fed to the graph:

  • Measures
    • a measure feeds data to the Y-axes
  • Dimensions
    • a dimension feeds data to the X-axis

The axes have different names, too. A measure can be fed into the valueAxis or the valueAxis2. If you switch to the dual_column graph in the playground you see what this is about. To balance measures with vastly different scales a second value axis is introduced. However there can only be one feed that feeds the X-axis. This is a dimension that feeds either a timeAxis or a categoryAxis. There are other types of dimensions (like color or bubble size) that are not in the scope of this document. A lot of posts around SCN or Stack Overflow are questions about these things. Most of the time the VizFrame configuration is somehow wrong which leads to some meaningless errors like 

[50014] - Feed Value1 could not accept more data containers

In the next section I will show you some common errors that have to be avoided if you want to use the VizFrame.

Common Issues

Here is a list of frequent issues I ran into while developing apps with the VizFrame.

[50053] Imcomplete Dimensions Binding 

This error appears if one of the following happens:

  1. data is fed into a non-existing axis
  2. the amount of feeds into an axis is violating the minimal or maximal amount

If you created some logic that re-renders the same VizFrame object or changes its properties at runtime than the chances are high that you have seen this error. Please make sure that you destroy every feed that could violate the binding parameters of the chosen graph type. You can find these parameters in the viz documentation under the tab Bindings. The values for the minimal and maximal amount of feeds is usually 0,1 or infinity. The error appears if there are too few or too many feds for any of these bindings.

[50014] - Feed Value1 could not accept more data containers

This is another very cryptic error message from the VizFrame. I am not entirely sure if I found every possible reason for this error but it usually appears if there is no matching measure or dimension to a string in the values array of a feed. So a feed can be defined like this:

var feed = new sap.viz.ui5.controls.common.feeds.FeedItem({
    uid: "categoryAxis",
    type: "Dimension",
    values: ["region"]

Notice the string in the values array. There needs to be a dimension of the following form:

var categoryDimension = new{
    name: 'region',
    value: '{Region}'

The same goes for measures and the value axis. So please make sure that the name of the dimension or measure matches with the string in the values array. I have found that it doesn't make a difference if you create a feed object for each measure or if you create a feed object for an axis and put every measure name into the values array.

Attention: The strings are case sensitive and it could happen that error '[50053] Imcomplete Dimensions Binding' appears if you use the wrong case. Do not ask me why it suddently becomes another error.

There might be another reason for this error: time series. If you use a dimension to feed a timeAxis than you have to set the dataType to 'date' like this:

var timeDimension = new{
    name: 'Date',
    value: '{Date}',
    dataType: 'date'

VizFrame Playground Source

Here is the embedding of the JSFiddle VizFrame Playground. Again, feel free to use it as a starting point for your projects.