Skip to Content

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:

la1.PNG

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


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

la3.PNG

The effect

(as animated gif)

/wp-content/uploads/2015/06/20150603_153545_capture_717179.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..

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Wolfgang Bidner

    Thank you for this Workaround -but we would need a more practical solution for such Display matters – I think best is to  set up an enhancement request  – right?

    Yours

    Wobi

    (0) 
    1. Karol Kalisz Post author

      Hi Wolfgang,

      you can post an idea on ideaplace.

      There you can describe what you would expect (eg. should the chart resize itself to the requried size?)

      Karol

      (0) 
      1. Alexander Knight

        Hello Wolfgang and Karol,

        we have some good workarounds now from Karol, especially using the Result Set Information add in.  However, what would be very interesting would be to have an option on the charts for select either constant chart height (as today) or Constant bar height or column width, and the chart automatically re-sizes.  This is a key feature of software like Tableau, and it is an annoyance in WEBI and Design Studio.

        What do you think?

        Kind regards

        Alex

        (0) 
  2. Oddmar Lid

    Hi,

    Quick stupid question.

    In your initial view of the column chart, I notice that you have vertical labels on X-axis (for EDI, fax, Others, Telephone).

    I can’t seem to find any standard setting to change the x-lable text from Horizontal to Vertical.

    How did you manage to get the text in vertical direction?

    regards

    Oddmar

    (0) 
    1. Karol Kalisz Post author

      Hi Oddmar,

      actually I have not done anything. I think the labels change to vertical when too less space for horizontal orientation is available.

      Karol

      (0) 

Leave a Reply