tip 12 – how to fix category label length (improve design)

tip 12 – how to fix category label length (improve design)
level: moderate

Having specific functionality in a chart, does not mean that your dashboard is ready to publish it. It is important that all elements are placed in such a way that you improve the overall user experience (Gestalt Design Principle). The chart form the previous tip (tip 11) had a vertical axis that “moved around” as the user pressed different buttons. It just did not look very nice.

This video will show you how to fix the “moving vertical axis” by using one of the more advance features of the dashboard editor in icCube.

It’s an “up-tempo” video, you might want to pause a couple of times if you want to study the steps.

Timeline and topics:

  • The end-result is a the chart from tip 11 with the vertical axis of the bar-chart fixed. I think it is much nicer, don’t you agree?
  • The issue with the chart from the previous tip is that the vertical axis moves as the labels vary in size for the different button selection;
  • you can see this in action;
  • To correct this, edit the chart and navigate to the “Data Render”, “Category Axis” ;
  • Go to “Label Function” and change the function code to set the maximum size of the labels (code is below);
  • Set the “Label OffSet” to -140 and display the labels “Inside”;
  • save, verify that it works;
  • place the report in the application (tip 07) and you’re done.

The code used in the Label Function for the Category Axis:

JavaScript
function(valueText, serialDataItem, categoryAxis) {
    if  valueText.length > 20) {
		return valueText.substring(0,20)+"...";
	} else {
        return valueText;
    }

}

Back to dashboard tips.