Prime Institute
¡Caminando hacia el éxito!

Aprende en Comunidad

Avalados por :

Solución para usar gráficos de Google en SAPUI5: Errores comunes y cómo corregirlos

Crear
  • Creado 01/03/2024
  • Modificado 01/03/2024
  • 8 Vistas
0
Cargando...

hola,

Estoy intentando usar gráficos de Google en SAPUI5, pero parece que no funciona.

¿Dónde estoy cometiendo un error??

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"
            
            

                

                                            SAPUI5
                                    

                

                    
                    

                        
Pedro Pascal

                        
Se unió el 07/03/2018

                    

                

            

            
                            

                    Responder
Pinterest
Telegram
Linkedin
Whatsapp

4 Respuestas

0
Cargando...
nathan.hand ,

I read through your blog multiple times, but might be due to my lack of experience in sapui5, most of it bounced over my head.
like:
1) what exactly is a promise (I did read your blog about that too, still I'm kinda confused about it...)

2) how are you assigning the json to that graph, is it possible to attach only specific fields and not the entire thing?

3) what does promise.all do??

4)what happens in the function returnListNamesWithNumberOfTasks?

regards

Siddharth

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar
0
Cargando...

@ sid4597 Anticipaba un poco esta pregunta, así que escribí un blog al respecto enlazando odata a nuestro gráfico de Google .

Necesitarás ese enlace directo, ya que planeo publicarlo realmente la próxima semana para no aburrir a la gente en Twitter con demasiados blogs, por lo que aún no aparece en mi lista de blogs.

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar
0
Cargando...

¡Hola!

¿Cómo puedo utilizar el servicio OData como fuente de datos para el gráfico?

Siddharth

Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar
0
Cargando...

Bueno, en primer lugar, no puedes simplemente incluir un archivo js externo como lo has hecho en tu importación de view1.controller.js. Te sugiero que descargues el archivo e lo importes localmente O añadas la siguiente línea en tu index.html: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

A continuación, no tengo idea de por qué estás definiendo un div de HTML en un modelo. Voy a descartarlo y darte mi ejemplo de cómo lo hice funcionar.

Primero, en tu función onInit, reemplaza las partes de google con lo siguiente: 

        var loading = google.charts.load('current', {'packages':['corechart']});
                    loading.then(function(){
                        this.drawChart();
                    }.bind(this));

^^La función para configurar el callback no parecía funcionar, pero usar una promesa es más elegante de todos modos.

Luego, dentro de tu función drawChart tengo: 

drawChart: function(){
             // Crear la tabla de datos.
             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]
             ]);
     
             // Establecer opciones del gráfico
             var options = {'title':'Cuánta pizza comí anoche',
                            'width':400,
                            'height':300};

             // Instanciar y dibujar nuestro gráfico, pasando algunas opciones.
             var chart = new google
Respondido el 15/04/2024
LUCIANO RIOJA GHIOTTO
Se unió el 13/07/2019
Agregar

Partners:

contacto@primeinstitute.com

(+51) 1641 9379
(+57) 1489 6964

© 2024 Copyright. Todos los derechos reservados.

Desarrollado por Prime Institute

¡Hola! Soy Diana, asesora académica de Prime Institute, indícame en que curso estas interesado, saludos!
Hola ¿Puedo ayudarte?