Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET

Using FusionCharts with C#

Rate me:
Please Sign up or sign in to vote.
5.00/5 (8 votes)
11 May 2013CPOL3 min read 50.4K   3K   16   8
This article describes using FusionCharts with C#.

  Image 1Image 2

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:

Image 3

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

Image 4

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

C#
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)


Written By
Instructor / Trainer NIIT, India
India India
I am a trainer by profession. Currently I am working with iFuture Technologies(India) as a Senior Faculty. I enjoy programming as a hobby. During my career I have seen the growth and decline of many technologies, many of them being my favorites like Flash, WPF, Windows Mobile Development. Few of my current favorites are Android, Xamarin and Python, though I also like traditional and evergreen languages like PHP, C#, Visual Basic and Java.

Apart from computers, my favorite pastime is bicycling.

Comments and Discussions

 
QuestionUnable to find InfoSoftGlobal refrence Pin
TANMAY N26-Jul-17 8:26
TANMAY N26-Jul-17 8:26 
QuestionHow to set z-index in this code? please help.. Pin
viralchauhan23-Jul-14 1:04
viralchauhan23-Jul-14 1:04 
string strCaption = "";
string strSubCaption = "";
string xAxis = "Project Status";
string yAxis = "Total Project";

//strXML will be used to store the entire XML document generated
string strXML = null;

//Generate the graph element
strXML = @"<graph caption="" + strCaption + @"" subcaption="" + strSubCaption + @"" decimalprecision="0"
="" pieslicedepth="30" formatnumberscale="0" xaxisname="" + xAxis + @"" yaxisname="" + yAxis + @"" rotatenames="1">";

int i = 0;

foreach (DataRow dr2 in dt2.Rows)
{
strXML += "<set name="" + dr2[0].ToString() + "" value="" + dr2[1].ToString() + "" color="" + color[i] + @"" link=""JavaScript:myJS('"" +="" dr2["statusname"].tostring()="" ",="" "="" dr2["projectcount"].tostring()="" "');="" &quot;="">";
i++;
}

//Finally, close <graph> element
strXML += "";

FCLiteral1.Text = FusionCharts.RenderChartHTML(
"../FusionCharts/FCF_Column3D.swf", // Path to chart's SWF
"", // Leave blank when using Data String method
strXML, // xmlStr contains the chart data
"mygraph1", // Unique chart ID
"400", "350", // Width & Height of chart
false
);
QuestionHow to create dynamically from database using This DLL Pin
Maddy selva17-Apr-14 19:37
professionalMaddy selva17-Apr-14 19:37 
QuestionThank You Sir...... Pin
Mayuresh00719-Aug-13 20:37
Mayuresh00719-Aug-13 20:37 
AnswerRe: Thank You Sir...... Pin
Azim Zahir19-Aug-13 22:08
Azim Zahir19-Aug-13 22:08 
QuestionVery good and simple Pin
DamodarSP21-May-13 23:59
DamodarSP21-May-13 23:59 
QuestionMessage Closed Pin
10-May-13 22:01
Azad R Chouhan10-May-13 22:01 
AnswerRe: realy great Pin
DaveAuld12-May-13 2:58
professionalDaveAuld12-May-13 2:58 

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

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