how to make stacked column chart
TRANSCRIPT
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 DataRandom random = new Random();for (int pointIndex = 0; pointIndex < 10; pointIndex++)"Series1"].Points.AddY(random.Next(20, 100));//Set the chart typeChart1.Series["Series1"].ChartType = SeriesChartType.Pie;// Set the bar widthChart1.Series["Series1"]["PointWidth"] = "0.5";// Show data points labelsChart1.Series["Series1"].IsValueShownAsLabel = true;// Set data points label styleChart1.Series["Series1"]["BarLabelStyle"] = "Center";// Show chart as 3DChart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;// Draw chart as 3D CylinderChart1.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 System;using System.Web.UI;using ComponentArt.Web.Visualization.Charting;using System.Data;using System.Collections;using 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.Length - 3], "([A-Z])", " $1") + " - " + System.Text.RegularExpressions.Regex.Replace(requestFolders[requestFolders.Length - 2], "([A-Z])", " $1");
DataSet ds = new DataSet(); // Getting input data string dbFileName = ComponentArt.Web.Visualization.Charting.ChartSamples.CommonFunctions.GetPathToFile( @"control-specific\chart\Features\DataBinding\SeriesCreationBasedOnData\InputDataWithSeriesColumn.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.AtMaximumValue); xAnn.Coordinates = targetChart.CoordinateSystem.XAxis.CreateCoordinateSetByStep(1,DateTimeUnit.Day); 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 }}