Tiny File Manager

Back Back Up Normal Editor

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>FusionCharts Free Documentation</title> <link rel="stylesheet" href="Style.css" type="text/css" /> </head> <body> <table width="98%" border="0" cellspacing="0" cellpadding="3" align="center"> <tr> <td><h2 class="pageHeader">Using FusionCharts with VB.NET (ASP.NET) > Charting Data from Forms </h2></td> </tr> <tr> <td valign="top" class="text">In this section, we'll show you how to use FusionCharts with ASP.NET to plot data collected in forms. We'll build a simple restaurant sales example, where the user will enter the items sold by a restaurant in a given week. This data will be submitted in a form to the server. We'll acquire this data and plot in on a chart. For the sake of simplicity, we wouldn't do any processing on this data. However, your real life applications might process data before presenting it on the chart. Before you go further with this page, we recommend you to please see the previous section "<a href="ASP_BasicExample.html">Basic Examples</a>" as we start off from concepts explained in that page. </td> </tr> <tr> <td valign="top" class="highlightBlock">The code examples contained in this page are present in Download Package > Code > VBNET > FormBased folder. </td> </tr> <tr> <td valign="top" class="text"> </td> </tr> <tr> <td valign="top" class="header">Building the Form </td> </tr> <tr> <td valign="top" class="text">The form is contained in Default.aspx and looks as under: </td> </tr> <tr> <td valign="top" class="text"><img src="Images/Code_Form.gif" class="imageBorder" /></td> </tr> <tr> <td valign="top" class="text">It's a very simple form which submits to Chart.aspx. As such, we wouldn't go into the code of this form. You can directly open the source from download and see it. </td> </tr> <tr> <td valign="top" class="text"> </td> </tr> <tr> <td valign="top" class="header">Requesting the data and Creating the Chart </td> </tr> <tr> <td valign="top" class="text">The work of requesting the data from submitted form and creating the chart is done in Chart.aspx, present in the same folder. It contains the following code: </td> </tr> <tr> <td valign="top" class="codeBlock"><%@ Page Language="VB" AutoEventWireup="false" CodeFile="Chart.aspx.vb" Inherits="FormBased_Chart" %> <HTML>   <HEAD>     <TITLE> FusionCharts Free - Form Based Data Charting Example </TITLE>     <%       'You need to include the following JS file, if you intend to embed the chart using JavaScript.     %>     <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT>   </HEAD>   <BODY>      <asp:Literal ID="FCLiteral" runat="server"></asp:Literal>   </BODY> </HTML> </td> </tr> <tr> <td valign="top" class="text">In the above code we have included FusionCharts.js file to enable us embed the chart using JavaScript. We are also adding an ASP control literal which acts as the container for the charts. The CreateCharts() function does the generation, and is the code behind the file Chart.aspx.vb. Let's take a look at the code behind file, Chart.aspx.vb now: </td> </tr> <tr> <td valign="top" class="text codeBlock">Imports InfoSoftGlobal Partial Class FormBased_Chart Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load       ' Generate chart in Literal Control       FCLiteral.Text = CreateChart() End Sub   Public Function CreateChart() As String     'We first request the data from the form (Default.aspx)     Dim intSoups As String, intSalads As String, intSandwiches As String, intBeverages As     String, intDesserts As String     intSoups = Context.Items("Soups")     intSalads = Context.Items("Salads")     intSandwiches = Context.Items("Sandwiches")     intBeverages = Context.Items("Beverages")     intDesserts = Context.Items("Desserts")     'In this example, we're directly showing this data back on chart.     'In your apps, you can do the required processing and then show the     'relevant data only.     'Now that we've the data in variables, we need to convert this into XML.     'The simplest method to convert data into XML is using string concatenation.     Dim strXML As String     'Initialize <graph> element     strXML = "<graph caption='Sales by Product Category' subCaption='For this week' showPercentageInLabel='1' pieSliceDepth='25' decimalPrecision='0' showNames='1'>"     'Add all data     strXML = strXML & "<set name='Soups' value='" & intSoups & "' />"     strXML = strXML & "<set name='Salads' value='" & intSalads & "' />"     strXML = strXML & "<set name='Sandwiches' value='" & intSandwiches & "' />"     strXML = strXML & "<set name='Beverages' value='" & intBeverages & "' />"     strXML = strXML & "<set name='Desserts' value='" & intDesserts & "' />"     'Close <graph> element     strXML = strXML & "</graph>"     'Create the chart - Pie 3D Chart with data from strXML     Return FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", "", strXML, "Sales", "600", "350", False, False)   End Function End Class </td> </tr> <tr> <td valign="top" class="text"> </td> </tr> <tr> <td valign="top" class="text">As you can see in the above code, we're doing the following: <ul> <li>Import InfoSoftGlobal namespace.</li> <li>Requesting data from the submitted form and storing it in local variables.</li> <li>Creating an XML data document using string concatenation and storing it in strXML variable. </li> <li>Creating a Pie 3D chart using RenderChart() function and passing strXML as dataXML for the chart. RenderChart()is called form the Page_Load event listener. </li> </ul> When you finally run the code, you'll see a chart as under: </td> </tr> <tr> <td valign="top" class="text"><img src="Images/Code_FormChart.jpg" class="imageBorder" /></td> </tr> </table> </body> </html>