How to put a link (href) in a piechart

Question

How can I put a link somewhere in the graphic with Google Charts, a different link for each division of the graphic.

I’m wearing a Piechart, follows link from jsfiddle and of page where I got the code.

Note: If it is possible to do this with highcharts, for me it is no difference.

Answer 1

The best way to solve your problem is by using the Events of Google Charts. In the example below I serve the event of select (event of clicking on one of the parts of the graph), inside it it is possible to access the data of the selected part and thus can create its treatments to redirect using window.location, thus having the same functioning as a link. Follows jsfiddle

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([
        ['MG', 5],
        ['SP', 61],
        ['RS', 53],
        ['DF', 22]
    ]);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {
        width: 400,
        height: 280,
        is3D: true,
        title: ''
    });

    //Seta o callback no gráfico
    google.visualization.events.addListener(chart, 'select', selectHandler);

    //função callback para evento de select
    function selectHandler(e) {
        //alerta com os dados selecionados
        alert(data.getValue(chart.getSelection()[0].row, 0));
        // aqui você pode adicionar um window.location para funcionar como o link
    }

}