Javascript AJAX jQuery HTML PHP Example MORE
Need a Website Or Web Application.Contact : +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 branch_name=data.getFormattedValue(selection[0].row,0);
                 var url="http://google.com?branchName="+branch_name;
                 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