One of the greatest chart components I could find on the web is the FusionCharts free v2. This chart component contains 22 type of charts with all the features you could imagine a chart control component to have. The best thing on this chart component is that it is free for private and commercial use.

Another great thing on this component is that it is easy to implement. Easy also for ASP.NET applications which is an important fact.

Here are quick facts on FusionCharts free v2

• free for private and commercial use
• over 22 types of charts
• multi-platform support (ASP, PHP, JSP, ASP.NET, ColdFusion, Ruby on Rails)
• easy to use

While there are some good tutorials for ASP.NET which ships with the download of FusionCharts free and the documentation is more than good but I found it kind of unhandy for daily use so I decided to write my own API for this. The result is seen here on this post.

My intention was to provide a manager class which handles all the charts created for the current application without having to take much care on this. On the other hand to get fast and adequate results I also wrapped up all the chart types and provided methods and properties to build fast and easily charts needed for the desired application.

Features

At current the ChartAPI comes with the following features:

• support of single series charts including
  • Column 2D and 3D charts
  • Pie 2D and 3D charts
  • Line 2D charts
  • Bar 2D charts
  • Area 2D charts
  • Doughnut 2D charts
• full access to all chart properties via integrated methods
• easy integration and handling
• simplified data binding

Requirements

• .NET Framework 2.0 as minimum requirement
• ChartAPI available on this website
• FusionCharts free v2 available at InfoSoft Global

Getting started

If you don't have the FusionCharts free download it here. Then download the ChartAPI (link can be found at the bottom of this page).

If you didn't install the FusionCharts free package follow the steps as described here otherwise proceed to the next step.

1. Unpack the content of the FusionCharts package to a temporary folder
2. Open your web application in Visual Web Developer (here we will create an empty sample application). Follow the steps in this video or read the documentation of FusionCharts on how to integrate FusionCharts into your application.
3. Unpack the content of the ChartAPI into a temporary folder and the the dll to the Bin folder of your web application. Now you are ready to go

Creating your first chart

Creating the first chart is quite easy with ChartAPI. In this example we will create a column 2D chart. Let's take a look at the code needed to provide this chart:

   1: String xmlData = "";

   2:  

   3: ChartAPI.ChartColumn2D chart = new ChartAPI.ChartColumn2D("Column2D", "FusionCharts");

   4:  

   5: chart.Width = 800; chart.Height = 600;

   6: chart.SetTitles("This is our first column 2D chart", "We all love FusionCharts", "Month", "Salary");

   7: chart.SetNumberFormat("", "", false, true, ",", ".", 0);

   8:  

   9: xmlData = "";

  10: xmlData += "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>";

  11: xmlData += "<set name='Jan' value='462' color='AFD8F8' />";

  12: xmlData += "<set name='Feb' value='857' color='F6BD0F' />";

  13: xmlData += "<set name='Mar' value='671' color='8BBA00' />";

  14: xmlData += "<set name='Apr' value='494' color='FF8E46'/>";

  15: xmlData += "<set name='May' value='761' color='008E8E'/>";

  16: xmlData += "<set name='Jun' value='960' color='D64646'/>";

  17: xmlData += "<set name='Jul' value='629' color='8E468E'/>";

  18: xmlData += "<set name='Aug' value='622' color='588526'/>";

  19: xmlData += "<set name='Sep' value='376' color='B3AA00'/>";

  20: xmlData += "<set name='Oct' value='494' color='008ED6'/>";

  21: xmlData += "<set name='Nov' value='761' color='9D080D'/>";

  22: xmlData += "<set name='Dec' value='960' color='A186BE'/>";

  23: xmlData += "</graph>";

  24:  

  25: if (chart.CreateChartData(xmlData) == false)

  26:     Response.Write("could not load data");

  27: else

  28:     Response.Write(chart.RenderChart(true));

Cool isn't it? That's all you need. I think that's easy for everyone, and I think it has some advantages. The main advantage is with referencing your object you see directly what methods and properties you have. Only the properties you really set are taken for the final chart so you don't have to fuck with the reference of FusionCharts. Makes it quite easy.

Here is the sample program for this first tutorial

Binding to a data source

For this tutorial we will use our first tutorial as base again.

   1: ChartColumn2D chart = new ChartColumn2D("Column2D", "FusionCharts");

   2:  

   3: chart.Width = 800; chart.Height = 600;

   4: chart.SetTitles("This is our first column 2D chart", "We all love FusionCharts", "Company", "Salary");

   5: chart.SetNumberFormat("", "", false, true, ",", ".", 0);

   6:  

   7: if (chart.CreateChartData(ClassData.GetCompanySalaryData()) == false)

   8:     Response.Write("could not load data");

   9: else

  10:     Response.Write(chart.RenderChart(true));

Let's take a closer look at line 7. What we see here is that the method GetCompanySalaryData() from the class ClassData is called.

Here is the source code for this method:

   1: public static List<DataPair> GetCompanySalaryData()

   2: {        

   3:     OleDbCommand cmd = null;

   4:     OleDbDataReader dr = null;

   5:     List<DataPair> list = new List<DataPair>();

   6:  

   7:     Connect();

   8:  

   9:     cmd = new OleDbCommand("SELECT ID, CompanyName, Salary FROM tbl_Company", _conn);

  10:     cmd.CommandType = CommandType.Text;

  11:  

  12:     dr = cmd.ExecuteReader();

  13:  

  14:     while (dr.Read())

  15:     {

  16:         DataPair pair = new DataPair();

  17:         pair.name = (dr["CompanyName"] is DBNull) ? String.Empty : dr["CompanyName"].ToString();

  18:         pair.value = (dr["Salary"] is DBNull) ? 0 : Convert.ToInt32(dr["Salary"]);

  19:  

  20:         list.Add(pair);

  21:     }

  22:     dr.Close();

  23:  

  24:     Disconnect();

  25:  

  26:     return list;

  27: }

Take a look at line 5. A list of the object DataPair is created. This DataPair struct comes from the ChartAPI. Currently it has two properties as you see above. The property name and the property value. Of course the naming is not that good but it does its job. This DataPair struct will carry the data into your chart. In our loop we read the data from every single datarow and pass the complete list into the chart method CreateChartData(). That's all.

Using the chart manager

Let's take a look how to use the chart handler. The chart handler is an integrated manager class which simplifies the whole chart creation, data binding and rendering stuff. Here is a simple example. We are creating two charts and add them to the chart handler class:

   1: ChartColumn2D chart1 = new ChartColumn2D("firstChart", "FusionCharts");

   2: ChartColumn2D chart2 = new ChartColumn2D("secondChart", "FusionCharts");

   3:  

   4: chart1.Width = chart2.Width = 400;

   5: chart1.Height = chart2.Height = 300;

   6: chart1.SetTitles("This is our first chart", "We all love FusionCharts", "Company", "Salary");

   7: chart2.SetTitles("This is our second chart", "We all love FusionCharts", "Company", "Salary");

   8: chart1.CreateChartData(ClassData.GetCompanySalaryData());

   9: chart2.CreateChartData(ClassData.GetCompanySalaryData());

  10:  

  11: ChartHandler.CreateChart(chart1);

  12: ChartHandler.CreateChart(chart2);

  13:  

  14: Response.Write( ChartHandler.RenderChart( "firstChart", true ));

  15: Response.Write( ChartHandler.RenderChart("secondChart", true));

Now this is nothing important but let's continue to show how powerful this chart handler is. Here is the code:

   1: ChartHandler.CreateChart(new ChartColumn2D("firstChart", "FusionCharts"));

   2: ChartHandler.CreateChart(new ChartColumn2D("secondChart", "FusionCharts"));

   3:  

   4: ChartHandler.CreateChartData( "firstChart", ClassData.GetCompanySalaryData() );

   5: ChartHandler.CreateChartData( "secondChart", ClassData.GetCompanySalaryData() );

   6:  

   7: Response.Write( ChartHandler.RenderChart( "firstChart", true ));

   8: Response.Write( ChartHandler.RenderChart("secondChart", true));

This is really cool isn't it? We minimize the lines of code with a simple trick -> just taking advantage of C# language ;) What if we want to play with those values like set the titles and the size of the chart? Here is a more complete example:

   1: // create a basic column chart and add it to the chart handler

   2: ChartHandler.CreateChart(new ChartColumn2D("chart1", "FusionChart"));

   3:  

   4: // set some properties directly to the chart and set its data

   5: ChartHandler.GetChart("chart1").Width = 400;

   6: ChartHandler.GetChart("chart1").Height = 300;

   7: ChartHandler.GetChart("chart1").CreateChartData(ClassData.GetCompanySalaryData());

   8:  

   9: // now we want to modify or set some values like the titles:

  10: ChartColumn2D tempChart = (ChartColumn2D)ChartHandler.GetChart("chart1");

  11:  

  12: tempChart.SetTitles("Wonder if this works", "We all love FusionCharts API by DG", "Company", "Salary");

  13:  

  14: // after having finished write back the chart to the ChartHandler

  15: ChartHandler.SetChart("chart1", tempChart);

  16:  

  17: // finally render the chart

  18: Response.Write(ChartHandler.RenderChart("chart1", true));

Wow. What we did here is to use the methods GetChart and SetChart of the ChartHandler class. Since all the charts inherit from a BaseChart object the properties which are the same for all kind of charts can be set directly using the GetChart method. If we want to set more specific values like titles in the example above we just read the desired chart via GetChart into a temporary object, do what we want to do with it and write it back using SetChart.

Download the DGChartAPI

Download DGChartAPI with example applications here: