JSFiddle - React, Tailwind, and code Playground
by Osvaldo
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['sankey'],
language: 'es'
});
</script>
<div id="flujos2" style="width: 100%; height: 270px; margin-bottom: 1em;"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'De');
data.addColumn('string', 'Para');
data.addColumn('number', 'Cantidad');
data.addRows([
['John', "Moe's Tavern", 5],
['Mary', "Moe's Tavern", 7],
['Rocket', "Moe's Tavern", 6],
['John', "Rick's Café", 2],
['Mary', "Rick's Café", 9],
['Rocket', "Rick's Café", 4],
['Rocket', 'Café René', 4],
['John', 'The Bronze', 4],
['Stark Industries', "John", 11],
['Stark Industries', "Rocket", 14],
['Wayne Enterprises', "Mary", 16],
]);
// Sets chart options.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c', '#a6aee3'];
var options = {
sankey: {
node: {
nodePadding: 30,
width: 20,
colors: colors,
label: {
fontName: '"Work Sans",sans-serif',
fontSize: 13,
color: '#212529'
}
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
// Instantiates and draws our chart,...