Complex Sankey with an individual tooltip for each item

33 views
Skip to first unread message

Daniel Hinostroza

unread,
Aug 22, 2024, 3:18:43 PMAug 22
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