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

<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>

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

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

@ 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

¡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

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

Etiquetas más populares

Ver todo

4 Respuestas

Etiquetas más populares

Preguntas más populares

Partners: