How To: Create a Dynamic Stacked Bar Chart

December 02 2012

Any reporting tool cannot be called complete without a charting feature. ActiveReports 7 being a very robust reporting tool provides a nice support for different types of charts. In one of the blog posts, I discussed about creating a dynamic Pie Chart and in this blog post I would be discussing about creating a Stacked Bar chart at run time. A Stacked bar chart is a graph that is used to compare the parts to the whole. The bars in a stacked bar graph are divided into categories. Each bar represents a total. Before we start with the implementation, let us see how our final chart will look like:In this chart each series represent a bar plotted onto the chart and the series type has been set to StackedBar. The first thing which is required to plot the chart is a datasource which will provide data to the chart. Since we are creating the chart at runtime, we will use the ReportStart event to assign the datasource.

private void NewActiveReport1_ReportStart(object sender, EventArgs e)  
 {  
   string str = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\Data\\NWIND.MDB;Persist Security Info=False";  
   OleDbConnection con = new OleDbConnection(str);  
   String sql = "Select top 10 * from products";  
   con.Open();  
   da = new System.Data.OleDb.OleDbDataAdapter(sql, con);  
   ds = new DataSet();  
   da.Fill(ds);  
   this.chartControl1.DataSource = ds;  
   con.Close();  
 }

When creating a chart there are different properties which needs to be set in order to get the desired results. For example in this blog, in addition to the bars, I have also added markers to the bars so that they become more informative. The Grid Lines, Legend customization etc are all part of different changes which we can apply to the chart. Since the chart control has been placed in the Detail section of the report we will use the Detail_Format event to write the code. Let us see how the code looks like:

private void detail_Format(object sender, EventArgs e)  
{  
   //Declaring two new series as it is a stacked bar chart  
   GrapeCity.ActiveReports.Chart.Series s = new GrapeCity.ActiveReports.Chart.Series();  
   s.Name = "Unit Price";  
   GrapeCity.ActiveReports.Chart.Series s1 = new GrapeCity.ActiveReports.Chart.Series();  
   s1.Name = "Units In Stock";  

   //Setting the chart title and its font  
   this.chartControl1.Titles[0].Text = "Stacked Bar Chart";  
   System.Drawing.Font f = new System.Drawing.Font("Arial", 15);  
   this.chartControl1.Titles[0].Font.Font = f;  

   //Defining the series type. It is stacked bar in this case  
   s1.Type = GrapeCity.ActiveReports.Chart.ChartType.StackedBar3D;  
   s.Type = GrapeCity.ActiveReports.Chart.ChartType.StackedBar3D;  

   //Setting the X-axis labels and the look of the chart  
   this.chartControl1.ChartAreas[0].Axes[0].LabelsVisible = true;  
   this.chartControl1.ChartAreas[0].Axes[0].MajorTick.Visible = true;  
   this.chartControl1.ChartAreas[0].Axes[0].LabelFont.Angle = 90;  
   this.chartControl1.ChartAreas[0].ZDepthRatio = 0;  

   //Adding the series  
   this.chartControl1.Series.Add(s);  
   this.chartControl1.Series.Add(s1);  

   //Assigning the X and Y values for both the series  
   this.chartControl1.Series[0].ValueMembersY = ds.Tables[0].Columns["UnitPrice"].ColumnName;  
   this.chartControl1.Series[0].ValueMemberX = ds.Tables[0].Columns["ProductName"].ColumnName;  
   this.chartControl1.Series[1].ValueMemberX = ds.Tables[0].Columns["ProductName"].ColumnName;  
   this.chartControl1.Series[1].ValueMembersY = ds.Tables[0].Columns["UnitsInStock"].ColumnName;  

   //Use this code to display the Y-Axis values and the gridlines  
   this.chartControl1.ChartAreas[0].Axes[2].MajorTick.Visible = true;  
   this.chartControl1.ChartAreas[0].Axes[2].MinorTick.Visible = true;  
   this.chartControl1.ChartAreas[0].Axes[2].MajorTick.GridLine.Weight = 1;  
   this.chartControl1.ChartAreas[0].Axes[2].MajorTick.GridLine.Style = GrapeCity.ActiveReports.Chart.Graphics.LineStyle.Solid;  
   this.chartControl1.ChartAreas[0].Axes[2].MajorTick.GridLine.Color = Color.Black;  

   //Adding Markers to both the series  
   GrapeCity.ActiveReports.Chart.Marker marker1 = new GrapeCity.ActiveReports.Chart.Marker();  
   marker1.Backdrop = new GrapeCity.ActiveReports.Chart.Graphics.Backdrop(GrapeCity.ActiveReports.Chart.Graphics.GradientType.Horizontal, Color.LightCyan, Color.SteelBlue);  
   marker1.Line = new GrapeCity.ActiveReports.Chart.Graphics.Line(Color.Black);  
   marker1.Label = new GrapeCity.ActiveReports.Chart.LabelInfo(new GrapeCity.ActiveReports.Chart.Graphics.Line(Color.Transparent, 0, GrapeCity.ActiveReports.Chart.Graphics.LineStyle.None), new      GrapeCity.ActiveReports.Chart.Graphics.Backdrop(GrapeCity.ActiveReports.Chart.Graphics.BackdropStyle.Transparent, Color.Black, Color.Black, GrapeCity.ActiveReports.Chart.Graphics.GradientType.Vertical,  System.Drawing.Drawing2D.HatchStyle.DottedGrid, null, GrapeCity.ActiveReports.Chart.Graphics.PicturePutStyle.Stretched), new GrapeCity.ActiveReports.Chart.FontInfo(Color.Black, new Font("Arial", 8F)), "{Value}", GrapeCity.ActiveReports.Chart.Alignment.Bottom);  
   marker1.Style = GrapeCity.ActiveReports.Chart.MarkerStyle.InvTriangle;  
   s.Marker = marker1;  

   GrapeCity.ActiveReports.Chart.Marker marker2 = new GrapeCity.ActiveReports.Chart.Marker();  
   marker2.Backdrop = new GrapeCity.ActiveReports.Chart.Graphics.Backdrop(GrapeCity.ActiveReports.Chart.Graphics.GradientType.Horizontal, Color.Navy, Color.Black);  
   marker2.Line = new GrapeCity.ActiveReports.Chart.Graphics.Line(Color.Black);  
   marker2.Label = new GrapeCity.ActiveReports.Chart.LabelInfo(new GrapeCity.ActiveReports.Chart.Graphics.Line(Color.Transparent, 0, GrapeCity.ActiveReports.Chart.Graphics.LineStyle.None), new GrapeCity.ActiveReports.Chart.Graphics.Backdrop(GrapeCity.ActiveReports.Chart.Graphics.BackdropStyle.Transparent, Color.Black, Color.Black, GrapeCity.ActiveReports.Chart.Graphics.GradientType.Vertical, System.Drawing.Drawing2D.HatchStyle.DottedGrid, null, GrapeCity.ActiveReports.Chart.Graphics.PicturePutStyle.Stretched), new GrapeCity.ActiveReports.Chart.FontInfo(Color.Black, new Font("Arial", 8F)), "{Value}", GrapeCity.ActiveReports.Chart.Alignment.Top);  
   marker2.Style = GrapeCity.ActiveReports.Chart.MarkerStyle.Triangle;  
   s1.Marker = marker2;  
 }

Sample applications demonstrating the above functionality can be downloaded in both VB.NET and C# from the following links: Stacked_Bar_C# Stacked_Bar_VB.NET

MESCIUS inc.