Show Text on Google Chart Sankey Diagram

Question

I'm using Google Chart - Sankey Diagram. I want to make the weights show up on each flow with no need mouse over.

For the official sample as following (jsfiddle):

  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
      [ 'A', 'X', 5 ],
      [ 'A', 'Y', 7 ],
      [ 'A', 'Z', 6 ],
      [ 'B', 'X', 2 ],
      [ 'B', 'Y', 9 ],
      [ 'B', 'Z', 4 ]
    ]);

    // Sets chart options.
    var options = {
      width: 600,
    };

    // Instantiates and draws our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
  }

It may look like this:

I found this solution, but it's not what I want.

What I want is directly showing the weight as label on the flow. You don't need to move your mouse over any flow to see how many weight it is.

Answer 1

Google charts isn't really that capable of that sort of customization.

This solution that you linked to seems like a good compromise if you're determined to use google charts. If you'd rather get the labels over use google charts, I'd suggest looking into d3.js, which allows about as much customization as you can imagine.

Using d3.js and the Sankey diagram plugin I created your desired graph by adding the lines:

/* add links */
var link = svg.append("g").selectAll(".link")
    .data(graph.links)
    .enter()
  .append("path")
    .attr("class", "link")
    .attr("id",function(d,i) { return "linkLabel" + i; })
    .attr("d", path)
    .style("stroke-width", function (d) {
       return Math.max(1, d.dy);
    })
    .sort(function (a, b) {
       return b.dy - a.dy;
    })
...

var labelText = svg.selectAll(".labelText")
    .data(graph.links)
    .enter()
  .append("text")
    .attr("class","labelText")
    .attr("dx",130)
    .attr("dy",0)
  .append("textPath")
    .attr("xlink:href",function(d,i) { return "#linkLabel" + i;})
    .text(function(d,i) {                                 
        return d.source.name + " → " + d.target.name + " : " + d.value;});

JSFiddle