cancel
Showing results for 
Search instead for 
Did you mean: 

Resize issue with custom Chart component (SDK)

Former Member
0 Kudos

Hi there,

I've created an custom chart (based on Highcharts) using the DesignStudio SDK.

It's working fine, but I got an issue when using a GridLayout: The resize of the chart component doesn't work correctly after loading the analysis initially.

I describe the structure of the report:

- Its a GrdLayout with 2 rows and 1 column, set to 100% height and width.

- in the upper section is a Crosstab, in the lower one the chart, both set to 100% width and height

- The problem: After loading the analysis, the chart isn't sized properly (it takes 100% width and height of the viewport).

When resizing the browser window, the chart gets resized correctly

The chart is renderd in the afterUpdate-event of the component - I guess this should be the right place.

I've tried to debug this a little bit and put an alert-message in the afterUpdate event. What I've seen was that the GridLayout is rendered already when afterUpdate is called, but it's not visible yet. Thn the chart gets rendered (with 100% height and width) but it can't size properly since the underlaying container is not yet visible.

Any ideas how to overcome that problem?

Thanks!

Accepted Solutions (1)

Accepted Solutions (1)

Karol-K
Advisor
Advisor
0 Kudos

Hi, this is a tricky issue, for correct resizing, the code must be placed in onafterrender method as first there the sizes are accessible - with similar code.

  var jqThis = that.$();

  that._containerWidth = jqThis.outerWidth(true) + "px";

  that._containerHeight = jqThis.outerHeight(true) + "px";

  this._oContent.setWidth(that._containerWidth);

  this._oContent.setWidth(that._containerWidth);


This needs to be fixed in the component.

Are you using the community SDK package already?


Karol

Former Member
0 Kudos

Hi Karol,

thanks for your input.

What "onAfterRender"-event do you mean? Can't find any information in the dev guide...

I'm using the SDK 1.4 which I've downloaded from the SAP Portal at SAP BusinessObjects Design Studio 1.4 – SAP Help Portal Page

What community SDK do you mean? The first time I hear that, do you have some information for me?

Thanks a lot,

ben

Karol-K
Advisor
Advisor
0 Kudos

so you have copied the samples and started coding on your own. now I understand the context.

the onAfterRender method is available if you use SAPUI5 SDK, in DIV SDK it is not available.

the SDK community, see here -, there are some already precompiled components, but not so much on charting.

btw, Mike has created a prototype on chart, perhaps this is something you can use for inspiration:

I know that one option is in DIV case to work with timers and events for the resizing.


eg.

// Refresh is height/width cannot be determined

if (window.$.browser.msie) {

setTimeout(that.afterUpdate, 0);

} else {

setTimeout(function() {

   // resize must be registered on the element

   window.dispatchEvent(new Event('resize'));

});

}

or there are some sites explaining this in detail: http://www.sitepoint.com/javascript-custom-events/

I know this is not the perfect solution, but a kind of workaround. Design Studio is updating all objects, but unfortunately the sizes are fixed after the grids are rendered.

Former Member
0 Kudos

Hi Karol,

again, thank you for the informative input.

For the moment I've solved the problem in a similar way you suggested (with a setTimeout to re-render the chart after some ms. after initially loading the analysis).

That's ok for the moment, but it's a workarond (as you mentioned) and I would like refactor this once a time.

Do you think It's possible to use a SAPUI5 Control as container to utilize the onAfterRendering-method of these controls?

Or is it not possibe to mix the compoments in this way (sorry, never build a compoment based on SAPUI5-control until now...)

Greests,

ben

mike_howles4
Active Contributor
0 Kudos

Hey Karol,

This was a good reminder for me, as my Progress Set example component actually suffered from a related issue where I render the chart with D3 but it takes width and height calculations only on first SVG rendering based on the containing DIV's current width and height.  (SVG I do not think works with % based width/height dimensions for its DOM element.)

When width and height are set to AUTO in Design Studio, Design Studio does not issue an afterUpdate event so there's not a reliable way to tell the component to resize the SVG.  So what happens (happened) with ProgressSet is that the SVG would retain its initial size upon init (in the case of a Grid Container, it may also even be 0 width and 0 height depending on how the SDK component is calculating things).

Long story short, I've taken reminder as an opportunity to show how I go about implementing a polling method to check every 250ms for SDK DIV container size changes, and resize its internals if a change is detected.  Below is the latest commit showing the DIFF in the code so you can see exactly what I did to fix:

Added resize logic for ProgressSet example. Previously, only static · fc5fdb9 · org-scn-design-studi...

If you just want to see the complete source code and not the DIFF, check here:

sdkpackage/ProgressSet.js at master · org-scn-design-studio-community/sdkpackage · GitHub

I hope this is helpful!!

Karol-K
Advisor
Advisor
0 Kudos

Ben,

my experience until now was, when your component is using external "pure HTML" library, the best way is on DIV component - and Mike's example below is showing the way how to solve the sizing issue for "AUTO" sizes. The problem with SAPUI5 is, it is again hard to include pure HTML - there is a HTML control, but this is also not perfect solution.

But, if you build a complete visualization (like some of my components) then you can use the AbsoluteLayout component and register on the onAfterRendeing to resize.

Karol

mike_howles4
Active Contributor
0 Kudos

Ben/Karol,

Below is a bare-bones example of how to use SAPUI5 handler yet still write out mostly "pure HTML".  Maybe this helps:

DesignStudio1.3UtilityPack/MColoredBox.js at master · entmike/DesignStudio1.3UtilityPack · GitHub

Answers (2)

Answers (2)

Former Member
0 Kudos

hi ben

i have the same issue when rendering chart from anychart

i tried the settimeout method and it worked in localhost but

when i run it in bi platform it didn't work

can you please share the piece of code where you added the settimeout code

thanks for this post

Former Member
0 Kudos

Hi Fuad,

that it works locally and not the plattform is strange...

I've placed my coding in the load-event of the chart:


load : function () {

    // Workaround for setting correct size when chart is placed in gridLayout and is visible from the beginning

    setTimeout(that.rerender, 1);

}

But maybe you just need to give the setTimeout a little bit higher delay?

Greets,

ben

mike_howles4
Active Contributor
0 Kudos

This is one I've run into more than once.  I've narrowed it down to being symptomatic of SAPUI5 container components, which would include the Grid Layout component.  I got around this by placing a window.setTimeout callback in afterUpdate and init to measure the "real" width and height of the parent DOM element and if it's 0 or null or whatever, again do a setTimeout until the containing parent has had a chance to appropriately size it's container cell.  I don't like the solution but again it seems to be a combination of of UI5 container components work with AbsoluteLayout components inside them (which is what the SDK is wrapped in) and the string of init events just firing in an odd order.

EDIT: After reading the rest of the comments, it looks like Karol has already suggested the setTimeout approach, as well!

Former Member
0 Kudos

Yes, it seems we are all using the same work aroung and I'm glad I'm not the only one...;)

And yes I guess you are right when you say that the SVG doesn't work with percentage,  that explains why - for example - the "simpleCrosstab" doesn't have this problem.

I'll take a look at the codings you've provided and make the best out of it.