Geek Answers Handbook

Displaying Google Charts Using Sankey Charts

I have a Sankey chart. It has 2 sections - Vegetables and Frutis. I don't want tentacles for vegetables.

Is it possible?

Here is a screenshot:

Problem

This is my current code for the Sankey Chart:

<html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <style> .my-padding { margin-top: 50px; margin-bottom: 50px; margin-right:50px; } </style> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Vegetables 70.2%',, 70.2], [ 'Fruits 29.8%', 'Orange 9%', 9 ], [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], [ 'Fruits 29.8%', 'Banana 7.9%', 7.9 ], [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], [ 'Orange 9%', 'Apple 4.0%', 4.0 ], [ 'Orange 9%', 'Banana 3.2%', 3.2 ], [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], ]); // Sets chart options. var options = { width: 1000, height:600, sankey: { node: { label: { fontName: 'sans-serif', fontSize: 17, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 10, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. } } }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div class="container"> <div class="row" > <div class="col-md-6 my-padding"> <div id="sankey_basic" ></div> </div> </div> </div> </body> </html>
+7
javascript google-visualization charts
source share
1 answer

you can use an empty string ( '' ) to get rid of the word null

and weight value ( 1 ) to reduce link size

[ 'Vegetables 70.2%','', 1],

see the following working snippet ...

 google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Vegetables 70.2%','', 1], [ 'Fruits 29.8%', 'Orange 9%', 9 ], [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], [ 'Orange 9%', 'Apple 4.0%', 4.0 ], [ 'Orange 9%', 'Banana 3.2%', 3.2 ], [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], ]); // Sets chart options. var options = { width: 1000, height:600, sankey: { node: { label: { fontName: 'sans-serif', fontSize: 17, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 10, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. } } }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>

I tried several different combo values

using a negative weight value ( -1 ) seems to give exactly what you want

[ 'Vegetables 70.2%','', -1],

BUT - the graph cuts half the text

tried a few settings to fix the cutoff, no luck
such as size, padding, margins, font, etc.

maybe you can make it work, see the following snippet ...

 google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Vegetables 70.2%','', -1], [ 'Fruits 29.8%', 'Orange 9%', 9 ], [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], [ 'Orange 9%', 'Apple 4.0%', 4.0 ], [ 'Orange 9%', 'Banana 3.2%', 3.2 ], [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], ]); // Sets chart options. var options = { width: 1000, height:600, sankey: { node: { label: { fontName: 'sans-serif', fontSize: 17, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 10, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. } } }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>

EDIT

since standard parameters are not available to achieve the desired result,
svg chart can be changed directly

the chart will try to restore its natural appearance at every event,
therefore it must be changed to
'ready' , 'select' , 'onmouseover' , etc.

see the following working snippet to get the desired result,
you may need to add another event or two,
or you might think of a different approach ...

 google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Vegetables 70.2%','', 1], [ 'Fruits 29.8%', 'Orange 9%', 9 ], [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], [ 'Orange 9%', 'Apple 4.0%', 4.0 ], [ 'Orange 9%', 'Banana 3.2%', 3.2 ], [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], ]); // Sets chart options. var options = { width: 1000, height:600, sankey: { node: { label: { fontName: 'sans-serif', fontSize: 17, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 10, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. } } }; // Instantiates and draws our chart, passing in some options. var container = document.getElementById('sankey_basic'); container.addEventListener('mouseover', fixVeggies, false); container.addEventListener('mouseout', fixVeggies, false); var chart = new google.visualization.Sankey(container); google.visualization.events.addListener(chart, 'ready', fixVeggies); google.visualization.events.addListener(chart, 'select', fixVeggies); google.visualization.events.addListener(chart, 'onmouseover', fixVeggies); google.visualization.events.addListener(chart, 'onmouseout', fixVeggies); function fixVeggies() { container.getElementsByTagName('path')[0].setAttribute('fill', '#ffffff'); container.getElementsByTagName('rect')[0].setAttribute('fill', '#ffffff'); container.getElementsByTagName('rect')[1].setAttribute('fill', '#ffffff'); } chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>

UPDATE

the above solution works, but certain events lag behind and highlighting in the line “Vegetables” is like “flickering” or “flickering”
as shown during certain events, then deleted

using MutationObserver allows you to remove the highlight before applying it
thus removing the “flicker” seen in the previous example

see the following working snippet using MutationObserver ...

 google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Vegetables 70.2%','', 1], [ 'Fruits 29.8%', 'Orange 9%', 9 ], [ 'Fruits 29.8%', 'Apple 8.6%', 8.6 ], [ 'Fruits 29.8%', 'Banan 7.9%', 7.9 ], [ 'Fruits 29.8%', 'Grapes 4.3%', 4.3 ], [ 'Orange 9%', 'Apple 4.0%', 4.0 ], [ 'Orange 9%', 'Banana 3.2%', 3.2 ], [ 'Orange 9%', 'Grapes 1.7%', 1.7 ], [ 'Apple 8.6%', 'Orange 4.8%', 4.8 ], [ 'Apple 8.6%', 'Banana 2.0%', 2.0 ], [ 'Apple 8.6%', 'Grapes 1.8%', 1.8 ], [ 'Banana 7.9%', 'Orange 3.4%', 3.4 ], [ 'Banana 7.9%', 'Apple 2.9%', 2.9 ], [ 'Banana 7.9%', 'Grapes 2.4%', 1.7 ], [ 'Grapes 4.3%', 'Orange 1.6%', 1.6 ], [ 'Grapes 4.3%', 'Banana 1.4%', 1.4 ], [ 'Grapes 4.3%', 'Apple 1.3%', 1.3 ], ]); var options = { width: 1000, height:600, sankey: { node: { label: { fontName: 'sans-serif', fontSize: 17, color: '#000', bold: true, italic: false }, interactivity: true, labelPadding: 10, nodePadding: 10, } } }; var container = document.getElementById('sankey_basic'); var chart = new google.visualization.Sankey(container); // remove shading from vegetable row var observer = new MutationObserver(function(mutations) { mutations.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { if (node.tagName === 'path') { var desc = node.getAttribute('d').split(','); if ((desc.length > 0) && (desc[2] === '0')) { node.setAttribute('fill', '#ffffff'); } } if (node.tagName === 'rect') { if (parseInt(node.getAttribute('y')) === 0) { node.setAttribute('fill', '#ffffff'); } } }); }); }); var config = { childList: true, subtree:true }; observer.observe(container, config); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_basic"></div>
+5
source share

More articles:


All Articles