How to Use FusionCharts in Windows .NET Applications (WinForms)

FusionCharts is constantly striving to make your life as simple as possible; you may use a Data Visualization Tool to Compare JavaScript charting libraries and choose the best charting library from numerous JavaScript charting libraries available in the market. A user recently requested that FusionCharts javascript charts be embedded in a payroll application; he was developing – a Windows.NET desktop application. After assisting him with this, we realized that you might need the same for your application. In this post, we will go over the fundamental steps for embedding FusionCharts in your Windows.NET application.

Steps to Embed FusionCharts

Our chosen language for development is C#. You can use any basic IDE – we used the Microsoft Visual C# 2008 Express Edition. Make sure you have Adobe Flash Player 8 or higher installed. If you don’t, you can download the same from here. 1. Create a new Windows Forms Application Project. In the Design View, right-click on the Toolbox and click on Choose Items.

2. In the Choose Toolbox Items dialog box, under the COM Components tab, select Shockwave Flash Object. If this object is not being displayed, then please check whether Flash Player is installed on your system.

3. Right at the bottom in your Toolbox, an object titled Shockwave Flash Object will be included. Select and drag it onto your form. In the Properties Window, change its name to ChartContainer. If the name already didn’t suggest so, this is where the chart will be displayed.

4. Finally add a button to your form. Change its name to btnLoadChart and its text to Load Chart from the Properties Window. That will complete the design aspect of things. The final form would look as follows:

5. Now that we are done with the design, let’s get down to coding. When you click the button btnLoadChart it will load the chart. While in the btnLoadChart_Click event, add the following code:

{
 //Specify the format, path and name of the swf file which will render the chart.
//if "file:///" is added before the path and the XML after the path in the format
//file:///XMLpath?=dataXML=®isterwithjs=1
//then the chart will be loaded directly with no possibilities of any error. For a different chart, change the
//name from column2d to the required chart, add the chart swf to the application startuppath and modify the XML as required.
       string appPath = "file:///" + Application.StartupPath + "Column2D.swf";
       //replace all "" in the path with "/"
       appPath = appPath.Replace("", "/");
       //Creating the string which will act as the XML according to the format
       //file:///XMLpath?=dataXML=®isterwithjs=1
       string ChartXML = appPath + @"?dataXML= ®isterwithjs=1";
//Passing the above string into the required parameter of the flash movie.
ChartContainer.Movie = ChartXML;
 }

You can modify the chart XML to suit your needs. If you run the application now and click on the Load Chart button, it will generate the chart.

Simple, isn’t it? It opens endless possibilities for you! Once you embed a chart in your form, you can design interactive charts using either user-entered data or a remote data file. You can also export the charts as images or their data as a CSV file. We will see how to do it all in our next post. So try this out in the meantime, and don’t forget to come back for the next part! Now you can also use jQuery charts for creating interactive charts and graphs.