In this section we will build up simple charts using ASP.NET. 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?".

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:

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 InfoSoftGlobal.FusionCharts class inside the dll file FusionCharts.dll. This dll file is contained in Download Package > Code > VB_NET > bin. So, whenever you need to work with FusionCharts in ASP.NET, just use the defined functions in the InfoSoftGlobal.FusionCharts 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:

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.

Here,

1. We've defined the CreateCharts method, which is called from the ASP.NET page to render the chart. The CreateCharts function is called upon the page load event and returns the text into the previously specified ASP literal server control. 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 strXML using string concatenation. For the sake of demo, we've 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 strXML. We leave dataURL parameter blank.

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

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.

In the design page we have added an ASP literal server control which acts as a FusionCharts container. Along with that we have attached an ASP.NET Page_Load event listener 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:

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. The Page_Load event listener calls the internal RenderChart() method and redirects the HTML into the ASP.NET literal control block.

RenderChart() method is contained in InfoSoftGlobal.FusionCharts class; it returns 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: