[visualization-api] Create a custom event to a visualization

[Renato Beserra]

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

[asgallant]

Skimming over your code, it looks like you are registering a click event handler on the div containing the chart - correct?  This works fine for the Table charts (and maybe org charts?), but for the charts that are drawn in an iframe inside the container div (Area, Line, Bar, Column, Pie, Scatter, etc), you have to register the event handler on the body of the iframe's contents instead of the container div.

[Renato Beserra]

Thanks for the quick answer!

Yes, I am registering the click event handler on the container div. 

I will try to do what you said, but do you know if it is possible to get the iframe body whitout navigating the DOM?

2011/12/27 asgallant <drew_g...@abtassoc.com>

Skimming over your code, it looks like you are registering a click event handler on the div containing the chart - correct?  This works fine for the Table charts (and maybe org charts?), but for the charts that are drawn in an iframe inside the container div (Area, Line, Bar, Column, Pie, Scatter, etc), you have to register the event handler on the body of the iframe's contents instead of the container div.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/z0VCROMFAbEJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Renato Beserra Sousa

[asgallant]

I use jQuery to help with that:

$('#chart_div').find('iframe').contents().find('body').click(function () {

    alert('Click event fired');

});

[Renato Beserra]

Thanks, you solved my problem!

If someone else is interested:

I added this function:

google.visualization.events.addListener(chart, 'ready', onReady);

 function onReady() {
    body = document.getElementById('visualization').getElementsByTagName('iframe')[0].contentDocument.getElementsByTagName('body')[0];
    body.addEventListener('contextmenu', function (){alert('click')}, true); 
  } 

I had some trouble to make this work with GWT, but the principle is the same.

2011/12/27 asgallant <drew_g...@abtassoc.com>

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Bm1wf0L2nEEJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Renato Beserra Sousa