- SAP Managed Tags:
-- 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😞
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.
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?
4 Comments
