Charting: Property “Extend Label Capacity”

a shorter blog on a question “how to assure all labels in chart are visible”.

Requirement

You want to see the label texts for all members displayed in the chart.

The Issue

When you design a chart, the rendering of chart must decide how much space will be addressed by the visualization and how much by labels. Of course, a label description is occupying some space, and the size of the chart must allow addressing this space. If the chart is too small, you will probably never get the full content of the label, but sometimes your chart is looking big enough but still label is not displayed correctly.

This is how it looks like initially:

Solution

You can

* decide how much space can be reserved by the label and

* dynamically adjust the chart size if required.

Space for Label

If you check the documentation, you can see following property:

Extend Label Capacity

  Select the Extend Label Capacity checkbox to extend the maximum space taken by the axis labels from the default 25% to 75% of the entire chart area.

(this property is available for X and Y axis)

Using the “Extend Label Capacity” the space for the chart label will be bigger, but not always necessary visible, as still the chart size is deciding on the 75% of the area. It means, we need also additionally find a way to extend the chart size. Similar topic was discussed here – overlap crosstab.

In this example, we need to find a similar way to change the size based on the information about dimensions. I have prepared here very simple code, it can be of course made more complex if you ware ok with calling of the getMembers() method on all dimensions. The calculation must change the width (to assure that the text has enought place for single entry) and height (to fit the 75%).

Here is the Script

The script below can be called either directly in data source onResultSetChanged() event, but explicit by some button.

var dims = DS_1.getDimensions(Axis.ROWS);
//DS_1.getDimensionText();
var newHeight = 600;
var newWidth = 200;
dims.forEach(function(element, index) {
  if(element.name == "0D_DBSIC1"){
  newHeight = newHeight + 300;
  newWidth = newWidth + 25 * 20;
  } else {
  newHeight = newHeight + 100;
  newWidth = newWidth + 5 * 20;
  }
});
if(newHeight < PANEL_1.getHeight() - 20) {
  newHeight = PANEL_1.getHeight() - 20;
}
if(newWidth < PANEL_1.getWidth() - 20) {
  newWidth = PANEL_1.getWidth() - 20;
}
if(direction == "W" && CHECKBOX_1.isChecked()) {
CHART_1.setWidth(newWidth);
}
if(direction == "H" && CHECKBOX_2.isChecked()) {
CHART_1.setHeight(newHeight);
}

The function is considering also some external checkboxes (see the example application) to switch off and on the calculation.

How this work?

When data source changes, we ask for the dimensions on the axis of our interest. Then, based on this information you can decide how much space you need and resize the chart. This basic calculation is counting on every dimension 100px for height. On one dimensions (check by name == “0D_DBSIC1”) I have special height assignment (300px). Similar for the width.

Now, the chart will be bigger and (with some try outs) you can find a size which allows you to see all labels.

Final Issue

The last issue is, as the chart is getting bigger, it would disturb the complete layout of the application. This is what we want to avoid. Here, we can use the blog Scrollable Panel in Design Studio (to show bigger content) and place the complete chart into a panel. The scripts above is already including the the check for size of the parent panel.

The Outline

The effect

(as animated gif)

The Application (as Example)

The app can be found in the repository.

https://github.com/org-scn-design-studio-community/applications

SCN_CHART_RESIZE

Hope it helps on this case and bring some idea in other cases..