Javascript Ajax jQuery HTML PHP Example MORE
Need a Website Or Web Application Or Any Help.Contact Us: +91 9437911966 (Whatsapp) Note: Paid Service

How to add link to google bar or pie chart

In this example i am going to show you how to link to another page in google bar or pie chart.

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h2>Branch Wise Employee</h2>
<div id="chart_div" style="height:400px;width:450px"></div>
<script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Branch Name', 'Total Employee'],
            ['Delhi', 1000],
            ['Mumbai', 900],
            ['Pune', 700],
            ['Chenai', 855]
        ]);
		var options = {
			chart: {
				title: 'Employee List ',
			}
        };
		var chart = new google.charts.Bar(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        chart.draw(data, options);
        google.visualization.events.addListener(chart, 'select', selectHandler);
        function selectHandler(e) {
             var selection = chart.getSelection();
             var district=data.getFormattedValue(selection[0].row,0);
             var url="http://google.com";
             window.location.href =url;
            var message = '';
            for(var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = data.toJSON(item.row, item.column);
                    message += str;
                } else if (item.row != null) {
                    var str = data.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = data.getFormattedValue(0, item.column);
                     message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                }
            }
            if (message == '') {
                message = 'nothing';
            }
        
        }
    }
</script>
</body>
</html>

Run it yourself