How to make this(refer image) type of graph in datagridview

Question

I wish to add this type of graph in my datagridviewcontrol :-

Here the graph is to plotted for 12 months and I can either input percentages or comparative values in pixels for the 12 months....Please also tell how to color the graphs

Any ideas for doing this will be highly appreciated

Edit----Thanks for all the answers I learned a lot but still couldn't get around the problem...

1. I need to display a lot of rows in my datagridview with around 15 columns....So its very odd to directly add the rows but add a different columns for graph each time I add a row...couldn't think of any other way of accomplishing this....moreover I don't want to save the images which I found I have to if i add the images directly into the grid view.....

2. Is there any third party tool there which may help me to get custom datagridview with charts

Thank You .

Answer 1

Far easier and simpler, use google charts API.

Under your DataGridView just recurse a template with an <img> tag with a specific src.

For example this code (broken over 2 lines):

<img src="http://chart.apis.google.com/chart?
   cht=bvs&chd=t:50,20,30,65,20&chs=220x30" width="120" />

Would give you the following:

You just need to modify the t:50,20,30,65,20 section slightly depending on the data your are binding to.

Like this:

<img src="http://chart.apis.google.com/chart?
   cht=bvs&chd=t:<%# Eval("t1") %>,<%# Eval("t2") %>,<%# Eval("t3") %>,<%# Eval("t4") %>,<%# Eval("t5") %>&chs=220x30" width="120" />