Forms are widely used to gather inputs from visitors.
FusionCharts has the ability to plot charts using the data entered on the
forms. The steps mentioned below examine the steps in detail.
1.
Create an ASP.NET file by selecting Website | Add New Item option and add
a reference to FusionCharts.js file under the <head> section as shown below
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
2.
You can add Form controls by creating a table from within Visual Studio
2010 (Table | Insert Table) as shown below.
Figure 2
3.
Double click the Button control and add the following line of code:
StringBuilder xmlData = new StringBuilder();
xmlData.Append("<chart caption='IPL Points' subCaption='For Season 2011 so far'
showPercentValues='1' pieSliceDepth='30' showBorder='1'>");
xmlData.AppendFormat("<set label='Mumbai' value='{0}' />", txtMumbai.Text);
xmlData.AppendFormat("<set label='Chennai' value='{0}' />", txtChennai.Text);
xmlData.AppendFormat("<set label='Kochi' value='{0}' />", txtKochi.Text);
xmlData.Append("</chart>");
Literal1.Text = FusionCharts.RenderChart("FusionCharts/Pie3D.swf", "",
xmlData.ToString(), "Sales", "500", "300", false, false);As you can see above, the values captured from the form are
appended to an XML file and the chart is drawn by calling the RenderChart()
method. We have created an object of the StringBuilder class and then created
the XML file using the Append() and AppendFormat() methods. Finally, a literal
control has been added and the chart is plotted. The final output will look
like as shown in figure given below.
Figure 3
