Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Complex Sankey with an individual tooltip for each item

48 views
Skip to first unread message

Daniel Hinostroza

unread,
Aug 22, 2024, 3:18:43 PM8/22/24
to Google Visualization API
Hi,
I've added the HTML tooltip and the Sankey chart displays nicely.

The problem I have is that the tool tip is showing the weight of the lines (not needed, as they are all the same weight), and the text I provided is the same for all lines.

My rows look like this:

        ['L1 Fred', 'L2 Ann', 50],

        ['L1 Bill', 'L2 Ann', 50],

        ['L1 Carol', 'L2 Ann', 50],

        ['L1 Jim', 'L3 Kevin', 50],

        ['L2 Ann', 'L3 Kevin', 50],

        ['L1 Sally', 'L3 Kevin', 50],

        ['L3 Kevin', 'L4 Daniel', 50]

I would like to modify the code to display a TEXT tooltip (as the tooltip will be populated from multiple fields in a database:

        ['L1 Fred', 'L2 Ann', 'L1-L2 ID 12345', 50],

        ['L1 Bill', 'L2 Ann', 'L1-L2 ID 11222', 50],

        ['L1 Carol', 'L2 Ann', 'L1-L2 ID 34566', 50],

        ['L1 Jim', 'L3 Kevin', 'L1-L3 ID 45383', 50],

        ['L2 Ann', 'L3 Kevin', 'L2-L3 ID 76154', 50],

        ['L1 Sally', 'L3 Kevin', 'L1-L3 ID 88345', 50],

        ['L3 Kevin', 'L4 Daniel', 'L3-L4 ID 55345', 50]

The full code is displayed below:

<html>

<head>

  <h1>Complex Sankey with Tooltip</h1>

 <script type="text/javascript" src="http://www.gstatic.com/charts/loader.js"></script>

      <div id="sankey_multiple"></div>

      <div id="HTML_tooltip" style="position: relative; left: 30px;" ></div>

</head>


<body>

<script type="text/javascript">

      google.charts.load('current', {'packages':['sankey']});

      google.charts.setOnLoadCallback(drawChart);


function drawChart() {

    var data = new google.visualization.DataTable();

    var formatter = new google.visualization.NumberFormat({pattern:''});  // $###.## bn

    data.addColumn('string', 'From');

    data.addColumn('string', 'To');

    data.addColumn('number', 'Weight');

    data.addColumn({type: 'string', role: 'tooltip'});

    data.setColumnProperty(3, 'html', true);

    data.addRows([

        ['L1 Fred', 'L2 Ann', 50],

        ['L1 Bill', 'L2 Ann', 50],

        ['L1 Carol', 'L2 Ann', 50],

        ['L1 Jim', 'L3 Kevin', 50],

        ['L2 Ann', 'L3 Kevin', 50],

        ['L1 Sally', 'L3 Kevin', 50],

        ['L3 Kevin', 'L4 Daniel', 50]

        ].map(function(d) {

        d.push(formatter.formatValue(d[2])+ ' <b>Level & ID</b></br>'); 

        return d; 

    }));;


    // Set chart options

    var options = {

        width: 750,

        height: 300,

        tooltip: {isHtml: true},

        // formatNumber: '$### m',

        sankey: {

            iterations: 64,

            node: {

                // pattern: '$### m',

                nodePadding: 30,

                interactivity: true,

                label: {

                    fontName: 'Arial', 

                    fontSize: 14,

                    color: '#175091', 

                    bold: false,

                    italic: false

                }

            },

            allowHtml: 'true',

            tooltip: {

                isHtml: 'true'

            }

        }


    };

    var formatter = new google.visualization.NumberFormat({

        // prefix: '$',

        // pattern: '$###.## m'

    });

    formatter.format(data, 2);


    // Instantiate and draw our chart, passing in some options.

    var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple', 'HTML_tooltip'));

    chart.draw(data, options);

}

  </script>

</body>

</html>

Reply all
Reply to author
Forward
0 new messages