Do Material Bar Charts support events.addListener?

Frederico Varela

unread,

Aug 29, 2015, 8:44:56 AM8/29/15

to Google Visualization API

Hi all,

I have this below piece of code working properly with corechart. This have also listeners associated to that labels and also could add pictures beside them.

<head>

<title>Untitled Document</title>

google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

// Create and populate the data table.

var data = google.visualization.arrayToDataTable([

['Year', 'Austria'],

['2003', 1336060],

['2004', 1538156],

['2005', 1576579],

['2006', 1600652],

['2007', 1968113],

['2008', 1901067]

]);

var chart = new google.visualization.BarChart(document.getElementById('visualization'));

var options= {title:"Yearly Coffee Consumption by Country",

width:600, height:400,

vAxis: {title: "Year"},

hAxis: {title: "Cups"},

};

chart.draw(data, options);

configureChart();

google.visualization.events.addListener(chart, 'click', function (e) {

// match the id of the axis label

var match = e.targetID.match(/vAxis#0#label#(\d+)/);

if (match && match.length) {

var row = parseInt(match[1]);

// use row to fetch any data you need from the DataTable to construct your hyperlink, eg:

var label = data.getValue(row, 0);

// then construct your URL and use it however you want, eg:

var url = 'http://www.google.com/search?q=' + label;

window.location = url;

}

});

}

function configureChart() {

var chartContainer = document.getElementById('visualization');

var svg = chartContainer.getElementsByTagName('svg')[0];

var barLabels = svg.querySelectorAll("text[text-anchor='end']");

for (var i = 0; i < barLabels.length; i++) {

var barArea = barLabels[i];

var x = barArea.getAttribute('x');

var y = barArea.getAttribute('y');

var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Lawrence_Washington.jpg', x: x-50, y: y-15, width: 20, height: 20 });

barArea.parentElement.appendChild(presidentIcon);

}

function createImage(options) {

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');

image.setAttributeNS(null, 'height', options.height);

image.setAttributeNS(null, 'width', options.width);

image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);

image.setAttributeNS(null, 'x', options.x);

image.setAttributeNS(null, 'y', options.y);

image.setAttributeNS(null, 'visibility', 'visible');

return image;

}

</script>

</head>

<body>

</body>

</html>

But when I migrate it to Material Charts, as the code below, I cannot even do an event listener associated to the labels.

Is the line "google.visualization.events.addListener(chart, 'click', function (e) {" ? Do Material Bar Charts support events.addListener? I've already tried "google.charts.events.addListener(chart, 'click', function (e) {" but nothing happens.. Could you help me?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

google.load('visualization', '1.1', {'packages':['bar']});

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {

// Create and populate the data table.

var data = google.visualization.arrayToDataTable([

['Year', 'Austria'],

['2003', 1336060],

['2004', 1538156],

['2005', 1576579],

['2006', 1600652],

['2007', 1968113],

['2008', 1901067]

]);

var chart = new google.charts.Bar(document.getElementById('visualization'));

var options= {title:"Yearly Coffee Consumption by Country",

width:600, height:400,

vAxis: {title: "Year"},

hAxis: {title: "Cups"},

//

bars: 'horizontal'

//

};

chart.draw(data, google.charts.Bar.convertOptions(options));

configureChart();

google.visualization.events.addListener(chart, 'click', function (e) {

// match the id of the axis label

var match = e.targetID.match(/vAxis#0#label#(\d+)/);

if (match && match.length) {

var row = parseInt(match[1]);

// use row to fetch any data you need from the DataTable to construct your hyperlink, eg:

var label = data.getValue(row, 0);

// then construct your URL and use it however you want, eg:

var url = 'http://www.google.com/search?q=' + label;

window.location = url;

}

});

}

function configureChart() {

var chartContainer = document.getElementById('visualization');

var svg = chartContainer.getElementsByTagName('svg')[0];

var barLabels = svg.querySelectorAll("text[text-anchor='end']");

for (var i = 0; i < barLabels.length; i++) {

var barArea = barLabels[i];

var x = barArea.getAttribute('x');

var y = barArea.getAttribute('y');

var presidentIcon = createImage({ href: 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Lawrence_Washington.jpg', x: x-50, y: y-15, width: 20, height: 20 });

barArea.parentElement.appendChild(presidentIcon);

}

function createImage(options) {

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');

image.setAttributeNS(null, 'height', options.height);

image.setAttributeNS(null, 'width', options.width);

image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', options.href);

image.setAttributeNS(null, 'x', options.x);

image.setAttributeNS(null, 'y', options.y);

image.setAttributeNS(null, 'visibility', 'visible');

return image;

}

</script>

</head>

<body>

</body>

</html>

Sergey Grabkovsky

unread,

Aug 31, 2015, 10:12:26 AM8/31/15

to Google Visualization API

Hi Frederico,

The 'click' event is not yet supported in the new Material Charts. However, even when we do add support for it, the interface to it will probably look different. Primarily, the way that the 'targetID' is represented is going to change drastically. We try to be as backwards compatible as possible, but at some point we have to break backwards compatibility.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/84ad4986-c2f6-4e63-b3c0-06efc112432a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Frederico Varela

unread,

Aug 31, 2015, 5:33:05 PM8/31/15

to google-visua...@googlegroups.com

Hi Sergey,

thank you very much for your explanation.

Ok, I'll wait for new developments about these material charts.

Best regards.

Frederico Varela

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/DPOS8by54Co/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAEwwup7kc74nyfZOno8sFRFjmdLNF_V6TvK7aA83r85waL96nA%40mail.gmail.com.

sujay...@mediatech.co.in

unread,

Apr 26, 2016, 3:25:48 AM4/26/16

to Google Visualization API

Hi,

Is there an update on this front? The click event is important from a chart element deselection standpoint among other things.

Thanks
Sujay

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/84ad4986-c2f6-4e63-b3c0-06efc112432a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/DPOS8by54Co/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.

Reply all

Reply to author

Forward