Prime Institute

Avalados por :

Solução para usar gráficos do Google no SAPUI5: Erros comuns e como corrigi-los

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

Olá,

Estou tentando usar gráficos do Google no SAPUI5, mas parece que não está funcionando.

Onde estou cometendo um erro??

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 Antecipei um pouco esta pergunta, então escrevi um blog a respeito vinculando odata ao nosso gráfico do Google .

Você vai precisar desse link direto, pois pretendo publicá-lo realmente na próxima semana para não aborrecer as pessoas no Twitter com muitos blogs, então ainda não está na minha lista de blogs.

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

Olá!

Como posso usar o serviço OData como fonte de dados para o gráfico?

Siddharth

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

Primeiramente, não é possível simplesmente incluir um arquivo js externo como você fez em sua importação de view1.controller.js. Sugiro que faça o download do arquivo e o importe localmente ou adicione a seguinte linha em seu index.html: 

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

Em seguida, não entendi por que você está definindo um div HTML em um modelo. Vou descartar isso e te dar meu exemplo de como fiz funcionar.

Primeiramente, em sua função onInit, substitua as partes do Google pelo seguinte: 

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

^^A função para configurar o callback não parecia funcionar, mas usar uma promessa é mais elegante de qualquer forma.

Em seguida, dentro de sua função drawChart, tenho: 

drawChart: function(){
                 // Criar a tabela de dados.
                 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]
                 ]);
         
                 // Estabelecer opções do gráfico
                 var options = {'title':'Quanta pizza comi ontem',
                                'width':400,
                                'height':300};
         
                 // Instanciar e desenhar nosso gráfico, passando algumas opções.
                 var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                 chart.draw(data, options);
             }
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?