It was time to throw an update on the ChartAPI for FusionCharts. The first package which was originally released was beta because of the lag of time for testing and because it was fairly incomplete. I managed to complete and include the single series charts completely into the download. There have been the doughnut and area charts missing. I also fixed some bugs on the pie charts and included a fifth example application just to show the area and doughnut charts. Head over the the ChartAPI blogpost and download the new package.

Since there is a need in the multi series charts which I need to implement for some sites, I hopefully will soon complete the ChartAPI with all the charts. Stay tuned and enjoy.

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:

Here we go with a quickstart with FusionCharts free and ASP.NET. Assuming you are using Visual Web Developer I'll show you in 2 short steps how easy it is to integrate and use FusionCharts free in your web application.

1. Setting up your Visual Studio Web Developer

Open your web project or create a new empty project in Visual Web Developer. For this example we will create a new ASP.NET website like on the image on the right.

If you not already did then download the FusionCharts free v2 package from InfoSoft Global and extract it in a temporary folder or in a folder of your liking (the download link is at the bottom of this article).

Now back to your Visual Web Developer create a folder and name it FusionCharts (or something you like more). Right click on this folder and select "Add Existing Item". Browse to the extracted FusionCharts package and select all the swf files and a JavaScript file called FusionCharts.js which are in the Charts folder in the FusionCharts root directory.

After having added the flash files right click again in your solution explorer and select "Add reference" in the context menu. Switch to the Browse tab and navigate again to the extracted FusionCharts package. Now go through the following directories Code -> CSNET -> bin and select the file FusionCharts.dll. As you might have noticed, the Visual Web Developer created a directory called Bin and included the currently selected file in this directory.

Of course you could just select the Charts folder in your Windows Explorer and drag-and-drop it into your solution explorer. And of course you could do the same with the FusionCharts.dll file but we want to do it like it should be, so hopefully your solution explorer should look like the image on the right.

2. Creating your first chart

If you believe it or not that was the most difficult. Now we come to the easy part of this article. First of all we need data to display in the chart. For simplicity reasons we will take the Data.xml file from the FusionCharts examples. Add therefore the complete Data folder from the FusionCharts package ( should be under Code/CSNET/BasicExample/ ) and add it to your Visual Web Developer.

If you are done with this, open the file Default.aspx in your Visual Web Developer. Add in the head tag the JavaScript file (just drag and drop the file from the solution explorer to the head section of your Default.aspx).

Now here comes the magic. Just add the following line of code within code tags:

   1: 1: Response.Write(InfoSoftGlobal.FusionCharts.RenderChart("FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", false, false));

You might want to implement some error handling and to prove if flash is installed. You also want to improve your code. A good idea would be to include the following line of code on top of your aspx file:

   1: <%@ Import Namespace="InfoSoftGlobal" %>

I will also loose some words on the function call FusionCharts.RenderChart(....) without going deeper into this. First parameter as you guessed tells FusionCharts what chart type to take by passing the file. The second parameter tells FusionCharts about the data. You pass a xml file or pass here an empty string and then use the third parameter when building the xml data stream manually. The data stream has to meet the FusionCharts specification. For detailed info refer to the documentation included in the download package. The fourth parameter is the chartID, a unique id to define the chart in your application. After that comes the width and the height of the chart. The last two parameters tell FusionCharts if the debug mode should be used and if FusionCharts should register the chart with JavaScript.

That's all for now. A more detailed example ships with the FusionCharts free documentation. So this article here should give you only an overview of how easy FusionCharts is to use.

Try it out for yourself and enjoy...

Resources

• FusionCharts v2 free website
• download example application ChartIntegration.zip (444,83 kb)