Using .netCHARTING, we can draw very sexy charts with our .NET Applications including both Windows Forms and ASP.NET Web Forms. The .netCHARTING is an extremely powerful and capable of creating virtually any charts we may need. This component has also been developed to be much more flexible than the status quo, which will enable us to push the charting envelope beyond the standards we may be used to. Now with some of the newly featured added to version 4.0, .netCHARTING stands out among all charting components out there.
You can download a demo version of .netCHARTING component form www.dotnetcharting.com.
1. Download the .netCHARTING component and unzip in a folder. Rename the folder to dotnetcharting (by default it comes with this name).
2. Copy this folder to your C:\Inetpub\wwwroot (your web root folder).
3. Open the internet information service and expand the default web sites. See Figure 1.
Figure 1.
4. Right click on the dotnetcharting folder, select property and make sure the properties are set as in Figure 2. Figure 2.
5. Now check the Write and Directory browsing and Click Create.
This make the installation complete.
It is time to test the installation and explore the samples that comes with the installation.
1. Explore the dotnetcharting folder; find out the Temp folder inside the sample. See Figure 3.
Figure 3.
2. Right click on the temp folder; select security and give modify permission to ASPNET user.
3. Restart the IIS.
4. Now try the link http://localhost/DotnetCharting/ and explore the samples
You can use .netCHARTING in both Windows Forms and Web Forms applications to build charting applications and reports. However, both have separate assemblies. So when you download, you may want to make sure you are downloading the correct version.
Let's start creating chart Web application using Visual Studio .NET.
1. Create a new ASP.NET Web Application. My application name is Chart as you can see from it in Figure 4.
Figure 4.
2. Now copy the dotnetcharting dll to the bin folder of you application and add a reference to this dll for your application. After adding the reference, you will see dotnetCHARTING in the References list. See Figure 5.
Figure 5.
3. Now copy the database folder from the dotnetcharting folder to your application’s root folter and also create a folder and name it temp. Give the modify permission of this temp folder to ASPNET user as explained earlier. See Figure 6.
Figure 6.
4. Select Customize Toolbox from Tools menu and then add the dotnetcharting to Toolbox or right-click on the tool box > Add/Remove Items > .net tab > browse to the dll > click OK. You will get a tool bar Chart in the tools of WebForms. See Figure 7.
Figure 7.
5. Rename the default webform to a01 and open the design view. Drag and drop and instance of the Chart. See Figure 8.
Figure 8.
6. Select the chart, right click on the chart, click on Properties and set all the properties you want to change. I also change the ID of the chart. See Figure 9.
Figure 9.
7. Open the HTML view of the Web Form, remove the default code added to the page and add the following code.
<%@ Page Language="C#" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
SeriesCollection getRandomData()
{
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
for(int a = 0; a < 4; a++)
Series s = new Series();
s.Name = "Series " + a;
for(int b = 0; b < 5; b++)
Element e = new Element();
e.Name = "E " + b;
e.YValue = myR.Next(50);
s.Elements.Add(e);
}
SC.Add(s);
// Set Different Colors for our Series
SC[0].DefaultElement.Color = Color.FromArgb(49,255,49);
SC[1].DefaultElement.Color = Color.FromArgb(255,255,0);
SC[2].DefaultElement.Color = Color.FromArgb(255,99,49);
SC[3].DefaultElement.Color = Color.FromArgb(0,156,255);
return SC;
void Page_Load(Object sender,EventArgs e)
// Set the title.
Chart.Title="Priyokumar : Chart";
// Set the x axis label
Chart.XAxis.Label.Text="X Axis Label";
// Set the y axis label
Chart.YAxis.Label.Text="Y Axis Label";
// Set the directory where the images will be stored.
Chart.TempDirectory="temp";
// Set the bar shading effect
Chart.ShadingEffect = true;
// Set he chart size.
Chart.Width = 600;
Chart.Height = 350;
// Add the random data.
Chart.SeriesCollection.Add(getRandomData());
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div style="text-align:center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
8. Now run the application and your output looks like Figure 10.
Figure 10.
9. Create another web form (ax02), drag and drop an instance of Chart, put Chart in id field. Now overwrite the html codes with the following lines.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
Chart.Type = ChartType.Pie;
Chart.Size = "600x350";
Chart.TempDirectory = "temp";
Chart.Debug = true;
Chart.Title = "My Pie Chart";
// Pie chart using shading effect mode Two.
Chart.ShadingEffectMode = ShadingEffectMode.Two;
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Classic samples folder
// - Help File > Data Tutorials
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getRandomData();
Chart.SeriesCollection.Add(mySC);
Random myR = new Random(1);
for(int a = 1; a < 5; a++)
s.Name = "Series " + a.ToString();
for(int b = 1; b < 5; b++)
e.Name = "Element " + b.ToString();
10. Output looks like Figure 11. Check http://localhost/CHART/ax02.aspx
Figure 11.
In above two examples, the data is generated randomly using the getRandomData method. For actual scenario, we may want to connect to database and populate the chart from a data source. .netCHARTING provides the DataEngine object, which can be used to automatically obtain data from a variety of data sources. The DataEngine returns a SeriesCollection object, which contains data that is consumed by the chart. The DataEngine object internally connects to any supported data sources when a ConnectionString is specified. Supported data sources include:
· MS Access
· MS SQL
· Oracle*
· mySQL*
· ODBC*
· Excel
· XML
*Available with .net framework version 2.0 only.
So in above two sample applications, you saw how easy and fast it is to create different types of charts using .netCHARTING component. These are just two examples. .netCHARTING comes with lot many more samples and chart types. Once you download the product, you will see over 350 sample applications, all in ASP.NET and supports both C# and Visual Basic .NET versions.
New Features added to .netCharting 4.0
There are over two dozens new feature are added to netCharting version 4.0. Here are some of them:
Summary
If your application needs to draw charts or generate good looking reports, you may want to give .netCHARTING a try. Go to www.dotnetcharting.com and download a free copy of a fully functional demo version today.