Change Chart title and Axis label dynamically using script or CSS

[Former Member]

Hi Experts,

Is it possible to change the chart title and axis label dynamically at runtime? I'm using a single chart and changing the chart type and measure selection using chart function setChartType and setDataSelection based on user selection in dashboard.

I tried CSS Axis label property to change the label font and color. I didn't find a way to change the Chart title and axis label using Java script function or CSS. Not sure if it can be achieved using Java SDK. I did find the forums mentioning about changing the axis label font and color using CSS. I didn't find any forum talked about the Chart title and axis label itself.

Thanks,

Milind

[IngoH · Accepted solution]

Hello Milind,

we offer extensions for SAP BusinessObjects Design Studio and such functionality is possible in our charts via scripting.

regards

Ingo Hilgefort, Visual BI

[mike_howles4]

One approach:

On your Chart Properties, enable 'Show Title', but replace the title text with a blank space.

Drag in a Text component and place it on top of the Chart component where the Title would normally appear.  For appearance sake, you may want to make the Text component as wide as the Chart component, and give it the following CSS formatting or something to your liking:

text-align: center; font-size : 14pt;

You could wrap it up nicely in a Panel if you wish, as well (optional) - You'd then have something like this:

Then you'd be able to write Script like:

TEXT_1.setText("My New Title");

You could then apply similar technique to X-Axis and Y-Axis Titles

[Former Member]

Thanks Michael.

I works fine for Chart Title and X-Axis label. It gets tricky for y axis label. I need to rotate the text. I used transform: rotate(-90deg) for text box CSS; It does rotate the text but I'm having issues with the alignment.

My chart is inside the CELL with auto width and height. I want to have the text height (after rotation) to be auto to be align with Chart. Since chart has different width and height, after text rotation, text box height doesn't align with chart height.

Any inputs would be great help.

Thanks,

Milind

[mike_howles4]

I can get close, but yes DS canvas doesn't handle the component box easily as a result.  Here's what I did:

1) Create your Text component for your y-axis.

2) Give it a CSS Class of 'rotateMe'

3) Add this CSS rule to your CSS:

  .rotateMe.sapUiTv {
    white-space: nowrap;
    text-align: center;
    font-size: 14pt;
    transform: translateX(50%) translateY(50%) rotate(-90deg);
    transform-origin: left top 0;
  }

Result:

Not perfectly centered, but if you play with top margins maybe you can get by with this?

[Former Member]

Thanks Michael. That was helpful. I still have to work on the alignment and as you said its not perfect.

I'm wondering if we can develop a function/method (setYAxisTitle) in SDK which will have Chart object and desired text as input parameters and the code will change the tile text. We will then call the method in the DS.

Is it something possible in SDK? Then I don't have to worry about Text object alignment.

Thanks,

Milind

[former_member194504]

Hi Milind,

Its possible with SDK. Our extension charts are capable of doing this. User can simply mention the text he want, and he can align it, in the way he want using APS.

Thanks,
Nithyanandam