RequireJS Google Chart Cognos Analytics

30 views
Skip to first unread message

Gentoozero

unread,
Aug 16, 2018, 6:47:34 PM8/16/18
to Google Visualization API
Hola,

Estoy intentando incluir un gráfico Sankey de Google Chart en Cognos Analytics. Como requisito para poder integrarlos, necesito crear un módulo que sea compatible con requireJS, pero cuando lo incluyo tengo problemas con dependencias de D3. ¿Pódeis echarme un cable?



define
(["https://www.gstatic.com/charts/loader.js"], function() {
   
"use strict";


   
function Control() {};
   
Control.prototype.initialize = function(oControlHost, fnDoneInitializing) {
        console
.log('entra en initialize');
       
this.m_oControlHost = oControlHost;
        fnDoneInitializing
();
        console
.log('sale de initialize');
   
};
   
Control.prototype.destroy = function(oControlHost) {
       
this.m_oControlHost = null;
   
};
   
Control.prototype.getConfigurationValue = function(sName, sDefaultValue) {
       
var o = this.m_oControlHost.configuration;
       
return (o && (o[sName] !== undefined)) ? o[sName] : sDefaultValue;
   
};
   
Control.prototype.drawChart = function() {
        console
.log('entra en drawChart');
       
var data = new google.visualization.DataTable();
        data
.addColumn('string', 'From');
        data
.addColumn('string', 'To');
        data
.addColumn('number', 'Weight');
        data
.addRows([
           
['Brazil', 'Portugal', 5],
           
['Brazil', 'France', 1],
           
['Brazil', 'Spain', 1],
           
['Brazil', 'England', 1],
           
['Canada', 'Portugal', 1],
           
['Canada', 'France', 5],
           
['Canada', 'England', 1],
           
['Mexico', 'Portugal', 1],
           
['Mexico', 'France', 1],
           
['Mexico', 'Spain', 5],
           
['Mexico', 'England', 1],
           
['USA', 'Portugal', 1],
           
['USA', 'France', 1],
           
['USA', 'Spain', 1],
           
['USA', 'England', 5],
           
['Portugal', 'Angola', 2],
           
['Portugal', 'Senegal', 1],
           
['Portugal', 'Morocco', 1],
           
['Portugal', 'South Africa', 3],
           
['France', 'Angola', 1],
           
['France', 'Senegal', 3],
           
['France', 'Mali', 3],
           
['France', 'Morocco', 3],
           
['France', 'South Africa', 1],
           
['Spain', 'Senegal', 1],
           
['Spain', 'Morocco', 3],
           
['Spain', 'South Africa', 1],
           
['England', 'Angola', 1],
           
['England', 'Senegal', 1],
           
['England', 'Morocco', 2],
           
['England', 'South Africa', 7],
           
['South Africa', 'China', 5],
           
['South Africa', 'India', 1],
           
['South Africa', 'Japan', 3],
           
['Angola', 'China', 5],
           
['Angola', 'India', 1],
           
['Angola', 'Japan', 3],
           
['Senegal', 'China', 5],
           
['Senegal', 'India', 1],
           
['Senegal', 'Japan', 3],
           
['Mali', 'China', 5],
           
['Mali', 'India', 1],
           
['Mali', 'Japan', 3],
           
['Morocco', 'China', 5],
           
['Morocco', 'India', 1],
           
['Morocco', 'Japan', 3]
       
]); // Set chart options
       
var options = {
            width
: 600
       
};
       
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
        chart
.draw(data, options);
        console
.log('sale de drawChart');
   
};
   
Control.prototype.draw = function(oControlHost) {
        console
.log('entra en draw');
       
var elContainer = oControlHost.container;
        elContainer
.innerHTML = '<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>';
        google
.charts.load('visualization', '1.1', {
           
'packages': ['sankey']
       
});
        google
.charts.setOnLoadCallback(this.drawChart.bind(this));
        console
.log('sale de draw');
   
};
   
Control.prototype.setData = function(oControlHost, oDataStore) {
        console
.log('entra en setData');
       
this.m_oDataStore = oDataStore;
        console
.log('sale de setData');
   
};
   
return Control;
});


Cognos ejecuta en este orden los procedimientos:

initialize
setData: Aquí se leerán los datos con la API de Cognos que después se pasarán al sankey en vez de meterlos hardcodeados en el método drawchart. 
Draw: Pinta un contenedor y el gráfico, aquí es donde falla al llamar a la función drawchart.

Si pudieseis ponerme un ejemplo de como funcionaría el Sankey con RequireJS creo que podría continuar.

Muchas gracias,
Un saludo,


Reply all
Reply to author
Forward
0 new messages