Hi, Is there an update on this front? The click event is important from a chart element deselection standpoint among other things.
Thanks Sujay On Tuesday, September 1, 2015 at 3:03:05 AM UTC+5:30, Frederico Varela wrote: > > Hi Sergey, > > thank you very much for your explanation. > > Ok, I'll wait for new developments about these material charts. > > Best regards. > Frederico Varela > > On Mon, Aug 31, 2015 at 3:12 PM, 'Sergey Grabkovsky' via Google > Visualization API <[email protected] <javascript:>> wrote: > >> 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. >> >> On Sat, Aug 29, 2015 at 8:44 AM Frederico Varela <[email protected] >> <javascript:>> wrote: >> >>> 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] >>> <javascript:>. >>> To post to this group, send email to [email protected] >>> <javascript:>. >>> 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 >>> >>> <https://groups.google.com/d/msgid/google-visualization-api/84ad4986-c2f6-4e63-b3c0-06efc112432a%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> 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 >> [email protected] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> 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 >> >> <https://groups.google.com/d/msgid/google-visualization-api/CAEwwup7kc74nyfZOno8sFRFjmdLNF_V6TvK7aA83r85waL96nA%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > -- 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 https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f828db13-efff-418d-a94f-d3d87afa0a21%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
