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.

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 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.

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

The final design of the form

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.

The final chart generated using WinForms

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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

26 responses on “How to Use FusionCharts in Windows .NET Applications (WinForms)

  1. 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

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

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

  4. 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.

  5. 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.

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

  7. 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

  8. 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

  9. 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.

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

  11. 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

  12. 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?

  13. @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.

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

  15. 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

    • @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://blog.fusioncharts.com/wp-content/uploads/2009/09/WindowsFormsApplication1.zip

      Let us know if this helps.

  16. 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 !!

  17. 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 !

  18. 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

  19. 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!

    • 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

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS