We all know how important charting is now days. We all store lots of data but the end users generally are the people who do not have much time to use it after putting in hours in correlating and analyzing it. They generally ask for reports charts etc. Traditionally either we had to use GDI+ or buy a third party tool to provide these facilities. MS has started providing this facility free of cost since 2008 (though it was not part of 3.5 framework but one can download the exe and can install it). Starting from framework 4.0 charting controls are also shipping with .NET.
It is quite easy to use chart controls, let us see how.
Create a web application project and from the toolbox (in design mode) drag chart control. It will be present under the data section.
Configure the datasource and set the chart type and X and Y column for the chart.
I am using a SQLDataSource and AdventureWorks as my DB.
Now we are good to go. Press F5 and you can see the chart.
Let us extend the functionality a bit
Drop three drop downs and a button on you page. First drop down is for selecting the chart type and other two are for selecting the X and Y columns.
This will provide the end user with flexibility to select different X and Y parameters and different chart types.
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
namespace Charting
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
populateXandY();
Array obj = Enum.GetValues(typeof(System.Web.UI.DataVisualization.Charting.SeriesChartType));
foreach (System.Web.UI.DataVisualization.Charting.SeriesChartType types in obj)
{
ddChartType.Items.Add(new ListItem(types.ToString()));
}
}
}
protected void btnChart_Click(object sender, EventArgs e)
{
MyChart.Series[0].XValueMember = X.SelectedValue;
MyChart.Series[0].XValueMember = Y.SelectedValue;
MyChart.Series[0].ChartType = (System.Web.UI.DataVisualization.Charting.SeriesChartType)Enum.Parse(typeof(System.Web.UI.DataVisualization.Charting.SeriesChartType), ddChartType.SelectedValue, true);
}
private void populateXandY()
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["AdventureWorksLT2008ConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("SELECT column_name FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = 'SalesOrderDetail'", con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
X.Items.Add(new ListItem(dr[0].ToString(),dr[0].ToString()));
Y.Items.Add(new ListItem(dr[0].ToString(), dr[0].ToString()));
}
con.Close();
}
}
}
Explanation
I have just queried the concerned table using information schema to find out the columns and listed the columns in the dropdowns X and Y. You can be smarter and can list only the needed columns .
Then I have listed all the available chart types (from System.Web.UI.DataVisualization.Charting.SeriesChartType enum) in ddChartType dropdown.
Button is used to postback and set the chart type and X and Y column value for the chart control.
Check out this book for advanced topics.
Comments
Post a Comment