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

Here at FusionCharts, we are always trying to make life as simple as possible for you. Just the other day,  a user wanted to embed FusionCharts javascript charts in a payroll application he was developing – a Windows .NET desktop application. Having helped him with that, we realized that you might need the same for your application. So in this post, we will outline the basic steps needed to embed FusionCharts in your Windows .NET application.

Our chosen language for development is C#. You can use any basic IDE – we have made use of 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.

Choose Items from Design View in WinForms Application Project

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.

Inserting Shockwave Flash Object from Toolbox Items

3. Right at the bottom in your Toolbox, an object titled Shockwave Flash Object will be included. Select and drag it on to 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.

Dragging Shockwave Flash Object to the form

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 under:

The final design of the form

5. Now that we are done with design, lets get down to coding. The button btnLoadChart when clicked will load the chart. So in the btnLoadChart_Click event, add the following code:

The chart XML can be modified according to your needs. If you run the application now and click on the Load Chart button, the chart will be generated.

The final chart generated using WinForms

Simple, isn’t it? The possibilities it opens for you are endless. 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 its data as a CSV file. We will see how to do 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.

  • Mark Peng September 17, 2009, 4:42 pm

    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

  • Srividya September 18, 2009, 5:30 am

    Hi Mark,
    The tag name “chart” works with FusionCharts v3 whereas the free version uses “graph” as outer tag name.
    Nice post.

  • Abdul-Wahab October 25, 2009, 9:01 pm

    I am also getting the same issue of Invalid XML data
    I am using the enterprise version 3 of fusion chart
    Please reply soon

  • Subhayu Mukherjee October 27, 2009, 9:17 am

    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

    • Cesar November 6, 2010, 5:27 pm

      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 November 7, 2009, 12:33 pm

    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.

  • Sanket (FusionCharts Team) November 7, 2009, 4:34 pm

    @Modesto: I tried translating that but am not too sure if I understand what you mean. Could you please put that again?

  • Tom August 11, 2010, 7:33 am

    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=
    &registerwithjs=1
    Thank you

  • Harry October 19, 2010, 4:15 pm

    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

  • Sudipto Choudhury October 21, 2010, 7:45 am

    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=
    &registerwithjs=1
    * There is a extra = after ?
     
    Please try with this:
    file:///C:/Documents and Settings/owner/Desktop/FChartsTest/FusionCharts/Column2D.swf?dataXML=&registerwithjs=1
    Also make sure you are passing XML as String using  dataXML.

  • Frank January 18, 2011, 10:50 pm

    this code works but replace this: ‘numberPrefix=’~-0-~#39; for this:
    ‘numberPrefix=’~-0-~#39’

  • Dominik January 24, 2011, 11:22 am

    Very nice tutorial. I have a question – is it possible to update the chart with a new data set using flash calls ? I would like to redraw it again after the data XML is specified. Do you support CallFunction interface from ActiveX? Which funstions shall I call to redraw your chart ?
    Thanks in advance,

    Dominik

  • Anand February 9, 2011, 9:04 am

    I am using 64 bit machine and I see it does not work in 64 bit.

    Now since we are talking about 64 bit, do we need to worry about if the application is executed from server (say Windows 2008) where flash usually has less permissions?

  • Sudipto February 9, 2011, 9:34 am

    @Dominik,
    you can use CallFunction to call the chart’s APIs. Also you can use FlashCall event to trap all chart events. Please note that you need to pass the parameter in XML String format. The request that you get in the FlashCall event is also received in the same XML format.

  • Sudipto February 9, 2011, 10:10 am

    @Anand: You need to have 64bit Flash Player I suppose.

  • Vijay September 16, 2011, 12:26 pm

    Hi,
    I have executed the code in C#.net but it’s display “no data to display”… please help me to make work this code…
    file:///D:/Projects/Samples_Project/Sample_Chart/Sample_Chart/bin/Debug/Column2D.swf?dataXML=<chart caption=’Monthly Sales Summary’ subcaption=’For the year 2006′ xAxisName=’Month’ yAxisName=’Sales’ rotatelabels=’1′ slantlabels=’1′ showvalues=’0′ numberPrefix=’~-0-~#39′ exportenabled=’1′ exportAtClient=’1′ exportHandler=’fcExporter1′ exportFormats=’PNG=Save as PNG’ >
    <set label=’January’ value=’17400′ />
    <set label=’February’ value=’19800′ />
    <set label=’March’ value=’21800′ />
    <set label=’April’ value=’23800′ />
    <set label=’May’ value=’29600′ />
    <set label=’June’ value=’27600′ />
    <set label=’July’ value=’31800′ />
    <set label=’August’ value=’39700′ />
    <set label=’September’ value=’37800′ />
    <set label=’October’ value=’21900′ />
    <set label=’November’ value=’32900′ />
    <set label=’December’ value=’39800′ />
    </chart>&registerwithjs=1

    • Hrishikesh Choudhari September 16, 2011, 2:25 pm

      @Vijay:

      The “No data to display” error means that either:
      1) The XML string is not properly constructed, and might not have data in it.
      2) A single-series XML string is provided to a multi-series chart, or vice-versa.

      According to the code given by you, none of the above 2 reasons fit.

      So we took your same code, and put it in a blank new project in Visual Studio 2010 with FusionCharts v3.2.1. We only changed the path to the SWF file. This project ran perfectly. We’ve uploaded this sample project for you to inspect.

      Download the sample project from http://www.fusioncharts.com/blog/wp-content/uploads/2009/09/WindowsFormsApplication1.zip

      Let us know if this helps.

  • kangweigang February 10, 2012, 8:44 am

    I have a error Invaid XML data .I used your code. I don’t know why ? I am a Chinese ,my english is so poor !!

  • bos_ke April 11, 2012, 12:35 pm

    hello !
    I have a porblem, i want to use the free char but display “no data to display”:
    this is my code :
      string ChartXML = @”file:///C:/Charts/FCF_Column2D.swf?dataXML=<chart caption=’Monthly Sales Summary’ subcaption=’For the year 2006′ xAxisName=’Month’ yAxisName=’Sales’ rotatelabels=’1′ formatNumber=’0′ slantlabels=’1′ showvalues=’0′ numberPrefix=’~-0-~#39′ exportenabled=’1′ exportAtClient=’1′ exportHandler=’fcExporter1′ exportFormats=’PNG=Save as PNG’>
                 <set label=’January’ value=’17400′ />
                 <set label=’February’ value=’19800′ />
                 <set label=’March’ value=’21800′ />
                 <set label=’April’ value=’23800′ />
                 <set label=’May’ value=’29600′ />
                 <set label=’June’ value=’27600′ />
                 <set label=’July’ value=’31800′ />
                 <set label=’August’ value=’39700′ />
                 <set label=’September’ value=’37800′ />
                 <set label=’October’ value=’21900′ />
                 <set label=’November’ value=’32900′ />
                 <set label=’December’ value=’39800′ />
                </chart>&registerwithjs=1″;
               
                ChartContainer.Movie = ChartXML;

    i don’t know why,please help! thank you ! 

  • SASIF May 16, 2012, 7:14 pm

    I am using exactly the same code but getting error “Invalid XML Data” Can you please help?

    //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=<Your XML here>&registerwithjs=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:///” + “C://Users//xxx//Downloads//FusionCharts_Evaluation//FusionCharts_Evaluation//Charts//” + “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=<Your XML here>&registerwithjs=1
           string ChartXML = appPath + @”?dataXML=<chart caption=’Monthly Sales Summary’ subcaption=’For the year 2006′ xAxisName=’Month’ yAxisName=’Sales’ rotatelabels=’1′ slantlabels=’1′ showvalues=’0′ numberPrefix=’$’; exportenabled=’1′ exportAtClient=’1′ exportHandler=’fcExporter1′ exportFormats=’PNG=Save as PNG’ >
                 <set label=’January’ value=’17400′ />
                 <set label=’February’ value=’19800′ />
                 <set label=’March’ value=’21800′ />
                 <set label=’April’ value=’23800′ />
                 <set label=’May’ value=’29600′ />
                 <set label=’June’ value=’27600′ />
                 <set label=’July’ value=’31800′ />
                 <set label=’August’ value=’39700′ />
                 <set label=’September’ value=’37800′ />
                 <set label=’October’ value=’21900′ />
                 <set label=’November’ value=’32900′ />
                 <set label=’December’ value=’39800′ />
           </chart>&registerwithjs=1″;
            //Passing the above string into the required parameter of the flash movie.
            ChartContainer.Movie = ChartXML;

       I have windows 7, vs 2008, flash 11.x, evaluation chart v 3.2.2. Please help.

    thanks 

  • Bindhu May 17, 2012, 12:27 pm

    Hi,
    Please remove the ; after the attribute definition of “numberPrefix”.
    Modified XML:
    <chart caption=’Monthly Sales Summary’ subcaption=’For the year 2006′ xAxisName=’Month’ yAxisName=’Sales’ rotatelabels=’1′ slantlabels=’1′ showvalues=’0′ numberPrefix=’$’ exportenabled=’1′ exportAtClient=’1′ exportHandler=’fcExporter1′ exportFormats=’PNG=Save as PNG’ >
                 <set label=’January’ value=’17400′ />
                 <set label=’February’ value=’19800′ />
                 <set label=’March’ value=’21800′ />
                 <set label=’April’ value=’23800′ />
                 <set label=’May’ value=’29600′ />
                 <set label=’June’ value=’27600′ />
                 <set label=’July’ value=’31800′ />
                 <set label=’August’ value=’39700′ />
                 <set label=’September’ value=’37800′ />
                 <set label=’October’ value=’21900′ />
                 <set label=’November’ value=’32900′ />
                 <set label=’December’ value=’39800′ />
           </chart>
    Hope this helps!

    • SASIF May 18, 2012, 7:27 pm

      Thanks it is working 🙂 may I know from where I can free version of fusion charts because currently it is saying “Trial” on the chart.
      Many Thanks 

  • Hrishikesh May 21, 2012, 11:52 am

    You can download FusionCharts Free from here – http://www.fusioncharts.com/goodies/fusioncharts-free/

Leave a Comment