ASP.NET Drawing a chart using OWC11 - Office Web Components

How to create a bar chart using office web components.

Introduction
This article details how to create a bar chart using Office Web Components (OWC 11).

So what's so special in this:

1.Creating three bars or more in a chart.
2.Supressing the 0 values in the chart lables.
3.Using legends and setting its position.


I hope that you will know how to add a reference to the web application.If not please refer to the below images.
Adding OWC11 reference to the asp.net web application.
To add the OCW 11 from the Com Componenets tab.


Using the code
In this code the chart is generated on the click of the button.

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

//you have to include the following name space for creating the chart.
using Microsoft.Office.Interop.Owc11;

namespace BarChart
{
    public partial class _Default : System.Web.UI.Page
    
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            HttpContext.Current.Response.Headers.Set("Cache-Control", "no-cache");
        }
        
        protected void btn_ChartShow_Click(object sender, EventArgs e)
        {
            //This Create A Work Space or Drawing Space Where You Can Create Chart.The chart
            //workspace can contain up to 16 charts.
            ChartSpace barChartspace = new ChartSpaceClass();

            //This actually represents a chart in the ChartSpaceClass.
            ChChart barChart = barChartspace.Charts.Add(0);

            //Setting the type of chart you want to create
            barChart.Type = ChartChartTypeEnum.chChartTypeColumnClustered;
        
            //Setting the legend for the chart.
            barChart.HasLegend = true;
        
            //Setting the title for the chart.
            barChart.HasTitle = true;
        
            //Giving the caption for the title.
            barChart.Title.Caption = "Students Knowledge Chart";
        
            //To provide a seperation between the different categories
            barChart.Axes[0].HasMajorGridlines = true;
        
            //Setting title in the X-Axis
            barChart.Axes[0].HasTitle = true;
        
            //Setting title caption in the X-Axis
            barChart.Axes[0].Title.Caption = "Subjects";
        
            //Setting title in the Y-Axis
            barChart.Axes[1].HasTitle = true;
        
            //Setting title caption in the Y-Axis
            barChart.Axes[1].Title.Caption = "Performamce";

            //Setting the color for the chart back ground
            barChart.PlotArea.Interior.Color = "White";
        
            //Setting some decorative pattern for the chart
            barChart.PlotArea.Interior.SetPatterned(ChartPatternTypeEnum.chPattern80Percent, "White", "Black");
        
            //Placing the legend on to the top.
            barChart.Legend.Position = ChartLegendPositionEnum.chLegendPositionTop;
        
            //Setting the different type of categories in the X-axis.
            //If you want to use data base to draw a bar chart then this represents the columns in the database
            string stdCategory = "Section A,Section B,Section C,Section D";
        
            //Setting the values for each of categories in the Y-axis.
            string mathValue = "100,120,40,0";
            string scienceValue = "20,150,10,0";
            string historyValue = "200,220,90,10";
        
            //Creating a bar for performance in Maths by Students in all 3 sections
            barChart.SeriesCollection.Add(0);
            barChart.SeriesCollection[0].SetData (ChartDimensionsEnum.chDimCategories, (int) ChartSpecialDataSourcesEnum.chDataLiteral, stdCategory);
            barChart.SeriesCollection[0].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, mathValue);
        
            //Creating a bar for performance in Science by Students in all 3 sections
            barChart.SeriesCollection.Add(1);
            barChart.SeriesCollection[1].SetData(ChartDimensionsEnum.chDimCategories, (int) ChartSpecialDataSourcesEnum.chDataLiteral, stdCategory);
            barChart.SeriesCollection[1].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, scienceValue);
        
            //Creating a bar for performance in History by Students in all 3 sections
            barChart.SeriesCollection.Add(2);
            barChart.SeriesCollection[2].SetData(ChartDimensionsEnum.chDimCategories, (int)ChartSpecialDataSourcesEnum.chDataLiteral, stdCategory);
            barChart.SeriesCollection[2].SetData(ChartDimensionsEnum.chDimValues, (int)ChartSpecialDataSourcesEnum.chDataLiteral, historyValue);
        
            //Setting the Color and Title for Maths to be displayed in Chart and the Legend
            barChart.SeriesCollection[0].Interior.Color = "Orange";
            barChart.SeriesCollection[0].Caption = "Maths";
        
            //Setting the Color and Title for Science to be displayed in Chart and the Legend
            barChart.SeriesCollection[1].Interior.Color = "Red";
            barChart.SeriesCollection[1].Caption = "Science";
        
            //Setting the Color and Title for History to be displayed in Chart and the Legend
            barChart.SeriesCollection[2].Interior.Color = "Blue";
            barChart.SeriesCollection[2].Caption = "History";
        
            //Creating a lable to be displayed on the top of the each Maths Bar of the three sections
            ChDataLabels chLblMaths = barChart.SeriesCollection[0].DataLabelsCollection.Add();
            chLblMaths.HasValue = true;
        
            //Creating a lable to be displayed on the top of the each Science Bar of the three sections
            ChDataLabels chLblScience = barChart.SeriesCollection[1].DataLabelsCollection.Add();
            chLblScience.HasValue = true;
        
            //Creating a lable to be displayed on the top of the each History Bar of the three sections
            ChDataLabels chLblHistory = barChart.SeriesCollection[2].DataLabelsCollection.Add();
            chLblScience.HasValue = true;
        
            //To remove the zeros getting displayed in the chart we do the following.
            //If you remove the following three lines then you will get a zero displayed on the
            //chart for the Section D category.
            chLblMaths[3].Visible = false;
            chLblScience[3].Visible = false;

            //Setting the path for creating the chart
            string strBarChartImagePath = (Server.MapPath(".")) + @"\Barchart.gif";
        
            //Here we are creating the chart
            barChartspace.ExportPicture(strBarChartImagePath, "GIF", 1000, 350);
        
            //Finally we place the chart in the Holder Control.
            //We can directly place the image using a <img> tag in the .aspx(Source code view) file.
            //The following is also a good method i saw this in some other website.
            Plchldr_Barchart.Controls.Add(new LiteralControl(@"<IMG SRC='.\Barchart.gif'/>"));
        
        }
     }
}

Points of Interest
While running in the IIS server you must set the cache option to no-cache this is to be done when you are going to generate the chart dynamically for different inputs. You can refer the below links for this:

For IIS 7.0 use the following link:
http://blogs.iis.net/thomad/archive/2010/05/05/be-careful-when-using-the-cache-control-header-ui-in-iis-7-x.aspx


For IIS 6.0 use inetmgr(UI) or you can em
bed the property in your code as shown in the page load event.
Please add the following to your aspx page for the code to work smoothly:


<asp:Button runat="server" id="btn_ChartShow" Text="Show Chart" OnClick="btn_ChartShow_Click"/>
<asp:PlaceHolder runat="server" id="Plchldr_Barchart"></asp:PlaceHolder>

To download the code:

http://nullskull.com/FileUpload/1735914361_BarChart.zip

By kesavan sathupadi   Popularity  (4403 Views)