How to do this (link to image) graph type in datagridview

Question

I want to add this type of graph to my datagridviewcontrol: -

Here the graph will be built within 12 months, and I can either enter percentage values ​​or comparative values ​​in pixels for 12 months .... Please also tell me how to color the graphs

Any ideas for this would be much appreciated

Edit ---- Thanks for all the answers I taught a lot, but still couldn't solve the problem ...

• I need to display a lot of rows in my datagridview with about 15 columns ... Therefore, it is very strange to add rows directly, but to add different columns for the graph every time I add a row ... could not come up with any other way to accomplish this .. .. Moreover, I do not want to save the images that I found when I add images directly to the grid ...

• Is there any third-party tool that can help me get a custom datagridview with charts

Thanks.

Answer 1

Here is a way to use panels (divs):

http://weblogs.asp.net/stevewellens/archive/2010/03/01/visual-data-binding-hot-dang.aspx

Answer 2

Simpler and simpler, use the Google Maps API .

In your DataGridView just write a template with an <img> with a specific src .

For example, this code (broken into 2 lines):

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

Would provide you with the following:

You just need to slightly modify the t:50,20,30,65,20 section t:50,20,30,65,20 depending on the data you are attached 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" /> 

Answer 3

Try using chart management: http://msdn.microsoft.com/en-us/library/dd456632.aspx

Answer 4

you can try using DataGridViewImageColumn () for this particular column.

Refer to http://msdn.microsoft.com/en-us/library/z1cc356h%28v=VS.90%29.aspx

For graphs, you first need to create bitmaps, and if you are looking for "Code: creating a bitmap at runtime (Visual C #)" on msdn, you will find a simple but effective example. (I still can not send two links)

Basically you need to add a column that is treated as an image, and then draw the image through the cellformatting event. You can create and cache your images in advance or create them on the fly (your preferences). The second article will help you build your little graphics.

To change the color, you need to change the 3rd argument of the setting method. Of course, this is not the fastest way to draw diagrams, but it's simple enough to start.

Answer 5

Here is a short code example, just so you can check the memory requirements and performance of your controls. I don’t see what you should do to avoid bitmaps; I think most third-party controls work in a similar way. I'm sure my code can be optimized in several ways, but you have a place to start. Not sure when it would be necessary to have 20,000 rows in a grid, not a single user can see all this. Perhaps you can figure out a way to display the subsets at the same time.?

The image creation probably should not be done in the test object (as in the data model), but in the presentation layer (I added the DataBindingComplete event, since it can be used for such things), I did it here because it was easier. Images are not saved in a file or something like that.

I created a form with a DataGridView called dataGridView1.

This is the form code:

 List<TestObject> _list = new List<TestObject>(); public Form1() { InitializeComponent(); dataGridView1.DataBindingComplete += new DataGridViewBindingCompleteEventHandler(dataGridView1_DataBindingComplete); } void dataGridView1_DataBindingComplete( object sender, DataGridViewBindingCompleteEventArgs e ) { } private void Form1_Load( object sender, EventArgs e ) { // Populate the grid, here you should add as many rows as you want to display _list.Add(new TestObject("Obj1", 20, Brushes.Red, new int[]{3,4,5,3,5,6})); _list.Add(new TestObject("Obj2", 10, Brushes.Green, new int[] { 1, 2, 3, 4, 5, 6 })); _list.Add(new TestObject("Obj3", 30, Brushes.Blue, new int[] { 3, 2, 1, 1, 2, 3 })); dataGridView1.DataSource = _list; } 

I also created a test object to fill the grid:

 public class TestObject { private const int BitmapWidth = 100; private const int BitmapHeight = 20; private System.Drawing.Brush _color; private string _name; private int[] _numbers; private int _value; public TestObject( string name, int value, System.Drawing.Brush color, int[] series ) { _name = name; _numbers = series; _color = color; _value = value; } public string Name { get { return _name; } } public string Value { get { return _value.ToString(); } } public Image Series { get { int width = BitmapWidth / _numbers.Length - _numbers.Length; System.Drawing.Bitmap b = new Bitmap(BitmapWidth, BitmapHeight); Graphics g = Graphics.FromImage(b); g.CompositingMode = System.Drawing.Drawing2D.CompositingMode.SourceCopy; int current = 0; for (int i = 0;i < _numbers.Length;i++) { g.FillRectangle(_color, current, BitmapHeight - (BitmapHeight / 10) * _numbers[i], width, (BitmapHeight / 10) * _numbers[i]); current+=width + 2; } return b; } } }