— This is a prototyping blog, there is no out-of-the-box component from it —

I wanted to try including the google charts into Design Studio SDK (https://developers.google.com/chart/interactive/docs/gallery).

The reason was clear in a first view – a lot of nice out-of-the-box charts for visualization. My example was the candle chart (Candlestick Charts  |  Charts  |  Google Developers):

cand1.PNG

After some tries, I could get it (not too clean – but first version working). Therefore here a small how to. Pay attention to my last words why it is not a SDK component, event the license should be ok..

Getting Started

As usual, we have to create a component, but this was described a lot of time.

Now, the requirement is to add JS which is directly called from google server.

define([

  “sap/designstudio/sdk/component”,

  “./GoogleCandleSpec”,

  “../../../”+scn_pkg+”shared/modules/component.core”,

  “../../../”+scn_pkg+”shared/modules/component.basics”,

  “../../../”+scn_pkg+”shared/modules/component.prototypes”,

  “https://www.google.com/jsapi

  ],

  function(

  Component,

  spec,

  core,

  basics

  ) {

I have used the OLD api, because the new one

     https://www.gstatic.com/charts/loader.js

seems to be not compatible with the design studio requrie call (probably some config is required here). once we add the .js at the end of requrie statement, it calls the -min.js file and this leads to 404 response. W/o the .js ending, it tries to load it w/o ending and this is also 404. The old API seems to work, as it has no ending by default.

I would like to check later in time if the new API can also be somehow included into SDK framework, as this could be also a good use case for components which take the content from internal urls.

The Google Callback

Second step is the callback requirement when loading the chart API. The included file is actually only a LOADER, the chart libraries must be loaded by API call.

The difficulty here was, the loader is also async, therefore a kind of semaphore was required to assure that the afterUpdate method will be called. My semaphore is checking if the initialization is already done, then standard processing is made. In case it is not initialized yet, the afterUpdate call will be ignored.

// INIT method


      that.myCallback = function () {
         that._chartLoaded = true;
         that.processData(undefined, that.afterPrepare, that);
         var content = {};
         content.dummy = true;
         org_scn_community_basics.resizeContentAbsoluteLayout(that, content, that.onResize);
      };
   
      that._options = {packages: ['corechart'], callback : that.myCallback};
      google.load('visualization', '1', that._options);
   
      that._myId = that.oControlProperties.id;

as last line, we have to read out the container ID to place the chart into the canvas

Rendering

The rendering is made in onResize() method which is a bit specific for our SCN repository – this method is called always when the canvas gets resized. It means this is similar to afterRendering() method from UI5 – and at this point it is assured that the DOM objects are already created.

// RENDERING


      // semaphore
      if(that._chartLoaded == undefined) {
         return;
      }
      // reading the array defined in design studio
      var candles = that.getCandles();
      candles = JSON.parse(candles);
    
      var googleConformarray = [];
      for (var cI in candles) {
         var cO = candles[cI];
       
         googleConformarray.push(
            [cO.text, cO.start1, cO.start2, cO.end1, cO.end2]
         );
      }
      // google api for array conversion
      that._data = google.visualization.arrayToDataTable(
         googleConformarray
      ,
      // Treat first row as data as well.
      true);
      // clean up canvas
      $(document.getElementById(that._myId)).empty();
      // create new chart
      that._chart = new google.visualization.CandlestickChart(document.getElementById(that._myId));
      that._chart.draw(that._data, that._options);

Leassons Learned

In short,

* it is very easy to include google charts

* the API is really easy to understand

* google has indeed interesting license – only ONLINE use, see Last Words

More to Learn

* currently no events are implemented, here the difficulty will be to assure that the KEY can be found after the event.

Last Words

My question was how to make it offline – and the point is – it is not allowed ;-(

Frequently Asked Questions  |  Charts  |  Google Developers

[…]

Can I use charts offline?

Your users’ computers must have access to https://www.google.com/jsapi in order to use the interactive features of Google Charts. This is because the visualization libraries that your page requires are loaded dynamically before you use them. The code for loading the appropriate library is part of the included jsapi script, and is called when you invoke the google.load() method. Our terms of service do not allow you to download the google.load orgoogle.visualization code to use offline.

Can I download and host the chart code locally, or on an intranet?

Sorry; our terms of service do not allow you to download and save or host the google.load orgoogle.visualization code. However, if you don’t need the interactivity of Google Charts, you can screenshot the charts and use them as you wish.

[…]

by this, it is not possible to assure no data will left the company intranet. Of course it is only picking up the library from google servers, but by this “online” requirement and a call to google – it can potentially also push the reported data to google

It means, it is nice for any www projects where you have no problems with giving the data to google.

How does it look like?

And there is it – candle chart in design studio, directly online from google.

can2.PNG

Content in Repository

you can find the coded content in repository.

sdkpackage/src/org.scn.community.prototypes/res/GoogleCandle…

When we produce next version, it will be also in “prototypes”.

Question to Community

I would be interested in following question – would it be an option to wrap some google charts on the current google license (only ONLINE use)? This means every APPLICATION will call google – I hope this does not ship the data to google, but who knows 😉

Also, the charts can break any time – as the online version is out of the control.

What do you think?

To report this post you need to login first.

4 Comments

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

  1. Mike Howles

    Hey Karol,

    On the need for this component to rely on outside resources, this would not be too different than pulling resources from, say, Open Street Maps for tiles, right?

    (0) 
    1. Karol Kalisz Post author

      Hi Mike,

      as far I know Open Street Map is picking up only tiles (images) from given URL – and also those tiles can be placed internally at some server and you do not need the external access. The java script code for the integration is in-house.

      In the google chart case (perhaps similar in the map case) the complete JS is outside, it means

      * it can change (also it can break)

      * you never know the content (as it can change)

      * you never know what the script will do, eg. as it can change any time, it is possible that at some time it will send also your data to google “for evaluation purposes”…

      I am interested in some responses – is this something what someone would use as SDK extension?

      Karol

      (0) 
      1. Mike Howles

        Hey Karol, you are right, tile requests aren’t really a good equivalent, for the reasons you mentioned.  Perhaps probably a broader question would be, is your hesitation of using Google Charts API the same as any type of JS file hosted on a CDN?  I think it’s a valid point of consideration, however I think if it was a trustable CDN such as Google, the risk may be minimal.

        Wouldn’t it be pretty neat if our SCN community pack was CDN hosted, and as soon as we uploaded our JS fixes, everyone would receive the patches?  The only need for a new update would be for contribution.ztl or contribution.xml changes.  I’m not suggesting we do that because of firewall and other concerns, but it would be pretty cool 🙂

        (0) 
        1. Karol Kalisz Post author

          Hi Mike,

          I know that some customers are making that for internal developed components. This is saving also the deployment time when making changes in CSS / JS content. of course it must be carefully monitored to avoid incompatible changes which can occur.

          For me, it is an option – but I would be skeptic for community components as then it needs to be assured that the web page is always up..

          lets see if the topic with google charts has some interest.

          Karol

          (0) 

Leave a Reply