Hi,

Here I will code you how to create the stacked bar chart using Asp charts. Previously I have explained how to createthe charts and how to slice the chart using asp charts. Here I have explained by comparing mobile sales by year to year of each brand noted.

Below I have shown my database structure which used in below code.

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MobileSales.aspx.cs" Inherits="ASPChartApp.MobileSales" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<html><body>
<form id="form1" runat="server">
<div>

<asp:Chart ID="MobileSalesChart" runat="server" Width="500px" Height="350px" ToolTip="Mobile Sales" BorderlineColor="Gray">

<Series>
<asp:Series Name="Apple" IsValueShownAsLabel="true" ChartType="StackedColumn" LegendText="Apple"></asp:Series>
<asp:Series Name="Nokia" IsValueShownAsLabel="true" ChartType="StackedColumn"></asp:Series>
<asp:Series Name="Samsung" IsValueShownAsLabel="true" ChartType="StackedColumn"></asp:Series>
<asp:Series Name="Sony" IsValueShownAsLabel="true" ChartType="StackedColumn"></asp:Series>
<asp:Series Name="Motorola" IsValueShownAsLabel="true" ChartType="StackedColumn"></asp:Series>
<%--Name- you can change the product name here such as type, type2--%>
<%--IsValueShownAsLabel- you can enable the count to show on each columns and each series--%>
<%--Each series represents each colour in a column--%>
</Series>
<Legends>
<asp:Legend Name="MobileBrands" Docking="Bottom" Title="Mobile Sales (in 1000's)" TableStyle="Wide" BorderDashStyle="Solid" BorderColor="#e8eaf1" TitleSeparator="Line" TitleFont="TimesNewRoman" TitleSeparatorColor="#e8eaf1">
</asp:Legend>
<%--Legends denotes the representing color for each brands--%>
<%--It will automatically takes the names from the series names and it's associated colors or you can give legend text in series--%>
</Legends>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisX>
<MajorGrid Enabled="false" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>

C# 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;
using System.Data.SqlClient;
using System.Web.UI.DataVisualization.Charting;

namespace ASPChartApp
{
    public partial class MobileSales : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
          DataSet ds = new DataSet("MobileSales");
          SqlConnection con = new SqlConnection(@"connection String");
          SqlDataAdapter dataAdapter = new SqlDataAdapter("Select * from MobileSales", con);
          con.Open();
          dataAdapter.Fill(ds);
          con.Close();
          if (ds.Tables[0].Rows.Count > 0)
          {
             for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
             {
                    MobileSalesChart.Series["Apple"].Points.Add(new DataPoint(i, ds.Tables[0].Rows[i]["Apple"].ToString().Trim()));
                    MobileSalesChart.Series["Nokia"].Points.Add(new DataPoint(i, ds.Tables[0].Rows[i]["Nokia"].ToString().Trim()));
                    MobileSalesChart.Series["Samsung"].Points.Add(new DataPoint(i, ds.Tables[0].Rows[i]["Samsung"].ToString().Trim()));
                    MobileSalesChart.Series["Sony"].Points.Add(new DataPoint(i, ds.Tables[0].Rows[i]["Sony"].ToString().Trim()));
                    MobileSalesChart.Series["Motorola"].Points.Add(new DataPoint(i, ds.Tables[0].Rows[i]["Motorola"].ToString().Trim()));
                    MobileSalesChart.Series[0].Points[i].AxisLabel = ds.Tables[0].Rows[i]["Year"].ToString().Trim();
              }
           }
       }
   }

}

Web config :

<?xml version="1.0"?>
<configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
  </appSettings>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ChartImageHandler" />
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
        path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>
  <system.web>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
    </pages>
    <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
  </system.web>
</configuration>
  
 
  By             
Raja.D