How to add links in google chart api

http://code.google.com/apis/chart/interactive/docs/events.html

<script type="text/javascript"> 
google.load('visualization', '1', {'packages':['corechart']}); 
google.setOnLoadCallback(drawChart);  
function drawChart()
{
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Count'); 

    data.addRows([ ['Value A',5 ],['Value B',61 ],['Value C',53 ],['Value D',22 ] ]); 
    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, {width: 400, height: 280, is3D: true, title: ''});

    google.visualization.events.addListener(chart, 'select', selectHandler); 

    function selectHandler(e)     {   
        alert(data.getValue(chart.getSelection()[0].row, 0));
    }

}   

</script>

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


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;
                }
        });

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.

Tags:

Api

Charts

Recent Posts