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' />
</chart>
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.
