chart.getSelection() does not work properly with google bar charts

问题

drawBarChart = function (data) { 
//few statements goes here which sets options which are being passed to chartDraw i.e. t.options.chart.options

gChart = new google.visualization.BarChart(chartingPlace);
        //setTimeout(function () {
        // t.options.chart.options.height = ((t.chart.size.height) - 40) + "px";
        ////console.log(JSON.stringify(t.options.chart.options));

        //google.visualization.events.addListener(gChart, 'ready', function () {
            // grab a few details before redirecting
            google.visualization.events.addListener(gChart, 'select', function () {
                var selectedItem = gChart.getSelection()[0];
                console.log(gChart.getSelection());
                if (selectedItem) {
                    var topping = data.getValue(selectedItem.row, 0);
                    alert('The user selected ' + topping);
                }

           // });
        });
gChart.draw(data, t.options.chart.options);
}

My app having a number of charts displaying for different scenarios. My requirement is, click on a bar from google bar chart and open a new tab associated with the name of the bar. For this purpose, I tried using direct 'select' event on bar chart as follows:

google.visualization.events.addListener(gChart, 'select', function () {
                    var selectedItem = gChart.getSelection()[0];
                    console.log(gChart.getSelection());
                    if (selectedItem) {
                        var topping = data.getValue(selectedItem.row, 0);
                        alert('The user selected ' + topping);
                    }
});

But I could not get, this returned empty array for gChart.getSelection(), so I tried the code with 'ready' event mentioned in as first code above. It works, but not output is not consistent. sometimes it gives empty array and sometimes with selected object.

I am still not able to find why it is showing this kind of behavior

More info: my application is having different tabs, showing number of bar,line,area,combo charts on it. getSelection() works well with line chart but not able to get the consistent output with bars.

Any help is appreciable.

Please do not mark it as duplicate, as I have gone through other similar questions but they does not answer my issue, I do not have that privilege so I could not comment in replies asking for more clarification. Similar question here : google visualization-Click event on barchart isStacked: true

Please help!

Thank you in advance!

Updates : I could not get any answer or any response from here. This is really very disappointing.

Solution: This is how i worked out the solution for this problem : The getSelection could not work for me so i tried click event on bar text. Through the click event i could get the text on bar and i linked it to opn new tab.

If anyone need solution in code, please let me know.

Thank you.

回答1:

Please go through below code snippet, I corrected or you can say organised the code in different way. If you need further explanation please let me know.

google.visualization.events.addListener(googleChartObj, 'select', function () {
                var selectedBar = googleChartObj.getSelection();
                ////console.log(selectedBar);
                data.getRowLabel(selectedBar[0].row);
               /// for Bar charts, normally row-parameters are used
               /// manipulate on 'data' which refers to data-table to get desired results

            });

来源：https://stackoverflow.com/questions/35360597/chart-getselection-does-not-work-properly-with-google-bar-charts

标签

javascript

charts