2
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.

Community
  • 1
  • 1
Priya Deshmukh
  • 187
  • 1
  • 1
  • 13
  • google.visualization.events.addListener(gChart, 'click', function (e) { // match the targetID of the clicked element to an hAxis label // and capture the index of the label if matched var match = e.targetID.match(/vAxis#\d+#label#(\d+)/); if (match && match.length) { var rowIndex = parseInt(match[1]); var axisLabel = data.getValue(rowIndex, 0); console.log(axisLabel); } }); – Priya Deshmukh Feb 19 '16 at 12:24
  • This is the solution for the click on bar and get the name of the bar which is being cliked. – Priya Deshmukh Feb 19 '16 at 12:26

1 Answers1

3

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

            });
goneToHappyLand
  • 166
  • 9
  • I tried this changing a little bit, but getRowLable not working in my case. I want access few parameters associated with bar. – Priya Deshmukh May 05 '16 at 04:42
  • Add those parameters to bar while preparing data for chart and access those wherever you want. setRowProperties and getRowProperties should work. Please go though this link to know more properties: https://developers.google.com/chart/interactive/docs/reference#methods – goneToHappyLand May 05 '16 at 04:44