i have sankey chart. has 2 sections - vegetables , frutis. not want tentacles vegetables.
is possible?
here screenshot:
this current code 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 select nodes. labelpadding: 10, // horizontal distance between label , node. nodepadding: 10, // vertical distance between nodes. } } }; // instantiates , draws our chart, passing in 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>
you can use blank string ('') rid of word null
and weight value of (1) reduce size of link
[ 'vegetables 70.2%','', 1],
see 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 select nodes. labelpadding: 10, // horizontal distance between label , node. nodepadding: 10, // vertical distance between nodes. } } }; // instantiates , draws our chart, passing in 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 value combos
using negative weight value (-1) seems produce want
[ 'vegetables 70.2%','', -1],
but -- chart cuts off half text
tried several adjustments fix cutoff, no luck
such size, padding, margins, font, etc...
maybe can work, see 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 select nodes. labelpadding: 10, // horizontal distance between label , node. nodepadding: 10, // vertical distance between nodes. } } }; // instantiates , draws our chart, passing in 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 no standard options available achieve desired result,
chart's svg can modified directly
the chart try revert it's natural , feel on each event,
needs modified on
'ready', 'select', 'onmouseover', etc...
see following working snippet, desired result,
may necessary add event or two,
or may possibly think of 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 select nodes. labelpadding: 10, // horizontal distance between label , node. nodepadding: 10, // vertical distance between nodes. } } }; // instantiates , draws our chart, passing in 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, events lag
, highlighting on vegetables row appears "flicker" or "blink"
shown during events, removed
using mutationobserver allows remove highlighting before applied
removing "flicker" seen in previous example
see 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 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>
Comments
Post a Comment