FusionCharts can effectively be used with ASP.NET to plot dynamic data-driven charts. In this example, we'll show a few basic examples to help you get started.

We'll cover the following examples here:

  1. We'll use FusionCharts in ASP.NET with a pre-built Data.xml (which contains data to plot)
  2. We'll then change the above chart into a single page chart using dataXML method.
  3. Finally, we'll use FusionCharts JavaScript class to embed the chart.

Let's quickly see each of them. Before you proceed with the contents in this page, we strictly recommend you to please go through the section "How FusionCharts works?".

 
All code discussed here is present in Download Package > Code > VB_NET > BasicExample folder. To view the solution you need to create a blank solution using your ASP.NET editor, copy or import all files to the solution and run it from there.
 
Setting up the charts for use
In our code, we've used the charts contained in Download Package > Code > VB_NET > FusionCharts folder. When you run your samples, you need to make sure that the SWF files are in proper location.
 
Plotting a chart from data contained in Data.xml

Let's now get to building our first example. In this example, we'll create a "Monthly Unit Sales" chart using dataURL method. For a start, we'll hard code our XML data in a physical XML document Data.xml and then utilize it in our chart contained in an ASP.NET Page (BasicChart.aspx).

Let's first have a look at the XML Data document:

<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'>
    <set label='Jan' value='462' />
    <set label='Feb' value='857' />
    <set label='Mar' value='671' />
    <set label='Apr' value='494' />
    <set label='May' value='761' />
    <set label='Jun' value='960' />
    <set label='Jul' value='629' />
    <set label='Aug' value='622' />
    <set label='Sep' value='376' />
    <set label='Oct' value='494' />
    <set label='Nov' value='761' />
    <set label='Dec' value='960' />
</chart>

This XML is stored as Data.xml in Data Folder under BasicExample folder. It basically contains the data to create a single series chart to show "Monthly Unit Sales". We'll plot this on a Column 3D Chart. Let's see how to do that.

To plot a Chart that consumes this data, you need to include the HTML code to embed a Flash object and then provide the requisite parameters. To make things simpler for you, we've put all this functionality in an ASP.NET class named as InfoSoftGlobal.FusionCharts. This class is contained in Download Package > Code > VB_NET > bin. And, the source FusionCharts.vb is present in Download Package > Code > VB_NET > src. So, whenever you need to work with FusionCharts in ASP.NET, just use the defined functions in this class and then you can work with FusionCharts very easily.

Let's see it in example. BasicChart.aspx contains the following code to render the chart:

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="BasicChart.aspx.vb" Inherits="BasicChart" %>
 <HTML>
  <HEAD>
   <TITLE>FusionCharts - Simple Column 3D Chart </TITLE>
  </HEAD>
  <body>
    <form id='form1' name='form1' method='post' runat="server">
      <%=GetMonthlySalesChartHtml()%>
    </form>
  </body>
 </HTML>
Here, we're basically rendering the output returned by GetMonthlySalesChartHtml() function in the code-behind page. The code-behind page contains the following code:

Imports InfoSoftGlobal

Partial Class BasicChart
   Inherits System.Web.UI.Page

   Public Function GetMonthlySalesChartHtml() As String
      Return FusionCharts.RenderChartHTML("../FusionCharts/Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", False)
   End Function

 ... Other .NET Code...
End Class

 
In this code, we've just imported namespace InfoSoftGlobal
Imports InfoSoftGlobal
 

InfoSoftGlobal namespace contains FusionCharts class. We have used the method RenderChartHTML from this class to return the pertinent HTML output for the chart. To use this function, you can pass the following parameters (in same order):

Parameter Description
chartSWF SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we've specified it as ../../FusionCharts/Column3D.swf
strURL If you intend to use dataURL method for the chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method). In this case, we're using Data.xml file, so we specify Data/Data.xml
strXML If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method). Since we're using dataURL method, we specify this parameter as "".
chartId Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
chartWidth Intended width for the chart (in pixels)
chartHeight Intended height for the chart (in pixels)
debugMode Whether to start the chart in debug mode. Please see Debugging your Charts section for more details on Debug Mode.
registerWithJS Whether to register the chart with JavaScript. Please see FusionCharts and JavaScript section for more details on this.
transparent Whether the the chart should have a transparent background in HTML page. Optional Property.
scaleMode Scaling option of the chart. It can take any value out of the four: "noscale", "exactfit", "noborder" and "showall".
bgColor Background color of the chart. If background color of the chart is not defined in XML, this property would be used to set the chart’s background. E.g. #ff0000
language Preferred language. e.g. EN

When you now run this page, you'll see a chart like the one below.

If you do not see a chart like the one below, please follow the steps listed in Debugging your Charts > Basic Troubleshooting section of this documentation.

 
So, you just saw how simple it is to create a chart using ASP.NET and FusionCharts. Let's now convert the above chart to use dataXML method.
 
Changing the above chart into a single page chart using dataXML method
To convert this chart to use dataXML method, we create another page BasicDataXML.aspx in the same folder with following code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="BasicDataXML.aspx.vb" Inherits="BasicDataXML" %>
<HTML>
   <HEAD>
      <TITLE>FusionCharts - Simple Column 3D Chart using dataXML method </TITLE>
   </HEAD>
<body>
   <form id='form1' name='form1' method='post' runat="server">
     <%=GetMonthlySalesChartHtml()%>
   </form>
</body>
</HTML>

Again, as you can see, in this page, we're just calling the GetMonthlySalesChartHtml() function, which is defined in the code-behind page. The code-behind page contains the following code:

Imports InfoSoftGlobal
Imports System.Text

   Partial Class BasicDataXML
      Inherits System.Web.UI.Page
  

      Public Function GetMonthlySalesChartHtml() As String
         'This page demonstrates the ease of generating charts using InfoSoftGlobal.FusionCharts.
         'For this chart, we've used a string variable to contain our entire XML data.
         'Ideally, you would generate XML data documents at run-time, after interfacing with
         'forms or databases etc. Such examples are also present.
         'Here, we've kept this example very simple.
         'Create an XML data document in a string variable

         Dim xmlData As StringBuilder = New StringBuilder()
         xmlData.Append("<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'>")
         xmlData.Append("<set label='Jan' value='462' />")
         xmlData.Append("<set label='Feb' value='857' />")
         xmlData.Append("<set label='Mar' value='671' />")
         xmlData.Append("<set label='Apr' value='494' />")
         xmlData.Append("<set label='May' value='761' />")
         xmlData.Append("<set label='Jun' value='960' />")
         xmlData.Append("<set label='Jul' value='629' />")
         xmlData.Append("<set label='Aug' value='622' />")
         xmlData.Append("<set label='Sep' value='376' />")
         xmlData.Append("<set label='Oct' value='494' />")
         xmlData.Append("<set label='Nov' value='761' />")
         xmlData.Append("<set label='Dec' value='960' />")
         xmlData.Append("</chart>")
         'Return the chart HTML - Column 3D Chart with data from xmlData variable using dataXML method
         Return FusionCharts.RenderChartHTML("../FusionCharts/Column3D.swf", "", xmlData.ToString(), "myNext", "600", "300", False)
End Function

... Other .NET Code ...
End Class

Here, we've:

  1. Defined the GetMonthlySalesChartHtml method, which is called from the ASP.NET page to render the chart. In this function, we build the XML and HTML.
  2. We've created the XML data document for the chart in an ASP.NET variable xmlData using string concatenation. For this example, we've used StringBuilder object from .NET Framework to help us with string concatenation. For the sake of demo, we're hard-coded our data in this variable. In your applications, you can build this data dynamically after interacting with databases or external sources of data.
  3. Finally, we return the chart HTML using RenderChartHTML() method present in InfoSoftGlobal.FusionCharts class. We've used dataXML method here, and as such we set the dataXML parameter as xmlData. We leave dataURL parameter blank.

When you see this chart, you'll get the same results as before.

 
Using FusionCharts JavaScript class to embed the chart.
If you see the charts from previous examples in the latest versions of Internet Explorer, you'll see a screen as below:

Internet Explorer asks you to "Click and activate..." to use the chart. This is happening because of a technical issue on behalf of Microsoft. As such, all Flash movies need to be clicked once before you can start interacting with them.

However, the good news is that there's a solution to it. This thing happens only when you directly embed the HTML code of the chart. It would NOT happen when you use JavaScript to embed the chart. To see how to embed using JavaScript at code level, please see Creating Your First Chart > JavaScript Embedding Section.

Again, to make things simpler for you, we've provided an ASP.NET function called renderChart() which helps you wrap this JavaScript function in ASP.NET function, so that you don't have to get your hands dirty with JavaScript, Flash and HTML. This function is contained in the previously used InfoSoftGlobal.FusionCharts class.

Let's now quickly put up a sample to show the use of this function. We create another ASP.NET page SimpleChart.aspx to use this function to plot a chart from data contained in our previously created Data.xml file. Like before, SimpleChart.aspx contains the following code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="SimpleChart.aspx.vb" Inherits="SimpleChart" %>
<HTML>
    <HEAD>
        <TITLE>FusionCharts - Simple Column 3D Chart </TITLE>
        <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT>
        <!-- When using the JavaScript embedding method, it's necessary to include the above JS file -->
    </HEAD>
    <body>     
       <form id='form1' name='form1' method='post' runat="server">
         <%=GetMonthlyalesChartHtml()%>
       </form> 
    </body>
</HTML>

In the above code, we've:

  1. Included FusionCharts.js file, which is required when using the JavaScript method. This file contains a JavaScript class that embeds FusionCharts on the client side. This file is present in Download Package > JSClass.
  2. Called GetMonthlyalesChartHtml() method contained in code behind page to render the chart.

The code behind page contains the following:

Imports InfoSoftGlobal

  Partial Class SimpleChart
      Inherits System.Web.UI.Page

   Public Function GetMonthlyalesChartHtml() As String
      'This page demonstrates the ease of generating charts using InfoSoftGlobal.FusionCharts.
      'For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
      'Ideally, you would NOT use a physical data file. Instead you'll have
      'your own ASP scripts virtually relay the XML data document. Such examples are also present.
      'For a head-start, we've kept this example very simple.
      'Create the chart - Column 3D Chart with data from Data/Data.xml

      Return FusionCharts.RenderChart("../FusionCharts/Column3D.swf", "Data/Data.xml", "", "myFirst", "600", "300", False, False)
   End Function

... Other .NET Code ...
End Class

We've just used the RenderChart() method from InfoSoftGlobal.FusionCharts class to return the HTML code for the chart (using JavaScript embedding). Since we're using a physical Data.xml file here, we've used the dataURL method to provide the path of the file.

The RenderChart() method takes in the following parameters:

Parameter Description
chartSWF SWF File Name (and Path) of the chart which you intend to plot. Here, we are plotting a Column 3D chart. So, we've specified it as ../../FusionCharts/Column3D.swf
strURL If you intend to use dataURL method for the chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method). In this case, we're using Data.xml file, so we specify Data/Data.xml
strXML If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method). Since we're using dataURL method, we specify this parameter as "".
chartId Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
chartWidth Intended width for the chart (in pixels)
chartHeight Intended height for the chart (in pixels)
debugMode Whether to start the chart in debug mode. Please see Debugging your Chart Section for more details on Debug Mode.
registerWithJS Whether to register the chart with JavaScript. Please see FusionCharts and JavaScript section for more details on this.
transparent Whether the the chart should have a transparent background in HTML page. Optional Property.
scaleMode Scaling option of the chart. It can take any value out of the four: "noscale", "exactfit", "noborder" and "showall".
bgColor Background color of the chart. If background color of the chart is not defined in XML, this property would be used to set the chart’s background. E.g. #ff0000
language Preferred language. e.g. EN
When you now view the chart, you'll see that no activation is required even in Internet Explorer.