Bar Graph in email body - css

Question

Is it possible to draw a dynamic bar graph in email body. (need to be compatible with Outlook)
I need to draw a graph in email sent through oracle database and dynamic value will be passed through a procedure.

Answer 1

The best solution is to create your bar chart dynamically then transform it into an image. You could simply use print screen for this and import it into Photoshop or whatever and edit the image there.
HTML emails are notoriously bad things in that they respond best to html code from 10+ years ago.
Some basic guidelines:
Don't try to use HTML5 in an email.
Don't try to use fancy CSS or link to an external stylesheet or even use css styles in the HEAD.
Don't try and use javascript as it won;t work
Don't try and use Flash as it won't work.
DO use inline CSS
DO use HTML TABLES for layout
DO use images but try and keep the filesize as small as possible.

Answer 2

You could use something like google charts to create a dynamic image (passing through the correct data sets) that you embed into your html email.
http://imagecharteditor.appspot.com/
http://www.jonwinstanley.com/charts/

Answer 3

You can't do anything with JavaScript, because email clients don't parse it.
But you can tell your server to set a header on the file to make it a JPEG or GIF. The file extension should also be jpg or gif, because some email clients freak out at rendering an image that doesn't have an extension, or has a non-image extension. Not sure what you're using server-side but most have some kind of dynamic image producing library.
Alternatively, render the graph using tables.
<table>
<tr>
<td colspan="10" bgcolor="pink"></td>
</tr>
<tr>
<td colspan="5" bgcolor="pink"></td>
<td colspan="5" bgcolor="white"></td>
</tr>
</table>
You get the idea. Unfortunately, you'd have to write something to generate the relevant HTML.

Answer 4

This has to be done the "old" html way. Meaning with tables and plain images.
Let's say you want to create a bar graph with 5 items. You create a table with all the cells you need, and then you would have, let's say 5 different images you would scale dynamically vertically when sending the personalized email. Every image is just a solid block of, let's say 10x10px in 5 different colors. You would override the size of the image to the size of the block for every email sent. Then you would place the substitute pattern of your emailer application (i.e. %%variable%%) and use the right values for every single email sent.
for example:
<table border=0>
<tr>
<td align=bottom><img src=redblock.gif width=20 height=%%height1%%></td>
<td align=bottom><img src=greenblock.gif width=20 height=%%height2%%></td>
<td align=bottom><img src=yellowblock.gif width=20 height=%%height3%%></td>
<td align=bottom><img src=blueblock.gif width=20 height=%%height4%%></td>
<td align=bottom><img src=greyblock.gif width=20 height=%%height5%%></td>
</tr>
<tr>
<td colspan=5 bgcolor=#000000 height=1><img src=singlepixel.gif width=1 height=1></td>
</tr>
<tr>
<td>Spain</td>
<td>France</td>
<td>US</td>
<td>UK</td>
<td>Italy</td>
</tr>
</table>