cancel
Showing results for 
Search instead for 
Did you mean: 

How to use Google Charts in SAPUI5

former_member592880
Participant
0 Kudos

hello,

I am trying to use google charts in SAPUI5, but it does not seem to work.

where am I going wrong??

XML

<mvc:View controllerName="com.google.chart.GoogleCharts3.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml"
 xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
 <App id="idAppControl">
  <pages>
   <Page title="{i18n>title}">
    <content>
     <FormattedText htmlText="{/HTML}"/>    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

JS

sap.ui.define([
 "sap/ui/core/mvc/Controller",
 "https://www.gstatic.com/charts/loader.js"
], function (Controller, google) {
 "use strict";
 return Controller.extend("com.google.chart.GoogleCharts3.controller.View1", {
  onInit: function () {
   var that = this;
   var oModel = new JSONModel({
    HTML: "<div id=\"iPanel\"></div>"
   });
   that.getView().setModel(oModel);
   google.chart.load("current", {
    "package": ["corechart"]
   });
   google.charts.setOnLoadCallBack(drawChart);
  },
  drawChart: function () {
   var that = this;
   var data = new google.visualization.DataTable();
   data.addColumn("string", "Topping");
   data.addColumn("number", "Slices");
   data.addRows([
    ["Mushrooms", "3"],
    ["Onions", "1"],
    ["Olives", "1"],
    ["Zucchini", "1"],
    ["Pepperoni", "2"]
   ]);
   var options = {
    "title": "How much Pizza I ate Last Night",
    "width": "400",
    "height": "300"
   };
   var chart = new google.visualization.PieChart(that.getView().byId("iPanel"));
   chart.draw(data, options);
  },
 });
});

Thanking you

Siddharth

PS: I'm using the google guide to do it : https://developers.google.com/chart/interactive/docs/quick_start

Accepted Solutions (1)

Accepted Solutions (1)

Okay, first of all, you can't just include an external js file like you have in your import of view1.controller.js I suggest you either download the file and import it locally OR add the following line in your index.html:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Next, I have no idea why you're defining an HTML div in a model I am going to go ahead and throw that away and give you my example of how I got it working.

First, in your onInit function replace the google parts with the following:

        var loading = google.charts.load('current', {'packages':['corechart']});
                    loading.then(function(){
                        this.drawChart();
                    }.bind(this));

^^The function for setting up the callback didn't seem to be working, but using a promise is nicer regardless.

Then inside of your drawChart function I have:

drawChart: function(){
             // Create the data table.
             var data = new google.visualization.DataTable();
             data.addColumn('string', 'Topping');
             data.addColumn('number', 'Slices');
             data.addRows([
               ['Mushrooms', 3],
               ['Onions', 1],
               ['Olives', 1],
               ['Zucchini', 1],
               ['Pepperoni', 2]
             ]);
     
             // Set chart options
             var options = {'title':'How Much Pizza I Ate Last Night',
                            'width':400,
                            'height':300};

             // Instantiate and draw our chart, passing in some options.
             var chart = new google.visualization.PieChart(this.getView().byId("myHBox").getDomRef());
             chart.draw(data, options);
        },

Note that I've replaced "document.getElementById" with the function .getDomRef() when using the internal UI5 function of this.getView().byId() and in the XML I simple have a HBox with the ID of "myHBox" as seen here:

<HBox id="myHBox">
</HBox>

Try that out instead and let me know how you get on.

former_member592880
Participant
0 Kudos

hey,

how do I use OData service as a data source for the chart???

Siddharth

@sid4597 I did somewhat anticipate this question and so I wrote a blog about it binding odata to our google chart.

You'll need that direct link as I planned to only really publish it next week so not to bore people on twitter with too many blogs and as such it doesn't show up in my blogs list just yet.

former_member592880
Participant
0 Kudos
nathan.hand ,

I read through your blog multiple times, but might be due to my lack of experience in sapui5, most of it bounced over my head.
like:
1) what exactly is a promise (I did read your blog about that too, still I'm kinda confused about it...)

2) how are you assigning the json to that graph, is it possible to attach only specific fields and not the entire thing?

3) what does promise.all do??

4)what happens in the function returnListNamesWithNumberOfTasks?

regards

Siddharth

nabheetscn
Active Contributor

Sidhharth I will suggest you to google about promises in javascript to understand better the JS concepts. Are you taking the plunge from ABAP to UI5 if yes then please make sure you understand HTML/CSS/JS completely otherwise it will be tought.

sid4597,

Sorry that you've not understood what a promise is from my blogs/ posts but rather than try and explain here I suggest that you google/ look online for examples and understanding of a promise. Note that it's the same as async/await if you're familiar with that.

returnListNamesWithNumberOfTasks returns to us our data in the following key/value format because what I want is the number of tasks per 'listname' that exist.

{daniel: 2, ioan: 5, irina: 9, jani: 2, joel: 1, matt: 4 ...}

Which we then turn into arrays' rather than key-value pairs because this is what google charts expects to be passed into it. If you don't fully understand that function I suggest that you look further into JavaScript as a whole.

former_member592880
Participant
0 Kudos
nathan.hand ,

yes, I have been reading about it from different sources to get a hang of it.

sorry I didn't reply to earlier, I was assigned another assignment that took all my attention.

and thank a lot for everything. 🙂

regards

Siddharth

Answers (1)

Answers (1)

Former Member
0 Kudos

How to bind a piechart to blocklayout cell in sapui5? See image....