Implement MSChart in a Windows Form Application

In my previous post, I have demonstrated step by step installing MSChart controls, a fantastic tool to generate amazing Charts in both Winform and ASP applications, on Visual Studio 2008. Now it’s time to show some working examples. Using MSChart to display a graph from Database data is very straight forward, the key is the syntax of binding data to a chart control. My demo is tested under Oracle 10 R2 and Visual Studio 2008.

First of all we need create a demo table, let’s say we want to compare the Actual Sales vs Forecast.

create table demo
(
  sku number,
  wcdate date,
  actual number,
  forecast number,
  constraint pk01 primary key (sku, wcdate)
)
/
insert into demo values (24, to_date('08/03/2009', 'dd/mm/yyyy'), 3020, 3200);
insert into demo values (24, to_date('15/03/2009', 'dd/mm/yyyy'), 3131, 3200);
insert into demo values (24, to_date('22/03/2009', 'dd/mm/yyyy'), 2937, 2500);
insert into demo values (24, to_date('29/03/2009', 'dd/mm/yyyy'), 2842, 2500);
insert into demo values (24, to_date('05/04/2009', 'dd/mm/yyyy'), 2988, 2500);
/

Secondly we create a new WinForm application in VS 2008, drag a Char control from tool box and place it at the top section of the form.

Next drag another DataGridView control and place it at the bottom of the form. We will then have something like the screenshot below.

Press F7 to go to the code view, we can then write some code to pull the data from database and bind the data to the chart control:

using System;
using System.Data;
using System.Windows.Forms;
using System.Data.OracleClient;

namespace ChartDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        
        DataSet dsdata = new DataSet();
        
        // Populate public DataSet
        private DataSet PopulateDataTable()
        {            
            string connectionString = "Data Source=orcl;Persist Security Info=True; "
                + "User ID=scott;Password=xxxxx;Unicode=True";

            string queryString = "select * from demo";

            OracleConnection connection = new OracleConnection(connectionString);
            OracleCommand command = new OracleCommand(queryString, connection);            
            OracleDataAdapter da = new OracleDataAdapter(command);

            try
            {
                connection.Open();
                if (!dsdata.Tables.Contains("chart"))
                    dsdata.Tables.Add("chart");
                da.Fill(dsdata, "chart");
            }
            catch (OracleException oex)
            {
                throw new Exception(oex.Message);
            }
            finally
            {
                connection.Close();
            }
            return dsdata;
        }

        // Load the data to a DataGridView
        private void LoadDGV()
        {
            dataGridView1.DataSource = PopulateDataTable();
            dataGridView1.DataMember = "chart";
        }

        // Render the chart
        private void LoadFcstVsActualChart()
        {            
            DataView dv = new DataView(dsdata.Tables["chart"]);
            chart1.Series["Actual"].Points.DataBindXY(dv, "wcdate", dv, "actual");
            chart1.Series["Forecast"].Points.DataBindXY(dv, "wcdate", dv, "forecast");
        }

        //Form load event
        private void Form1_Load(object sender, EventArgs e)
        {
            LoadDGV();
            LoadFcstVsActualChart();
        }
    }
}

I believe above code is quite self-explanatory, firstly we created a DataSet and populate the data to the DataSet, then we binded the DataView to the Chart control, at the end we put all methods into Form load event to load data to DataDridView and generate the Chart afterwards. The import thing to remember is the syntax of binding data to a chart.

// Render the chart
private void LoadFcstVsActualChart()
{            
    DataView dv = new DataView(dsdata.Tables["chart"]);
    chart1.Series["Actual"].Points.DataBindXY(dv, "wcdate", dv, "actual");
    chart1.Series["Forecast"].Points.DataBindXY(dv, "wcdate", dv, "forecast");
}

There are loads of different ways we can make our chart prettier to attract more eyeballs. For example you can change the background color or border style in the properties of the chart.

Or you can change the Chart Display type in Series collection. To see the best practice, please refer to Samples Environment for Microsoft Chart Controls from Microsoft

Now you can see how simple is that to use MSChart controls. A few lines of code can do the trick, I have tried MSChart in my last 2 projects, our customers who are so used to traditional dull business applications just love it. I hope you find it useful as well. Let me know if there is any problem or questions.