Animated Charts with FusionCharts and ASP.NET

Visualizing data in form of colorful graphs makes data look interesting and easy to comprehend and if you animate then it's like icing on the cake.

FusionCharts is the name that comes in mind when we talk about cool animated chart and graphs. FusionCharts library has been in market for years and has been very successful in this area. There are many big companies who use their product but along with paid product FusionCharts also provide a free open source version of the library it's known as FusionCharts Free. You can use this library for both personal and commercial use.

Today we will integrate this library in our ASP.NET website. I should also point out that generating graph on client side either using jQuery, Flash or Silverlight is much more efficient than using its server side counterpart because all processing happens on client machine so all server has to do is serve data and let client side of program decide how it wants to use the data, second, you can add a lots of cool effects on client side which are far less complex.

Screenshot:

In order to get started you will have to download FusionCharts free library from here: http://www.fusioncharts.com/goodies/fusioncharts-free/

After downloading the library, unzip the folder and add Charts folder along with all files inside (contains SWF files) to your asp.net website.

 

Then add reference to FusionCharts.dll in your website project by navigating to yourFolder -> FusionChartsFree -> Code -> CSNET -> bin

Once reference is added and your project FusionCharts free are ready to be used.

To use charts in this library, we will create a public class which will return XML data in the form of string and then we will pass that data to FusionCharts' RenderChartHTML method.

Sample data:

public static class GenerateChartData

{

    public static string SimpleChartData()

{

StringBuilder sb = new StringBuilder();

sb.Append(@"<graph caption='Monthly Unit Sales' xAxisName='Month'

yAxisName='Units' showNames='1' decimalPrecision='0'

formatNumberScale='0'>");

Random rnd = new Random();

 

for (int i = 0; i < 20; i++)

{

 

sb.Append("<set name='Val_" + i + "' value='" + rnd.Next(500) + "' color='" + Color.FromArgb(rnd.Next(10,99), rnd.Next(99,150), rnd.Next(150,255)).ToArgb() + "' />");

 

}

sb.Append("</graph>");

return sb.ToString();

}

}

 

Now we will add a literal control on our aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Literal ID="chart" runat="server"></asp:Literal>

</div>

</form>

</body>

</html>

 

Then populate chart data using following code in code behind file:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using InfoSoftGlobal;

 

public partial class FC_SimpleCharts_ColumnChart2d : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

chart.Text = FusionCharts.RenderChartHTML("../SWF/Charts/FCF_Column2D.swf", "", GenerateChartData.SimpleChartData(), "columnChart", "1000", "400", false);

}

}

 

That's it….

you can check out other chart types from Charts folder as well. Just change ../SWF/Charts/FCF_Column2D.swf 's swf file to any other swf file.

 

Tags: , , ,

ASP.NET | XML