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).

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...