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:
Response.Write(InfoSoftGlobal.FusionCharts.RenderChart("FusionCharts/FCF_Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", false, false));
That’s all. Really. Build and run it. Cool isn’t it? You don’t have to take care of the parameters by now. One line of code is enough to produce a really cool chart on your screen what do you want more?
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:
<%@ 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
Download example app: ChartIntegration.zip
