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 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.

Exit mobile version