Google Visualization Chartwrapper Selecting Chart Element

Question

I can't seem to get the value of a piechart slice when selected. Here is my code:

var pieChart = new google.visualization.ChartWrapper( {
    chartType: 'PieChart',
    containerId: 'chart_div',
    dataTable: saleTypes,
    options: { 
        title: 'Types of Sale',
        titleTextStyle: {
            fontSize: 18
        },
        width: 300,
        height: 300,
        chartArea: { width: '100%', height: '75%' },
        legend: {
            position: 'bottom'
        }
    }
} );

google.visualization.events.addListener( pieChart, 'ready', onReady );

function selectHandler() {
    var selectedItem = pieChart.getChart().getSelection()[0];
    if ( selectedItem ) {
        var value = data.getValue(selectedItem.row, selectedItem.column);
        alert('The user selected ' + value);
    }
}

function onReady() {
   google.visualization.events.addListener( pieChart.getChart(), 'select', selectHandler );
}

pieChartViolationTypes.draw();

I get the following error:

Uncaught Error: Invalid row index undefined. Should be in the range [0-112]

WhiteHat WhiteHat · Accepted Answer · 2017-05-15T11:22:33

try using the chart's data table to access values within the select handler...

pieChart.getDataTable().getValue(selectedItem.row, 1);

not sure where data is defined but if the chart is bound to a filter,
then need to use the current data the chart is working with...

function selectHandler() {
    var selectedItem = pieChart.getChart().getSelection()[0];
    if ( selectedItem ) {
        var value = pieChart.getDataTable().getValue(selectedItem.row, 1);
        alert('The user selected ' + value);
    }
}

note: pie charts may only have one series column and return null for the column index in getSelection

EDIT

if a view is also applied on the chart,
use the selection to get the row index from view.rows

pieChart.getView().rows[selectedItem.row]

var value = pieChart.getDataTable().getValue(pieChart.getView().rows[selectedItem.row], 1);

Google Visualization Chartwrapper Selecting Chart Element

1 Answers