Creating self updating animated charts with Fusion Charts and ASP.NET

About Fusion Charts
Fusion Charts is a flash based charting package that can be used with almost any server side programming language. The free version of their charts includes some 22 different types of charts which can be animated. The best part of the free version is,it comes with unbelievably liberal license agreement, which allows you to use them even in your commercial applications. You can read the license for free version here: http://www.fusioncharts.com/free/TermsOfUse.asp .

Creating a new *.aspx Page
Create a new *.aspx page. Add a script manager to it. Make sure that the 'EnablePageMethods' property is set to 'true'.This is required, since we will be using WebMethods via AJAX to fetch data for our graph at regular interval.Now add a reference to the FusionCharts.js file in our new aspx page. Somewhere on the page create a DIV tag and assign it an id of "mychart". We will use Fusion Chart's javascript API to create and display a new bar chart inside this div.

Writing server side code
I am going to create a six data point bar chart. So we write a "WebMethod" in the code behind ,which returns an array of six numbers. The code is simple:

 [WebMethod]
    public static  string GetDataForBarChart()
    {
        if (IsDataChanged(20) || HttpContext.Current.Session["StartedBC"] ==null)
        {
            StringBuilder sb = new StringBuilder();
            Random r = new Random();
            sb.Append(r.Next(2000)); sb.Append(",");
            sb.Append(r.Next(2000)); sb.Append(",");
            sb.Append(r.Next(2000)); sb.Append(",");
            sb.Append(r.Next(2000)); sb.Append(",");
            sb.Append(r.Next(2000)); sb.Append(",");
            sb.Append(r.Next(2000));
            HttpContext.Current.Session["StartedBC"] = 1;
            return sb.ToString();
        }
        else
        { return "NULL"; }

    }
 private static bool IsDataChanged(int someid)
    {
        Random r = new Random();
        int i = r.Next(10);
        return (i % 9 == 0)?true:false;
    }

Writing the javascript
The javascript for chart can be divided into three parts. The first one creates the chart object, second one does AJAX to get new data and last one generates XML required for binding to the data returned by server. One thing I want to tell here is, you can directly return XML from the server, instead of CSV. I used CSV, because I felt it was lighter and XML generation could be handled at the client end using javascript. Given below is the code:

<script  type="text/javascript"  src="FusionCharts.js"></script>
<script type="text/javascript">
  function init()
    {   
        var chart1 = new FusionCharts("Charts/FCF_Column3D.swf", "chart1Id", "500", "400");	
        chart1.setDataXML("<graph></graph>");	
        chart1.render("mychart"); 
        PageMethods.GetDataForBarChart(OnCompleteBarChart,null);
    }

    function OnCompleteBarChart(a)
    {   if(a != "NULL")
        updateChartXML("chart1Id",GenerateXMLForBarChart(a));
        window.setTimeout("PageMethods.GetDataForBarChart(OnCompleteBarChart,null)",10500);
    }

   function GenerateXMLForBarChart(x)
    {
       var arr = x.split(",");
       if(arr.length==6)
       {
       var xml= "<graph caption='Page Visits Summary' subcaption='For the year 2009' xAxisName='Month' yAxisName='Page Visits' yAxisMaxValue='2100' >";
      xml+="<set name='Jan' value='"+arr[0]+"'   color='AFD8F8' />";
	xml+="<set name='Feb' value='"+arr[1]+"'  color='F6BD0F' />";
	xml+="<set name='Mar' value='"+arr[2]+"'  color='8BBA00' />";
	xml+="<set name='Apr' value='"+arr[3]+"'  color='FF8E46' />";
	xml+="<set name='May' value='"+arr[4]+"'  color='008E8E' />";
  	xml+="<set name='Jun' value='"+arr[5]+"'  color='D64646' />";
  	xml+="</graph>";
        return xml;
        }
    
    }
</script>

Thats all!
Now run the page, you should be able to see the chart. In my code, I have specified a timeout of 10500 ms between two AJAX calls for updating the chart. This should be sufficiently high, other wise the chart would refresh before.

Thanks for reading. Hope you found it useful. For suggestions,questions or criticism , please drop a comment.