This is the fourth part in the series of tutorials showing how to add dynamic, interactive, data-driven charts to your ASP.NET web applications. These tutorials use amCharts Flash charting components and "ASP.NET Controls for amCharts" for ASP.NET integration.
This part is long overdue. Sorry for that. A tutorial on adding amCharts to ASP.NET page from code-behind was the most requested on amCharts ASP.NET controls forum. So, here we go.
Make sure you have your environment setup, ASP.NET controls for amCharts DLL added and amCharts Column chart added to your project. Details on doing that were provided in Part 1 of the series so I wont repeat it here.
Now let's add a new ASP.NET web form to our project and let's call it CodeBehindBar.aspx. We will only add a single PlaceHolder object to the markup side of our script so it looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CodeBehindBar.aspx.cs" Inherits="CodeBehindBar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="ChartPlaceHolder" runat="server" />
</div>
</form>
</body>
</html>
Now let's switch to the code-behind file.
We will be creating a column chart with two graphs and we'll use Northwind database as data source. The first graph will represent sales totals for 1997 grouped by category and divided by 1000 (just for the sake of being in the same range as our second graph). The second graph will show quantities of products in each group we have in stock.
Make sure that you have access to some SQL Server instance with Northwind database installed, connection string setup, and let's start by pulling our data from SQL Server and placing it into DataSet:
// Get data from Northwind
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);
SqlCommand myCommand = new SqlCommand("select CategoryName, CategorySales/1000 as CategorySales from [Category Sales for 1997]", conn);
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
da.Fill(ds, "Category Sales for 1997");
myCommand.CommandText = "select CategoryName, sum(UnitsInStock) as UnitsInStock from [Products by Category] group by CategoryName";
da.Fill(ds, "Products by Category");
conn.Close();
Now it's time to create our chart. We create a ColumnChart object and setup it's DataSource. This is what will be used for the chart series (X axis).
// create column chart
ColumnChart chart = new ColumnChart();
chart.DataSource = ds.Tables["Category Sales for 1997"].DefaultView;
chart.DataSeriesIDField = "CategoryName";
chart.DataSeriesValueField = "CategoryName"; // here it's the same as ID and could've been ommited
Notice that we've specified "CategoryName" as both SeriesIDField and SeriesValueField. This isn't necessary in case like this were we have the same field for both ID and Value. It would suffice to just specify the ID, but I've added Value line so you know you can use different data fields for that.
What we've done so far is created a grid where to add actual data graphs. Now let's create 2 graphs:
// crete sales graph
ColumnChartGraph graph1 = new ColumnChartGraph();
graph1.DataSource = ds.Tables["Category Sales for 1997"].DefaultView;
graph1.DataSeriesItemIDField = "CategoryName";
graph1.DataValueField = "CategorySales";
graph1.Title = "Sales (in thousands)";
// crete stock graph
ColumnChartGraph graph2 = new ColumnChartGraph();
graph2.DataSource = ds.Tables["Products by Category"].DefaultView;
graph2.DataSeriesItemIDField = "CategoryName";
graph2.DataValueField = "UnitsInStock";
graph2.Title = "Units in stock";
and add these graphs to our chart:
chart.Graphs.Add(graph1);
chart.Graphs.Add(graph2);
What's left is just data-binding the chart and adding it to our place holder control on the page
chart.DataBind();
ChartPlaceHolder.Controls.Add(chart);
And that' basically it. This is what you should see if you run this:
You can customize the look and feel by changing various properties according to your taste.
Download the source code here: CodeBehindBar.zip (1kb)
