ozz ozz - 2 months ago 55
C# Question

Drawing Statistics Graph in A Datagridview using C#

I'm trying to draw a heart rate like graphic in a datagridview using c#.

I have a datagridview with 10 columns. the first and the last 2 columns are using for data. I need to draw the graph into the cells of 6 middle colmuns between second and eighth columns.

I've managed to draw the graph into a single cell using celldisplayrectangle by using the right, left, top and bottom values of a cell. Drawcurve method and using Points inside the cell worked. But now I have no idea how to do this by using multiple cells.


So @ozz. I have put a little effort, I created a Sample WindowsForms application and then manually i have added three rows.

You have to override the DataGridView function

private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
   // Your custom graphics goes here

I added a little custom painting in it, when ever you populate the DataGridView it will call this _CellPainting method and all drawing started till end of the Row. You can specify which row can be painted or which cell .

below is the complete function for custom painting.

private void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
            if (this.dataGridView1.Columns["image"].Index == e.ColumnIndex && e.RowIndex >= 0)
                Rectangle newRect = new Rectangle(e.CellBounds.X + 1,
                    e.CellBounds.Y + 1, e.CellBounds.Width - 4,
                    e.CellBounds.Height - 4);

                using (
                    Brush gridBrush = new SolidBrush(this.dataGridView1.GridColor),
                    backColorBrush = new SolidBrush(e.CellStyle.BackColor))
                    using (Pen gridLinePen = new Pen(gridBrush))
                        // Erase the cell.
                        e.Graphics.FillRectangle(backColorBrush, e.CellBounds);

                        // Draw the grid lines (only the right and bottom lines; 
                        // DataGridView takes care of the others).
                        e.Graphics.DrawLine(gridLinePen, e.CellBounds.Left,
                            e.CellBounds.Bottom - 1, e.CellBounds.Right - 1,
                            e.CellBounds.Bottom - 1);
                        e.Graphics.DrawLine(gridLinePen, e.CellBounds.Right - 1,
                            e.CellBounds.Top, e.CellBounds.Right - 1,

                        // Draw the inset highlight box.
                        e.Graphics.DrawRectangle(Pens.Blue, newRect);
                        e.Graphics.DrawEllipse(new Pen(Color.Red), newRect);

                        // Draw the text content of the cell, ignoring alignment. 
                        if (e.Value != null)
                            e.Graphics.DrawString((String)e.Value, e.CellStyle.Font,
                                Brushes.Crimson, e.CellBounds.X + 2,
                                e.CellBounds.Y + 2, StringFormat.GenericDefault);
                        e.Handled = true;
        catch (Exception ex)

And here is the function behind a button to populate the DatGridView

private void cmdPopulate_Click(object sender, EventArgs e)
        if (dataGridView1.ColumnCount > 0)
            dataGridView1 = new DataGridView();
        DataTable dt = new DataTable();

        dt.Rows.Add(new object[] { "Item 1","Apple","" });
        dt.Rows.Add(new object[] { "Item 2", "Orange", "" });
        dt.Rows.Add(new object[] { "Item 3", "Banana", "" });
        dataGridView1.DataSource = dt.DefaultView;

//And here is the put in screen shot form enter image description here

Here is the source code link: enter link description here