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

Question

Hi experts,

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

Try to use chart control: http://msdn.microsoft.com/en-us/library/dd456632.aspx

Answer 2

Hi,

you can try using a DataGridViewImageColumn() for that particular column.

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

For the graphs, you need to create the Bitmaps first, and if you search for "Code: Creating a Bitmap at Run Time (Visual C#)" on msdn you'll find a simple but effective example. (I can't post two links yet)

Basically you have to add a column that is treated like an image and then paint the image through the cellformatting event. You can create and cache your images beforehand or create them on the fly (your preference). The second article should help you building your little graphs.

To change color, you need to change the 3rd argument of the setpoint method. For sure it is not the fastest method to draw charts, but it is simple enough to start with.

Answer 3

try using http://www.dotnetcharting.com/

Answer 4

Hi, my 2 cents..

Here is a short code example, just so that you can test the memory requirements and performance of your controls. I don’t see what you should do to avoid bitmaps, I think most 3rd party controls work in a similar way. I’m sure my code can be optimized in several ways but you have some to start with. Not sure when one would want to have 20000 rows in a grid, no user can see all that anyway. Perhaps one can figure out a way to show sub-sets at a time..?

The creation of the image should probably not be done in the test object (as it is the data model) but rather in the presentation layer (I added the DataBindingComplete event as this can be used for similar things), I did that here because it was easier. No images are saved to file or anything like that.

I created a form with a DataGridView called dataGridView1.

This is the code for the form:

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 populate 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;
            }
        }
    }

Answer 5

Here is a way using panels (divs):

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