Skip to Content

How to use Google Charts in SAPUI5


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

where am I going wrong??


<mvc:View controllerName="" xmlns:html=""
 xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
 <App id="idAppControl">
   <Page title="{i18n>title}">
     <FormattedText htmlText="{/HTML}"/>    </content>


], function (Controller, google) {
 "use strict";
 return Controller.extend("", {
  onInit: function () {
   var that = this;
   var oModel = new JSONModel({
    HTML: "<div id=\"iPanel\"></div>"
   google.chart.load("current", {
    "package": ["corechart"]
  drawChart: function () {
   var that = this;
   var data = new google.visualization.DataTable();
   data.addColumn("string", "Topping");
   data.addColumn("number", "Slices");
    ["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


PS: I'm using the google guide to do it :

Add comment
10|10000 characters needed characters exceeded

2 Answers

  • Best Answer
    Posted on Jan 14, 2019 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=""></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']});

    ^^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');
                   ['Mushrooms', 3],
                   ['Onions', 1],
                   ['Olives', 1],
                   ['Zucchini', 1],
                   ['Pepperoni', 2]
                 // Set chart options
                 var options = {'title':'How Much Pizza I Ate Last Night',
                 // 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">

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

    Add comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 22, 2019 at 04:49 PM

    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