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.
View Comments
Very appreciate for the sharing!
I've tried to use FusionCharts in WinForm and encountered
many problems. This post really helps!
p.s. In step 5, I found that there is something wrong with
the xml given by the example. The chart container shows
"invalid xml data" while using the provided xml. However,
when I changed the outter tag name of the xml from "chart"
to "graph". The chart loads successfully. Thus this post
may have to do some revisions.
Thank you again for the sharing and
I really love using Fusion Charts!
Mark Peng
Hi Mark,
The tag name "chart" works with FusionCharts v3 whereas the free version uses "graph" as outer tag name.
Nice post.
I am also getting the same issue of Invalid XML data
I am using the enterprise version 3 of fusion chart
Please reply soon
hi abdul,
due to some problem while posting, the numberprefix attribute has been modified in the code given above. in the code section where you are specifying the chartXML, if you could just change the code from
numberPrefix='~-0-~#39;
to
numberPrefix='$'
the chart will load fine.
Hope this helps :)
Subhayu
FusionCharts Team
Translation:
I´m trying to use the code, but the chart does not shows and do not display any error message, just I do not see the chart. Any help please.
@Modesto: I tried translating that but am not too sure if I understand what you mean. Could you please put that again?
hola,
Estoy tranato de Utilizar el código sin embargo no se presenta la gráfica y ningún error marca, solo que no se carga en video.
alguin me podria ayudar por favor.
Hello,
Trying to run this in VB.NET. Getting the error: Error in loading data.
I think something is wrong with the XML. Here is the XML:
file:///C:/Documents and Settings/owner/Desktop/FChartsTest/FusionCharts/Column2D.swf?=dataXML=
®isterwithjs=1
Thank you
Hi, I'm using the free version of Fusion Charts in my C# form application.
I have used the above code and I have made the following changes:
1. Renamed Column2D.swf to FCF_Column2D.swf.
2. Changed tag name “chart" to "graph".
3. Changed numberPrefix=’~-0-~#39; to numberPrefix=’$’
But I am still getting 'invalid XML data'
What could I be doing wrong??
Thanks
Hi Tom,
It seem that the URL that you are using is invalid:
file:///C:/Documents and Settings/owner/Desktop/FChartsTest/FusionCharts/Column2D.swf?=dataXML=
®isterwithjs=1
* There is a extra = after ?
Please try with this:
file:///C:/Documents and Settings/owner/Desktop/FChartsTest/FusionCharts/Column2D.swf?dataXML=®isterwithjs=1
Also make sure you are passing XML as String using dataXML.
this code works but replace this: 'numberPrefix='~-0-~#39; for this:
'numberPrefix='~-0-~#39'