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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
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>
<div id="visualization"></div>
</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";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
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>
<div id="visualization"></div>
</body>
</html>
--
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 [email protected].
To post to this group, send email to [email protected].
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.
