locked
Create chart from datagridview RRS feed

  • Question

  • Hello,

    I am trying to achieve a chart which source is a datagridview, this datagridview updates every 10 seconds.

    Code for datagridview(works):

                //Datagrid
                data.Location = new Point(200, 75);
                data.Size = new Size(600, 400);
                data.BackgroundColor = Color.White;
                data.Font = new Font("Times New Roman", 14.0f);

                //Columns
                data.ColumnCount = 2;
                data.ColumnHeadersVisible = true;
                DataGridViewCellStyle columnHeaderStyle = new DataGridViewCellStyle();
                columnHeaderStyle.BackColor = Color.White;
                columnHeaderStyle.Font = new Font("Verdana", 10, FontStyle.Bold);
                data.ColumnHeadersDefaultCellStyle = columnHeaderStyle;

                // Set the column header names.
                data.Columns[0].Name = "ID";
                data.Columns[1].Name = "Value";

                //Width of  columns
                DataGridViewColumn column = data.Columns[0];
                column.Width = 279;
                DataGridViewColumn column1 = data.Columns[1];
                column1.Width = 278;

                //Add datagridview
                tabpage2.Controls.Add(data); 

    Code for creating the chart:

    chart.Size = new Size(600, 400);
                chart.Location = new Point(100, 100);
                chart.BackColor = Color.LightBlue;
                chart.BorderlineColor = Color.Black;
                chart.Series.Add("test");
                chart.Series["test"].ChartType = SeriesChartType.Bar;

                Button button = new Button();
                button.Size = new Size(50,50);
                button.Text = "moi";
                button.Location = new Point(0,0);
                button.Click += (sender, args) =>
                {
                    updateChart();
                };
                tabpage3.Controls.Add(button);
                tabpage3.Controls.Add(chart);

    Code for updating the chart(with button click)

                chart.Series[0] = new Series();
                chart.Series[0].XValueMember = data.Columns[0].DataPropertyName;
                chart.Series[0].YValueMembers = data.Columns[1].DataPropertyName;
                chart.DataSource = data.DataSource;

    • Moved by CoolDadTx Thursday, September 21, 2017 1:56 PM Winforms related
    Thursday, September 21, 2017 12:53 PM

Answers

  • Hi Niels,

    I make a simple demo to achieve the purpose that get data from datagridview to chart, and update chart when some of the records be changed within datagridview. Please refer it as below:

        public partial class Form7 : Form
        {
            public Form7()
            {
                InitializeComponent();
            }
    
            DataGridView data = new DataGridView();
            Chart chart = new Chart();
            Chart chart1 = new Chart();
            ChartArea chartArea1 = new ChartArea();
            Legend legend1 = new Legend();
            Series series1 = new Series();
    
            List<int> array1 = new List<int>();
            List<int> array2 = new List<int>();
    
            private void button1_Click(object sender, EventArgs e)
            {
                //Datagrid
                data.Location = new Point(0, 0);
                data.Size = new Size(600, 400);
                data.BackgroundColor = Color.White;
                data.Font = new Font("Times New Roman", 14.0f);
    
                //Columns
                data.ColumnCount = 2;
                data.ColumnHeadersVisible = true;
                DataGridViewCellStyle columnHeaderStyle = new DataGridViewCellStyle();
                columnHeaderStyle.BackColor = Color.White;
                columnHeaderStyle.Font = new Font("Verdana", 10, FontStyle.Bold);
                data.ColumnHeadersDefaultCellStyle = columnHeaderStyle;
    
                // Set the column header names.
                data.Columns[0].Name = "ID";
                data.Columns[1].Name = "Value";
    
                // Fill some data to simulate
                data.Rows.Add(7);
                data.Rows[0].Cells[0].Value = 1;
                data.Rows[0].Cells[1].Value = 10;
                data.Rows[1].Cells[0].Value = 2;
                data.Rows[1].Cells[1].Value = 20;
                data.Rows[2].Cells[0].Value = 3;
                data.Rows[2].Cells[1].Value = 30;
                data.Rows[3].Cells[0].Value = 4;
                data.Rows[3].Cells[1].Value = 40;
                data.Rows[4].Cells[0].Value = 5;
                data.Rows[4].Cells[1].Value = 30;
                data.Rows[5].Cells[0].Value = 6;
                data.Rows[5].Cells[1].Value = 20;
                data.Rows[6].Cells[0].Value = 7;
                data.Rows[6].Cells[1].Value = 10;
    
                data.CellEndEdit += (sender1, args) =>
                {
                    updateDatagridview();
                };
    
                //Width of  columns
                DataGridViewColumn column = data.Columns[0];
                column.Width = 279;
                DataGridViewColumn column1 = data.Columns[1];
                column1.Width = 278;
    
                //Add datagridview
                tabPage1.Controls.Add(data);
            }
    
            private void button2_Click(object sender, EventArgs e)
            {
                GetRegardsFromDgv();
    
                chart1.Size = new Size(700, 400);
                chart1.Location = new Point(50, 50);
                chart1.BackColor = Color.LightBlue;
                chart1.BorderlineColor = Color.Black;
                chart1.ChartAreas.Add(chartArea1);
                chart1.Legends.Add(legend1);
                series1.ChartType = SeriesChartType.Bar;
                series1.Name = "MySeries1";
                chart1.Series.Add(series1);
    
                for (int i = 0; i < data.Rows.Count - 1; i++)
                {
                    chart1.Series["MySeries1"].Points.AddXY(array1[i], array2[i]);
                }
    
                //chart.Size = new Size(600, 400);
                //chart.Location = new Point(50, 50);
                //chart.BackColor = Color.LightBlue;
                //chart.BorderlineColor = Color.Black;
                //chart.Series.Add("test");
                //chart.Series["test"].ChartType = SeriesChartType.Bar;
    
                Button button = new Button();
                button.Size = new Size(50, 50);
                button.Text = "moi";
                button.Location = new Point(0, 0);
                button.Click += (sender1, args) =>
                {
                    updateChart();
                };
                tabPage2.Controls.Add(button);
                tabPage2.Controls.Add(chart1);
            }
    
            public void GetRegardsFromDgv()
            {
                for (int i = 0; i < data.Rows.Count; i++)
                {
                    int va = Convert.ToInt32(data.Rows[i].Cells[0].Value);
                    int va2 = Convert.ToInt32(data.Rows[i].Cells[1].Value);
                    array1.Add(va);
                    array2.Add(va2);
                }
            }
    
            public void updateChart()
            {
                chart1.Series[0].Points.Clear();
                for (int i = 0; i < data.Rows.Count - 1; i++)
                {
                    chart1.Series["MySeries1"].Points.AddXY(array1[i], array2[i]);
                }
            }
    
            public void updateDatagridview()
            {
                array1.Clear();
                array2.Clear();
                GetRegardsFromDgv();
            }
        }

    Hope this helps!

    Best Regards,

    Stanly


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, September 22, 2017 4:19 AM
  • Many many thanks, all this effort! Thanks man keep up the good work!
    • Marked as answer by Niels Schutte Friday, September 22, 2017 9:32 AM
    Friday, September 22, 2017 9:23 AM

All replies

  • Hi Niels,

    I make a simple demo to achieve the purpose that get data from datagridview to chart, and update chart when some of the records be changed within datagridview. Please refer it as below:

        public partial class Form7 : Form
        {
            public Form7()
            {
                InitializeComponent();
            }
    
            DataGridView data = new DataGridView();
            Chart chart = new Chart();
            Chart chart1 = new Chart();
            ChartArea chartArea1 = new ChartArea();
            Legend legend1 = new Legend();
            Series series1 = new Series();
    
            List<int> array1 = new List<int>();
            List<int> array2 = new List<int>();
    
            private void button1_Click(object sender, EventArgs e)
            {
                //Datagrid
                data.Location = new Point(0, 0);
                data.Size = new Size(600, 400);
                data.BackgroundColor = Color.White;
                data.Font = new Font("Times New Roman", 14.0f);
    
                //Columns
                data.ColumnCount = 2;
                data.ColumnHeadersVisible = true;
                DataGridViewCellStyle columnHeaderStyle = new DataGridViewCellStyle();
                columnHeaderStyle.BackColor = Color.White;
                columnHeaderStyle.Font = new Font("Verdana", 10, FontStyle.Bold);
                data.ColumnHeadersDefaultCellStyle = columnHeaderStyle;
    
                // Set the column header names.
                data.Columns[0].Name = "ID";
                data.Columns[1].Name = "Value";
    
                // Fill some data to simulate
                data.Rows.Add(7);
                data.Rows[0].Cells[0].Value = 1;
                data.Rows[0].Cells[1].Value = 10;
                data.Rows[1].Cells[0].Value = 2;
                data.Rows[1].Cells[1].Value = 20;
                data.Rows[2].Cells[0].Value = 3;
                data.Rows[2].Cells[1].Value = 30;
                data.Rows[3].Cells[0].Value = 4;
                data.Rows[3].Cells[1].Value = 40;
                data.Rows[4].Cells[0].Value = 5;
                data.Rows[4].Cells[1].Value = 30;
                data.Rows[5].Cells[0].Value = 6;
                data.Rows[5].Cells[1].Value = 20;
                data.Rows[6].Cells[0].Value = 7;
                data.Rows[6].Cells[1].Value = 10;
    
                data.CellEndEdit += (sender1, args) =>
                {
                    updateDatagridview();
                };
    
                //Width of  columns
                DataGridViewColumn column = data.Columns[0];
                column.Width = 279;
                DataGridViewColumn column1 = data.Columns[1];
                column1.Width = 278;
    
                //Add datagridview
                tabPage1.Controls.Add(data);
            }
    
            private void button2_Click(object sender, EventArgs e)
            {
                GetRegardsFromDgv();
    
                chart1.Size = new Size(700, 400);
                chart1.Location = new Point(50, 50);
                chart1.BackColor = Color.LightBlue;
                chart1.BorderlineColor = Color.Black;
                chart1.ChartAreas.Add(chartArea1);
                chart1.Legends.Add(legend1);
                series1.ChartType = SeriesChartType.Bar;
                series1.Name = "MySeries1";
                chart1.Series.Add(series1);
    
                for (int i = 0; i < data.Rows.Count - 1; i++)
                {
                    chart1.Series["MySeries1"].Points.AddXY(array1[i], array2[i]);
                }
    
                //chart.Size = new Size(600, 400);
                //chart.Location = new Point(50, 50);
                //chart.BackColor = Color.LightBlue;
                //chart.BorderlineColor = Color.Black;
                //chart.Series.Add("test");
                //chart.Series["test"].ChartType = SeriesChartType.Bar;
    
                Button button = new Button();
                button.Size = new Size(50, 50);
                button.Text = "moi";
                button.Location = new Point(0, 0);
                button.Click += (sender1, args) =>
                {
                    updateChart();
                };
                tabPage2.Controls.Add(button);
                tabPage2.Controls.Add(chart1);
            }
    
            public void GetRegardsFromDgv()
            {
                for (int i = 0; i < data.Rows.Count; i++)
                {
                    int va = Convert.ToInt32(data.Rows[i].Cells[0].Value);
                    int va2 = Convert.ToInt32(data.Rows[i].Cells[1].Value);
                    array1.Add(va);
                    array2.Add(va2);
                }
            }
    
            public void updateChart()
            {
                chart1.Series[0].Points.Clear();
                for (int i = 0; i < data.Rows.Count - 1; i++)
                {
                    chart1.Series["MySeries1"].Points.AddXY(array1[i], array2[i]);
                }
            }
    
            public void updateDatagridview()
            {
                array1.Clear();
                array2.Clear();
                GetRegardsFromDgv();
            }
        }

    Hope this helps!

    Best Regards,

    Stanly


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, September 22, 2017 4:19 AM
  • Many many thanks, all this effort! Thanks man keep up the good work!
    • Marked as answer by Niels Schutte Friday, September 22, 2017 9:32 AM
    Friday, September 22, 2017 9:23 AM