Click here to Skip to main content
Click here to Skip to main content
Go to top

Using FusionCharts with C#

, 11 May 2013
Rate this:
Please Sign up or sign in to vote.
This article describes using FusionCharts with C#.

 

Introduction 

FusionCharts Free is an open source free Flash charting component which can be used to display high quality animated charts. FusionCharts can be used with many scripting languages like PHP, ASP.NET, JSP, ColdFusion, JavaScript, etc.

Following are the main advantages of FusionCharts:

  • No installation required
    FusionCharts works without installation. You just need to copy the swf files on the server.
  • Ease of use
    FusionCharts are easy to use. There is no need to learn flash or any other authoring tool to be able to use FusionCharts. You just have to use XML to define the data.
  • FusionCharts run on many platforms
    Since FusionCharts are based on XML, they can run on a variety of platforms.
  • FusionCharts are efficient
    FusionCharts are rendered on the client-side using Flash. As a result there is no network congestion and load on the server.
  • Free
    FusionCharts Free are completely free.

Background

To demonstrate the working of FusionCharts, I have created a Web Application in ASP.NET with C#. The application shows the top 10 richest countries of the world on the basis of GDP Per Capita. The application is created using Visual Web Developer 2005 Express Edition.

The data is for the period 2011-2012 and taken from the International Monetary Fund, which uses the GDP per capita of each country and is taken from the following site:

Using the code

The user interface of the application consists of a DropDownList control which allows the chart type to be selected and a Literal control which displays the selected chart. The AutoPostBack property of the DropDownList control is set to True to automatically cause a PostBack when a different chart type is selected.

The FusionCharts package contains a file called FusionCharts.dll. A reference to this file is added in the solution as follows:

I added a folder called Data in the solution and added a new XML file called Data.xml in the folder with the following contents:

<?xml version="1.0" encoding="utf-8" ?>
<graph caption='Top 10 Richest Countries of the World' xAxisName='Country' 
     yAxisName='GDP' showNames='1' decimalPrecision='0' formatNumberScale='0'>
  <set name='Qatar' value='102768' color='#FF0000' />
  <set name='Luxembourg' value='80679' color='#00FF00' />
  <set name='Singapore' value='60883' color='#0000FF' />
  <set name='Norway' value='55264' color='#00FFFF' />
  <set name='Brunei' value='50526' color='#FF00FF' />
  <set name='United States' value='49802' color='#FFFF00' />
  <set name='UAE' value='48992' color='#FFAAFF' />
  <set name='Switzerland' value='45285' color='#CCFFBB' />
  <set name='Kuwait' value='43846' color='#00AABB' />
  <set name='Austria' value='42477' color='#BBCCFF' />
</graph>

The I added another folder called FusionCharts and added all the chart swf files from the Charts folder of the FusionCharts package.

Following is the figure of the solution explorer after adding the above mentioned contents:

Following is the code-behind in the Default.aspx.cs file:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using InfoSoftGlobal;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Display default chart
        DropDownList1_SelectedIndexChanged(sender, e);
    }
    void ShowChart(string type)
    {
        // Render chart
        Literal1.Text = FusionCharts.RenderChartHTML("FusionCharts/" + 
          type + ".swf", "Data/Data.xml", "", "countries", "700", "300", false);
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // Display chart selected by the user
        ShowChart(DropDownList1.SelectedValue);
    }
}

In the above code, I have imported the InfoSoftGlobal namespace from the FusionCharts.dll file. This namespace contains the FusionCharts class. The ShowChart() user-defined function renders the chart and displays the output on the Literal control using the RenderChartHTML function of the FusionCharts class. The SelectedIndexChanged event of the DropDownList control passes the chart type selected by the user as a parameter to the ShowChart function. The Page_Load event displays the default chart by calling the SelectedIndexChanged event of the DropDownList control.

Following are the parameters of the RenderChartHTML function:

  1. SWF filename with the path
  2. XML data filename with the path
  3. XML data as a string (This parameter can be "" if you are using xml data file)
  4. ID for the chart
  5. Chart Width
  6. Chart Height
  7. Debug Mode

Points of Interest

FusionCharts provide a quick, easy and efficient method to display good looking charts using any scripting language.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Azim Zahir
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with NIIT (Mumbai, India) as a Senior Faculty. I enjoy programming as a hobby. My favorite technologies are Flash, Flex and Silverlight.
 
Of late I have developed keen interest in WPF and Windows Mobile programming.
 
Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
QuestionHow to set z-index in this code? please help.. Pinmemberviralchauhan23-Jul-14 1:04 
QuestionHow to create dynamically from database using This DLL PinmemberMaddy selva17-Apr-14 19:37 
QuestionThank You Sir...... PinmemberMayuresh00719-Aug-13 20:37 
AnswerRe: Thank You Sir...... PinmemberAzim Zahir19-Aug-13 22:08 
QuestionVery good and simple PinmemberDamodarSP21-May-13 23:59 
QuestionMessage Removed PinmemberAzad R Chouhan10-May-13 22:01 
AnswerRe: realy great PinprotectorDaveAuld12-May-13 2:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 11 May 2013
Article Copyright 2013 by Azim Zahir
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid