Skip to Content
0
Jan 14, 2019 at 06:11 AM

How to use Google Charts in SAPUI5

632 Views Last edit Jan 14, 2019 at 06:59 AM 2 rev

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