'How to add links in google chart api

Can I add links in google chart api?

For example,

enter image description here

How could I add link to "Work" or "Eat" ?

Thanks!

apicharts


Solution 1:[1]

Lucky Frank's answer is good, but it just prints an alert box. Here is a more complete answer. I put the links in the DataTable, then I create a DataView so they are not passed to the chart.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'link', 'Hours per Day'],
          ['Work', 'http://www.thefreedictionary.com/work', 11],
          ['Eat', 'http://www.thefreedictionary.com/eat', 2],
          ['Commute', 'http://www.thefreedictionary.com/commute', 2],
          ['Watch TV', 'http://www.thefreedictionary.com/television',2],
          ['Sleep',  'http://www.thefreedictionary.com/sleep', 7]
        ]);

        var view = new google.visualization.DataView(data);
        view.setColumns([0, 2]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart( 
          document.getElementById('chart_div'));
        chart.draw(view, options);

        var selectHandler = function(e) {
         window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
        }

        // Add our selection handler.
        google.visualization.events.addListener(chart, 'select', selectHandler);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 900px;"></div>
  </body>
</html>

BTW, the Google Charts API really rocks! Thanks whoever wrote this.

Solution 2:[2]

The simple way of adding link to google barchart;

var data = google.visualization.arrayToDataTable([
     ['Element', 'Density', { role: 'style' }, { role: 'link' } ],
     ['Copper', 8.94, '#b87333', '/your/custom/link' ],
     ['Silver', 10.49, 'silver', '/your/custom/link' ],
     ['Gold', 19.30, 'gold', '/your/custom/link' ],
     ['Platinum', 21.45, 'color: #e5e4e2', '/your/custom/link' ]
  ]);

and before chart.draw;

 google.visualization.events.addListener(chart, 'select', function (e) {
            var selection = chart.getSelection();
                if (selection.length) {
                    var row = selection[0].row;
                    let link =data.getValue(row, 3);
                    location.href = link;
                }
        });

Solution 3:[3]

Solution: You just need to select the specific selection of chart by:

google.visualization.events.addListener(table, 'select', function() {
  var row = table.getSelection()[0].row;
  alert('You selected ' + data.getValue(row, 0));
  window.open(data.getValue(row, 0));
});

Full Example: jsfiddle.net

Solution 4:[4]

In the Google Charts documentation, an example shows how to use PatternFormat to create hyperlinks, and it shows the critical setting allowHtml which prevents the html characters from being encoded literally.

In my example I combine data from columns 9 and 11 to format a hyperlink in column 11:

    var hyperLinker = new google.visualization.PatternFormat('<a href="${hyperlinkBaseUrl!""}/path/{0}" target="_blank">{1}</a>');
    hyperLinker.format(dataTable, [ 9, 11 ], 11);

    var googleTable = new google.visualization.Table(document.getElementById('dataTable_div'));
    googleTable.draw(dataTable, {showRowNumber: true, allowHtml: true, width: '100%', height: '100%'});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mark Butler
Solution 2 Tuncay Elvanağaç
Solution 3 MADHUR GUPTA
Solution 4 Steve Jones

Related Questions