Drawing Statistics Graph in A Datagridview using C#

Question

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.

Answer 1

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)
    {
        try 
        {
            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,
                            e.CellBounds.Bottom);

                        // 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)
        {
            MessageBox.Show(ex.Message);
        }
    }

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.Columns.Add("number");
        dt.Columns.Add("name");
        dt.Columns.Add("image");

        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

Here is the source code link: enter link description here

Answer 2

The only good option is to add a Image instead of drawing any graph, take the data convert into image and add that image into specified column.