cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

Former Member

on ‎01-25-2017 1:16 PM

0 Kudos

Hi experts

I am developing UI5 application With XML Views and JS Controller, I want to use a gauge google (https://developers.google.com/chart/interactive/docs/gallery/gauge) 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..

<html>
       <head>
              <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"
                           id="sap-ui-bootstrap"
                           data-sap-ui-libs="sap.ui.commons"
                           data-sap-ui-theme="sap_bluecrystal">
              </script>
              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
              <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
              <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>
              <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);
                 
                  
                 
				//google.visualization.events.addListener(chart, '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);
			        },26000);
              }
              google.load('visualization', '1', {packages: ['gauge'], callback: drawMap});         
              </script>
       </head>
       <body class="sapUiBody" role="application">
              <div id="map_canvas"></div>
       </body>
</html>

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

Thanks

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (0)

Ask a Question