Working with FusionCharts using ASP.NET
page 3 of 6
by Anand Narayanaswamy
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 41674/ 65

Creating Charts from an XML File

Below are a series of steps you have to follow to create charts from an XML file:

1.   Start Visual Studio 2010

2.   Select File | New | Web Site and choose ASP.NET Empty Web Site and Visual C# from the Installed Templates section.

You need to add data somewhere to create a chart. For the purpose of this walkthrough, we will make use of an XML file.

3.   From within Visual Studio 2010, select Website | Add New Item | XML File and click Add button. A new file will be created inside the Solution Explorer. I will use the following data for this example.

<chart caption='Indian Premier League Points' xAxisName='Teams' yAxisName='Points' 
  showValues='0' formatNumberScale='0' showBorder='0'>
  <set label='Mumbai Indians' value='16' />
  <set label='Chennai Super Kings' value='14' />
  <set label='Kolkata Riders' value='12' />
  <set label='Bangalore Royals' value='14' />
  <set label='Kochi Tuskers' value='10' />
  <set label='Kings XI Punjab' value='10' />

You should rename the XML file to something which is understandable.  As I mentioned above, you should copy folders named bin and FusionCharts from Code/CS folder to your working directory. Select the path inside the Solution Explorer and select Refresh Folder option. You should view the copied folders inside the explorer window.

4.   Add a button and Literal Control from Visual Studio Toolbox to The Design view of Default.aspx file. 

Before proceeding further, you should call FusionCharts.js file located inside FusionCharts folder.

<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>

The above code should be placed inside the Head section.

5.  Double Click Button control and add the following piece of code

Literal1.Text = FusionCharts.RenderChart("FusionCharts/Column3D.swf", 
"XMLFile.xml", "", "myFirst", "700", "500", false, true);

As you can see, we call the RenderCharts() method which accepts several arguments. The shockwave file contains elements for drawing charts. You can increase or decrease the height and width of the chart by altering the values.

That's it. You can now execute the project. The chart appears immediately after clicking the Button control as shown below.

Figure 1

You can also place the code inside Form_Load() event so that the chart will be displayed upon loading of the application.

View Entire Article

User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-17 8:00:56 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search