Skip to Content
avatar image
Former Member

How to Integrate Google gauge with Ui5 application with XML views and JS controller?

Hi experts

I am developing UI5 application With XML Views and JS Controller, I want to use a gauge google ( guage in my application.since it is not available in our explored session i am trying to use google gauge.I can show it in index page of ui5 application..with html coding..

              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
              <script src="resources/sap-ui-core.js"
              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
              <script type="text/javascript" src=""></script>
              <script type="text/javascript" src="{'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>
              function drawMap() {
                  var data = google.visualization.arrayToDataTable([
        			['Label', 'Value'],
        			['Memory', 80],
        			['CPU', 55],
        			['Network', 68]
                  var options = {
        			width: 400, height: 120,
        			redFrom: 90, redTo: 100,
        			yellowFrom:75, yellowTo: 90,
        			minorTicks: 5
                var container = document.getElementById('map_canvas');
                var chart = new google.visualization.Gauge(container);
				//, 'select', myClickHandler);
                  chart.draw(data, options);
                 setInterval(function() {
			          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
			          chart.draw(data, options);
			        }, 13000);
			        setInterval(function() {
			          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
			          chart.draw(data, options);
			        }, 5000);
			        setInterval(function() {
			          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
			          chart.draw(data, options);
              google.load('visualization', '1', {packages: ['gauge'], callback: drawMap});         
       <body class="sapUiBody" role="application">
              <div id="map_canvas"></div>

Now how can i use this with XML view and JS controller since i need to load data from JS controller to guage?


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

0 Answers