protovis compatibility in internet explorer

Google has an excellent product to help IE render Protovis. When an IE user arrives on a page with the appropriate code, a window opens and asks the user if they want to install ChromeFrame to view the content. If they choose yes, it will install the plugin and and refresh the page and renders the svg image. If the user chooses no, the window disappears and the content is not loaded.

This follows the same model that made Flash ubiquitous. It works fairly well but the IE warning message can be bit jarring.

The following meta tag must be added to the head area of your page. This will tell a browser that already has ChromeFrame installed to activate it when it views the page. It's best if you do this site wide if possible.

Next we have to include the code that does the browser detection. There are three blocks that we care about. It's best to include them in the head of your page because code included in the head area can be used by items anywhere on the page. But not everyone has that kind of access to their Content Management System (CMS). As an alternative, this will work if you include the code in the body just above your Protovis code.

This first block gives you access to the Google API:

See the code that says YOUR_KEY_HERE? Go get a Google API key for your site and copy and replace that text. It's free and takes less than a minute.

This second block loads a JavaScript library that can install Chrome Frame.

The third block does the actual browser detection. Notice the code destination: "". When there is nothing in the quotes, ChromeFrame will refresh the existing page once it's installed. You can also put a URL inside the quotes if you want to direct the user to another page.

Download the example files to see different ways to implement ChromeFrame.