Sunday, April 12, 2009

Generating Bar chart in ASP.NET C#

In .NET we can plot Bar and Pie charts by making use of Microsoft Office Components or OWC(Office Web Components). For this purpose first you will have to add reference to the office web components under the COM tab. Now you need to add the following reference to your project
using OWC;. Also drag n drop a placeholder to which we finally add our Chart image.The code is given Below with sufficient explanations:

Sample Code:

//First of all we need to generate a space for the chart in the webpage.

OWC.ChartSpace mychartspace = new OWC.ChartSpaceClass();

//As we have created a space for the chart, now we have to create a chart object in the above //created chartspace. The add method returns the chart object.

OWC.WCChart mychart = mychartspace .Charts.Add (0);

//Select the type of graph you want to display.The type of the graph is specified by the //enumerated values in OWC.ChartChartTypeEnum.

mychart .Type = OWC.ChartChartTypeEnum.chChartTypeColumnClustered;

//Now specify whether your chart needs to have legend or not. A legend in a chart is a box that //identifies the patterns or colors that are assigned to the data series or categories.

mychart .HasLegend = true;

//Now you need to specify a title for your graph(If you wish to have one)

mychart .HasTitle = true;
mychart .Title.Caption= "This is my Bar Chart using OWC";

//Now specify captions for the X axis and Y axis of the graph

mychart .Axes[0].HasTitle = true;
mychart .Axes[0].Title.Caption = "My X-Axis";
mychart .Axes[1].HasTitle = true;
mychart .Axes[1].Title.Caption = "My Y-Axis";

//Now as the chart has been created you have to specify the data that is to be plotted as a //graph. Here we give some static values, But you may also populate it with values obtained //from databases. Here we use literal strings for holding our data. We can specify the categories //and their corresponding values as string literals separated by tabs. Here we have 3 string //literals.

string mySeriesName = "My Series";
string myCategory = "Jan" + '\t' + "Feb" + '\t' + "Mar" + '\t'; //Name to be displayed for values
string myValue = "100" + '\t' + "120" + '\t' + "40" + '\t'; //Actual value to be plotted

// Now we have our values in 3 literal strings, but they are not plotted in the chart yet, for this //purpose we add a series to the charts series collection. For this purpose we use the //SeriesCollection method of the chart.

mychart .SeriesCollection.Add(0);

//Now name the series
mychart .SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimSeriesNames, (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, mySeriesName );

//Specify the Categories
mychart .SeriesCollection[0].SetData (OWC.ChartDimensionsEnum.chDimCategories, (int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, myCategory );

//Specify there corresponding values
mychart .SeriesCollection[0].SetData(OWC.ChartDimensionsEnum.chDimValues,
(int)OWC.ChartSpecialDataSourcesEnum.chDataLiteral, myValue );

//Now we have a chart with there plotted values. we can export it an image file or something //like that, we dont need to save it. here its gif format

string Path1 = (Server.MapPath(".")) + @"\somefilename.gif";
mychartspace .ExportPicture(Path1, "GIF", 600, 350);

//Create a relative path to the GIF file. because the image file or the chart is been created at the server not in the client, so we need to have a relative path to the image.

string Path2 = @"./somefilename.gif";//Look we specify '.' to indicate root

string strImageTag = "<IMG SRC='" + strRelativePath + "'/>";

PlaceHolder1.Controls.Add(new LiteralControl(strImageTag)); // adding image in the relatice //path to place holder.


1 comment:

  1. That is a great article. But why do you want to make use of Microsoft Office components when .NET itself provides charting controls? .NET 3.5 SP1 with Visual Studio 2008 has provided a rich set of charting controls using which you can virtually create any type of chart/graph. You can find more information for Charting Controls For .NET here:



Related Posts with Thumbnails