FusionCharts is a very cool cross-platform charting library – it offers huge variety of chart types and mind-blowing special effects. It also offers wide variety of chart rendering options both client- and server-side.

One such option is to render chart in an ASP.NET application. FusionCharts.dll that you get with the package offers handy FusionCharts.RenderChart method that generates all the client-side code you need to display a beautiful chart. Usually it is used something like this:

xLabel1.text = FusionCharts.RenderChart("FusionCharts/Pie2D.swf", "", sChartXmlData, sChartID, iChartWidth, iChartHeight, False, True)

where xLabel1 is a Label or Literal control in your ASPX page and FusionCharts.RenderChart is a function that accepts number of parameters, like chart type, chart XML data, dimensions etc.

It works very well until you want to render the chart inside of Microsoft Ajax UpdatePanel – then nothing works. This happens because FusionCharts.RenderChart function emits some HTML along with JavaScript that do not work during partial postback. FusionCharts suggest hooking up to UpdatePanel life-cycle events, but it’s seems like an overkill, and often doesn’t work (especially if you have a complex project, which this hookup can interfere with). But there’s an alternative solution.

Let’s take a look at what output of FusionCharts.RenderChart looks like:

<!-- Using ASP.NET VB FusionCharts v3.2.2.1 Wrapper and JavaScript rendering -->

<!-- START Script Block for Chart xfsChart -->  

<div id='xMyChartDiv' >  Chart.  </div>  

<script type="text/javascript">  

if (FusionCharts && FusionCharts('xfsChart') ) FusionCharts('xfsChart').dispose();  

//<snip>...script continues..<snip>
</script>

<!-- END Script Block for Chart xfsChart -->

This generated-for-client code consist of HTML with the DIV where chart will be rendered (DIV gets its ID by adding “Div” suffix to the chart ID you supplied) and some JavaScript to render the chart. What if we could run that JavaScript ourselves?

We can. Microsoft’s ScriptManager that controls the UpdatePanel has a handy RegisterStartupScript method that executes JavaScript during partial postbacks. So, if we extract just the JavaScript from the generated client-code, we can execute it on our own.

But first – don’t forget to add the DIV container to your HTML markup inside of UpdatePanel – because it will not be generated automatically.

<div id='xMyChartDiv'></div>

Next we need to extract just the JavaScript part e.g. part between <script> and </script> tags. Once that part is extracted we can run it via ScriptManager.RegisterStartupScript method:

Dim sRederedChart as String = FusionCharts.RenderChart("FusionCharts/Pie2D.swf", "", sChartXmlData, "xMyChart", iChartWidth, iChartHeight, False, True)
Dim sStartScriptTag As String = "<script type=""text/javascript"">"
Dim sEndScriptTag As String = "</script>"
Dim sJsCode as string = sRederedChart.Substring(sRederedChart.IndexOf(sStartScriptTag) + sStartScriptTag.Length, sRederedChart.IndexOf(sEndScriptTag) - sRederedChart.IndexOf(sStartScriptTag) - sStartScriptTag.Length) & ";"

ScriptManager.RegisterStartupScript(Me, Me.GetType, "JSCode", sJsCode, True)

Line 1 generates client-side code for the chart, but instead of outputting it directly to the page stores it in a String variable.
Lines 2-4 extract just JavaScript portion of the client-side code
Line 6 pushes this code to the client where it will be executed rendering chart inside of a DIV we specified above.

That’s it – no additional script references needed, no messy hookup – it just works. To make this approach a bit more universal instead of direct use of ScriptManager.RegisterStartupScript a wrapper function can be used that will correctly embed JavaScript code both during normal and partial postback.