11/19/12

Generating a fancybox iframe modal from a google visualization datatable

I've been trying for a little while to create an iFrame modal to deliver content and interactivity from within a google visualization data table. The solution was to use fancybox and then escape the characters.

The tools:

1. use Google data tables to add sort/etc. functionality to a table.
https://developers.google.com/chart/interactive/docs/examples#table_example

2. install and fancybox and jquery accessories
http://fancybox.net/

3. enable HTML for the column you wish to call the modal from and then escape the chars.

IMPORTANT: note the allow HTML and the \" (this is how you must escape the double quotes in order to not break the data structure).

<script type='text/javascript'>
      google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
 var options = {'showRowNumber': false, 'allowHtml': true, 'pageSize': 10, 'page': 'enable', 'sortColumn': 0, 'sortAscending':false}
        var data = new google.visualization.DataTable();

data.addColumn('date', 'Date Done');
data.addColumn('number', 'Pounds');
data.addColumn('number', 'Kilos');
data.addColumn('number', 'Reps');
data.addColumn('string', 'Lifts');
data.addColumn('string', 'Comments');
data.addColumn('string', 'ranked');
data.addColumn('string', 'edit');

data.addRows(1);
data.setCell(0,0,new Date(2008,5,2));
data.setCell(0,1,12);
data.setCell(0,5,'<a class=\"fancybox fancybox.iframe\" href=\"fancybox/demo/iframe.html\">testing</a>');


var table = new 
google.visualization.Table(document.getElementById('table_div_5'));
table.draw(data,options,null);
}
</script>

The result? Check out:
http://www.logsitall.com/google-table.asp


This means you can open an editor form or info window from an HTML link that is embedded within a google datatable. Thanks to fancybox you can even refresh the parent (google datatable) from the close link within the modal...

Happy coding
-bill


No comments:

Post a Comment