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,