Hi guys, Is there a workaround to add a new event - for instance, onclick or onmouseup - to a visualization, like BarChart?
I understand that i can implement my own custom visualization with new events, but i would like to use all the features of BarChart and just extend it by adding support to some events, like onclick or onmouseup. So, I tried to create a new visualization, MyTable, that wraps BarChart. When I draw the table myself, the onclick event that I trigger as 'customevent' works. But when I use BarChart to draw my visualization it doesn't work. I am trying the following code at the visualization playground ( http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart): You can switch the bolded lines to run each draw implementation. Anybody has a suggestion on how can I make this work? Thank you very much. Code sample: // Declare a unique namespace. var example = {}; // Class constructor. Parameter container is a DOM element on the client that // that will contain the chart. example.MyTable = function (container) { this.containerElement = container; var foo = this; this.onclick = function(e) { google.visualization.events.trigger(foo, 'customevent', null); }; this.containerElement.addEventListener('click', this.onclick, true); } //Use BarChart to draw the visualization example.barchartdraw = function(data, options) { var x = new google.visualization.BarChart(this.containerElement); x.draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, vAxis: {title: "Year"}, hAxis: {title: "Cups"}} ); this.containerElement.addEventListener('click', this.onclick, true); } //Simple custom visualization provided in a example page example.simpledraw = function(data, options) { // Create an HTML table var showLineNumber = options.showLineNumber; // Boolean configuration option. var html = []; html.push('<table border="1">'); // Header row html.push('<tr>'); if (showLineNumber) { html.push('<th>Seq</th>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>'); } html.push('</tr>'); for (var row = 0; row < data.getNumberOfRows(); row++) { html.push('<tr>'); if (showLineNumber) { html.push('<td align="right">', (row + 1), '</td>'); } for (var col = 0; col < data.getNumberOfColumns(); col++) { html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>'); html.push(this.escapeHtml(data.getFormattedValue(row, col))); html.push('</td>'); } html.push('</tr>'); } html.push('</table>'); this.containerElement.innerHTML = html.join(''); } *//example.MyTable.prototype.draw = example.barchartdraw; example.MyTable.prototype.draw = example.simpledraw;* // Utility function to escape HTML special characters example.MyTable.prototype.escapeHtml = function(text) { if (text == null) return ''; return text.replace(/&/g, '&').replace(/</g, '<') .replace(/>/g, '>').replace(/"/g, '"'); } function drawVisualization() { // Create and populate a data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Daily Hours'); data.addRows(5); data.setCell(0, 0, 'Work'); data.setCell(0, 1, 11); // Add more data rows and cells here // Instantiate our table object. var vis = new example.MyTable(document.getElementById( 'visualization')); google.visualization.events.addListener(vis, 'customevent', visSelectHandler); // Draw our table with the data we created locally. vis.draw(data, {showLineNumber: true}); function visSelectHandler(details) { //this handler doesn't get anything useful done, alert('caught an event'); //but it's helpful in being able to tell when an event got triggered } } -- Renato Beserra Sousa -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
