How to put a link (href) in a piechart

Question

How to put a link (href) in a piechart

Navigation

#1 by (2 votes)

3

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

I'm using a PieChart , follow jsfiddle link and page where I got the code.

Note: If you can do this with highcharts, it does not matter to me.

javascript html google-charts

asked by anonymous 03.09.2015 / 23:27

1 answer

Execute method on server when closing browser edit docx file and save to PDF in php

score 2 · Accepted Answer

The best way to resolve your issue is to use Google Charts events . In the example below, I select the event (click event in 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 function to a link. Follow 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
    }

}