SAP UI5 VIZ charts in Chrome

Published by Tobias Hofmann on

1 min read

I was preparing a demo showing how to visualize data from an IoT service using SAP UI5 VisFrame charts. To play around with VizFrame, I used the sample from SAPUI5 SDK. It was working perfectly on the online version, but while running the UI5 app and Chrome, I got an error message.

Googling for the error message revealed that with Chrome 50 a known error exists which makes it impossible to use a VizFrame chart. Luckily I found the solution on SCN. All it takes is to implement the function as a prototype and the chart will work.

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

I`ve put the code in my views controller init() function:

onInit : function (evt) {
  SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };
  oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");

Result

Now, this works magically when I access the online SDK, but is broken when using it locally. I guess SAP did some magic either in the SDK or in the UI5 library that my SAPUI5 version does not include. Either way, the above trick solves the problem.

Let the world know

Tobias Hofmann

Doing stuff with SAP since 1998. Open, web, UX, cloud. I am not a Basis guy, but very knowledgeable about Basis stuff, as it's the foundation of everything I do (DevOps). Performance is king, and unit tests is something I actually do. Developing HTML5 apps when HTML5 wasn't around. HCP/SCP user since 2012, NetWeaver since 2002, ABAP since 1998.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.