Skip to Content

How to use Google Charts in SAPUI5

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

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    Jan 14 at 01:14 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

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


    capturar.jpg (90.1 kB)
    Add comment
    10|10000 characters needed characters exceeded