You are on page 1of 8

How to make stacked column chart

By Mihir Soni in the ASP.NET forum. 13-Feb-11 11:49 PM


Hello . Here i have taken small example which is used to draw stack chart.
DataTable dtTest; private void Form1_Load(System.Object sender, System.EventArgs e) { //Me.WindowState = FormWindowState.Maximized dtTest = new DataTable(); dtTest.Columns.Add("_Year", typeof(int)); dtTest.Columns.Add("_Month", typeof(int)); dtTest.Columns.Add("ManualInvoices", typeof(int)); dtTest.Columns.Add("AutoInvoices", typeof(int)); Random rndm = new Random(); for (int y = 2009; y <= 2010; y++) { for (int i = 1; i <= 12; i++) { dtTest.Rows.Add(y, i, rndm.Next(20000, 30001), rndm.Next(20000, 30001)); } } Chart1.Series.RemoveAt(0); Chart1.DataBindCrossTable(dtTest.AsEnumerable, "_Year", "_Month", "ManualInvoices,AutoInvoices", null); foreach (Series s in Chart1.Series) { s.ChartType = SeriesChartType.StackedColumn; s.IsValueShownAsLabel = true; s.IsXValueIndexed = true; } Chart1.ChartAreas(0).AxisX.Title = "Month"; Chart1.ChartAreas(0).AxisX.Interval = 1; Chart1.ChartAreas(0).AxisY.Title = "Invoices"; }

private void CreateChart() //Create some dummy Data Random random = new Random(); for (int pointIndex = 0; pointIndex < 10; pointIndex++) "Series1"].Points.AddY(random.Next(20, 100)); //Set the chart type Chart1.Series["Series1"].ChartType = SeriesChartType.Pie;// Set the bar width Chart1.Series["Series1"]["PointWidth"] = "0.5";// Show data points labels Chart1.Series["Series1"].IsValueShownAsLabel = true;// Set data points label style Chart1.Series["Series1"]["BarLabelStyle"] = "Center";// Show chart as 3D Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;// Draw chart as 3D Cylinder Chart1.Series["Series1"]["DrawingStyle"] = "Cylinder";

Random random = new Random(); for (int pointIndex = 0; pointIndex < 10; pointIndex++) { Chart1.Series["Quality"].Points.AddY(random.Next(20, 100)); Chart1.Series["Delivery"].Points.AddY(random.Next(20, 100)); Chart1.Series["Service"].Points.AddY(random.Next(20, 100)); } //Set the chart type Chart1.Series["Quality"].ChartType = SeriesChartType.Bar; Chart1.Series["Delivery"].ChartType = SeriesChartType.Bar; Chart1.Series["Service"].ChartType = SeriesChartType.Bar; // Set the bar width Chart1.Series["Quality"]["PointWidth"] = "1.5"; Chart1.Series["Delivery"]["PointWidth"] = "1.5"; Chart1.Series["Service"]["PointWidth"] = "1.5"; // Show data points labels Chart1.Series["Quality"].IsValueShownAsLabel = true; Chart1.Series["Delivery"].IsValueShownAsLabel = true; Chart1.Series["Service"].IsValueShownAsLabel = true; // Set data points label style Chart1.Series["Quality"]["BarLabelStyle"] = "Center"; Chart1.Series["Delivery"]["BarLabelStyle"] = "Center"; Chart1.Series["Service"]["BarLabelStyle"] = "Center"; // Show chart as 3D Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; // Draw chart as 3D Cylinder Chart1.Series["Quality"]["DrawingStyle"] = "Cylinder"; Chart1.Series["Delivery"]["DrawingStyle"] = "Cylinder"; Chart1.Series["Service"]["DrawingStyle"] = "Cylinder";

<%@ Page language="C#" CodeFile="ChartBuilder.cs" AutoEventWireup="false" Inherits="ComponentArt.Web.Visualization.Charting.Samples.ChartBuilder" %> <%@ Register TagPrefix="Demos" TagName="Css" Src="~/common/ascx/css.ascx"%> <%@ Register TagPrefix="Demos" TagName="Header" Src="~/common/ascx/hdr.ascx"%> <%@ Register TagPrefix="Demos" TagName="About" Src="~/common/ascx/txt.ascx"%> <%@ Register TagPrefix="Demos" TagName="Footer" Src="~/common/ascx/ftr.ascx"%> <%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %> <%@ Register TagPrefix="CArtChart" Namespace="ComponentArt.Web.Visualization.Charting" Assembly="ComponentArt.Web.Visualization.Charting" %> <!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" xml:lang="en" lang="en"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Chart Samples</title> <Demos:Css RunAt="server" Id="DemoCss" /> </head> <body> <form id="form1" runat="server"> <Demos:Header RunAt="server" Id="DemoHeader" DemoType="Chart" DemoTitle="" /> <%-- demo area --%> <div class="demo-area"> <div class="chart">

<div class="demo"><CArtChart:Chart id="Chart1" RenderingPrecision="0.1" width="515" height="328" runat="server" SaveImageOnDisk="False"> </CArtChart:Chart></div> </div> </div> <%-- /demo area --%> <Demos:About RunAt="server" Id="DemoAbout" /> <Demos:Footer RunAt="server" Id="DemoFooter" /> </form> </body> </html>

Line numbers default.aspx

ChartBuilder.cs

ChartBuilder.vb

using using using using using using

System; System.Web.UI; ComponentArt.Web.Visualization.Charting; System.Data; System.Collections; System.Data.OleDb;

namespace ComponentArt.Web.Visualization.Charting.Samples { public partial class ChartBuilder : System.Web.UI.Page { class ArraysForChart { ArrayList m_xs = new ArrayList(); ArrayList m_ys = new ArrayList(); internal ArrayList Xs { get { return m_xs; } } internal ArrayList Ys { get { return m_ys; } } } private void Page_Load(object sender, System.EventArgs e) { Chart targetChart = Chart1; String[] requestFolders = Request.FilePath.Split(new Char[] { '/' });

this.DemoHeader.DemoTitle = System.Text.RegularExpressions.Regex.Replace(requestFolders[requestFolders.Le ngth - 3], "([A-Z])", " $1") + " - " + System.Text.RegularExpressions.Regex.Replace(requestFolders[requestFolders.Le ngth - 2], "([A-Z])", " $1");

DataSet ds = new DataSet(); // Getting input data string dbFileName = ComponentArt.Web.Visualization.Charting.ChartSamples.CommonFunctions.GetPathT oFile( @"controlspecific\chart\Features\DataBinding\SeriesCreationBasedOnData\InputDataWithSe riesColumn.xls"); string selectCommand = "SELECT * FROM [InputData$]"; string connectionString = "provider=Microsoft.Jet.OLEDB.4.0; " + "data source="+dbFileName+"; " + "Extended Properties=Excel 8.0;"; OleDbDataAdapter oleDbDataAdapter = new OleDbDataAdapter(selectCommand, connectionString); oleDbDataAdapter.Fill(ds); DataTable table = ds.Tables[0]; Series s = new Series(); targetChart.Series.Add(s); targetChart.DefineValuePath("x", "Date"); targetChart.DefineValuePath("y", "NoOfSales"); targetChart.DefineValuePath("series", "TypeOfSales"); targetChart.DataSource = table; targetChart.View.Margins.Bottom = 20; targetChart.DataBind(); targetChart.CoordinateSystem.XAxis.AxisAnnotations.Clear(); AxisAnnotation xAnn = targetChart.CoordinateSystem.XAxis.CreateAnnotation ("xAnn",targetChart.CoordinateSystem.PlaneZX,AxisLinePositionKind.AtMaximumVa lue); xAnn.Coordinates = targetChart.CoordinateSystem.XAxis.CreateCoordinateSetByStep(1,DateTimeUnit.D ay); xAnn.FormatString = "MMM-dd"; xAnn.Rotate = true; } string m_errorMessage = ""; protected string GetErrorMessage()

{ return m_errorMessage; } #region Web Form Designer generated code override protected void OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /// <summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion } }

You might also like