Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/cs_db.html
<?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 C# (ASP.NET) > Plotting data from a database </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we'll show you how to use FusionCharts and ASP.NET to plot charts from data contained in a database. We'll create a pie chart to show "Production by Factory" using: </p>
<ul>
<li><span class="codeInline">dataXML</span> method first.</li>
<li>Thereafter, we'll convert this chart to use <span class="codeInline">dataURL</span> method. </li>
</ul>
<p>For the sake of ease, we'll use an Access Database. The database is present in <span class="codeInline">Download Package > Code > VBNET > DB </span>folder. You can, however, use any database with FusionCharts including MS SQL, Oracle, MySQL etc. </p>
<p><strong>Before you go further with this page, we recommend you to please see the previous section "<a href="CS_BasicExample.html">Basic Examples</a>" as we start off from concepts explained in that page. </strong></p>
<p class="highlightBlock">The code examples contained in this page are present in <span class="codeInline">Download Package > Code > CNET > DBExample </span> folder. The Access database is present in <span class="codeInline">Download Package > Code > CNET ></span> <span class="codeInline">DB</span>. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Database Structure </td>
</tr>
<tr>
<td valign="top" class="text">Before we code the ASP.NET pages to retrieve data, let's quickly have a look at the database structure. </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_DB.gif" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>The database contains just 2 tables:</p>
<ol>
<li><span class="codeInline">Factory_Master</span>: To store the name and id of each factory</li>
<li><span class="codeInline">Factory_Output</span>: To store the number of units produced by each factory for a given date.</li>
</ol>
<p>For demonstration, we've fed some dummy data in the database. Let's now shift our attention to the ASP.NET page that will interact with the database, fetch data and then render a chart. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Building the ASP.NET Page for dataXML Method </td>
</tr>
<tr>
<td valign="top" class="text">The ASP.NET page for <span class="codeInline">dataXML</span> method example is named as <span class="codeInline">BasicDBExample.aspx</span> (in <span class="codeInline">DBExample</span> folder). It contains the following code: </td>
</tr>
<tr>
<td valign="top" class="text codeBlock"><p><%@ Page Language="C#" AutoEventWireup="false" CodeFile="BasicDBExample.aspx.cs" Inherits="DBExample_BasicDBExample" %></p>
<p><HTML><br />
<HEAD><br />
<TITLE> FusionCharts Free - Database Example </TITLE><br />
<%<br />
<span class="codeComment">//You need to include the following JS file, if you intend to embed the chart using JavaScript.</span><br />
%> <br />
<strong><SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT></strong><br />
</HEAD></p>
<p> <BODY><br />
<strong><asp:Literal ID="FCLiteral" runat="server"></asp:Literal></strong><br />
</BODY><br />
</HTML></p></td>
</tr>
<tr>
<td valign="top" class="text">In the above code, we have included <span class="codeInline">FusionCharts.js</span> file to render chart through javascript. We are also adding an ASP control literal which acts as the container for the charts. The <span class="codeInline"><strong>CreateCharts()</strong></span> function does the generation, and is the code behind the file, <span class="codeInline">BasicDBExample.aspx.cs</span>. Let's take a look at the code behind file: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p>using System;<br />
using System.Data;<br />
using System.Configuration;<br />
using System.Collections;<br />
using System.Web;<br />
using System.Web.Security;<br />
using System.Web.UI;<br />
using System.Web.UI.WebControls;<br />
using System.Web.UI.WebControls.WebParts;<br />
using System.Web.UI.HtmlControls;<br />
using DataConnection;<br />
using InfoSoftGlobal;</p>
<p>public partial class DBExample_BasicDBExample : System.Web.UI.Page<br />
{</p>
<p> <b> </b>protected void <b>Page_Load(object sender, EventArgs e)</b><br />
<b> </b>{<br />
<b> </b><span class="codeComment">// Generate chart in Literal Control</span><br />
<b> FCLiteral.Text = CreateChart();</b><br />
<b> </b>}</p>
<p> </p>
<p><b> </b>public string <b>CreateChart()</b>{<br />
<b> </b><span class="codeComment">//In this example, we show how to connect FusionCharts to a database.<br />
<b> </b>//For the sake of ease, we've used an Access database which is present in<br />
<b> </b>//../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each<br />
<b> </b>//other. </span></p>
<p> <b> </b><span class="codeComment">//Database Objects - Initialization</span><br />
<b> </b>DbConn oRs; string strQuery;</p>
<p> <b> </b><span class="codeComment">//strXML will be used to store the entire XML document generated</span><br />
<b> </b>string strXML;</p>
<p> <b> </b><span class="codeComment">//Generate the graph element</span><br />
<b> </b>strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>";</p>
<p> <b> </b><span class="codeComment">//SQL Query</span><br />
<b> </b>strQuery = "select a.FactoryId,a.FactoryName, sum(b.Quantity) as TotOutput from factory_master a,factory_output b where a.FactoryId=b.FactoryId group by a.FactoryId,a.FactoryName";</p>
<p> <b> </b><span class="codeComment">// Open Data Reader</span><br />
<b> </b>oRs = new DbConn(strQuery);</p>
<p> <b> </b><span class="codeComment">//Iterate through each factory</span><br />
<b> </b>while(oRs.ReadData.Read()){<br />
<br />
<b> </b><span class="codeComment">//Generate <set name='..' value='..' /> </span><br />
<b> </b>strXML += "<set name='" + oRs.ReadData["FactoryName"].ToString() + "' value='" + oRs.ReadData["TotOutput"].ToString() + "' />";<br />
<br />
<b> </b>}<br />
<b> </b><span class="codeComment">// Close Data Reader</span><br />
<b> </b>oRs.ReadData.Close();<br />
<b> </b><span class="codeBlock">//Finally, close <graph> element</span><br />
<b> </b>strXML += "</graph>";</p>
<p> <b> </b><span class="codeComment">//Create the chart - Pie 3D Chart with data from strXML</span><br />
<b> return FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", "", strXML, "FactorySum", "650", "450", false, false);</b><br />
}</p>
<p> }</p></td>
</tr>
<tr>
<td valign="top" class="text"><p>The following actions are taking place in this code:</p>
<ol>
<li>We first include <span class="codeInline">DataConnection</span> and <span class="codeInline">InfoSoftGlobal</span> namespace. <span class="codeInline"><a href="#DataConn">DataConnection</a></span> namespace is contained within <span class="codeInline">DataConn</span> VB.NET class inside <span class="codeInline">App_Code</span> folder of Download pack. It contains the connection parameters to connect to Access database. And <span class="codeInline">InfoSoftGlobal</span> namespace is from <span class="codeInline">FusionCharts.dll</span> file in <span class="codeInline">bin</span> directory. </li>
<li>We declare variables <span class="codeInline">strQuery</span> to store SQL query that fetches data from database and <span class="codeInline">strXML</span> to store XML data.</li>
<li>Thereafter, we generate the XML data document by iterating through the recordset and store it in <span class="codeInline">strXML</span> variable. </li>
<li>Finally, we render the chart using <span class="codeInline">RenderChart()</span> method and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML</span>. <span class="codeInline">RenderChart()is called form the Page_Load</span><span class="codeInline"> event lsitener. </span> </li>
</ol>
<p>When you now run the code, you'll get an output as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_DBOut.jpg" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Converting the example to use dataURL method </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let's now convert this example to use dataURL method. As previously explained, in dataURL mode, you need two pages:</p>
<ol>
<li><strong>Chart Container Page</strong> - The page which embeds the HTML code to render the chart. This page also tells the chart where to load the data from. We'll name this page as <span class="codeInline">Default.aspx</span>. </li>
<li><strong>Data Provider Page</strong> - This page provides the XML data to the chart. We'll name this page as <span class="codeInline">PieData.aspx</span>.</li>
</ol>
<p class="highlightBlock">The pages in this example are contained in<span class="codeInline"> Download Package > Code > CNET > DB_dataURL</span> folder. </p> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Chart Container Page - <span class="codeInline">Default.aspx </span></td>
</tr>
<tr>
<td valign="top" class="text"><span class="codeInline">Default.aspx</span> contains the following code to render the chart: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><%@ Page Language="C#" %><br />
<%@ Import Namespace="InfoSoftGlobal" %><br />
<br />
<script runat="server"></p>
<p> protected void <b>Page_Load(object sender, EventArgs e)</b><br />
{</p>
<p class="codeComment"> //In this example, we show how to connect FusionCharts to a database <br />
//using dataURL method. In our other examples, we've used dataXML method<br />
//where the XML is generated in the same page as chart. Here, the XML data<br />
//for the chart would be generated in PieData.asp.</p>
<p> <span class="codeComment"> //For the sake of ease, we've used an Access database which is present in<br />
//../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each<br />
//other.</span></p>
<p> <span class="codeComment"> //Variable to contain dataURL</span><br />
string strDataURL;<span class="codeComment"><br />
//the asp script in piedata.asp interacts with the database, <br />
//converts the data into proper XML form and finally <br />
//relays XML data document to the chart</span><br />
strDataURL = "PieData.aspx";</p>
<p> <span class="codeComment">//Create the chart - Pie 3D Chart with dataURL as strDataURL</span><br />
<b>FCLiteral.Text=FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", strDataURL, "", "FactorySum", "650", "450", false, false);</b><br />
}<br />
</script></p>
<p><HTML><br />
<HEAD><br />
<TITLE><br />
FusionCharts Free - dataURL and Database Example<br />
</TITLE><br />
<%<br />
<span class="codeComment">//You need to include the following JS file, if you intend to embed the chart using JavaScript.</span><br />
%> <br />
<strong><SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT></strong><br />
</HEAD><br />
<br />
<BODY></p>
<p> <b><asp:Literal ID="FCLiteral" runat="server"></asp:Literal></b><br />
<br />
</BODY><br />
</HTML></p> </td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we:</p>
<ol>
<li>Include <span class="codeInline">InfoSoftGlobal</span> namespace and <span class="codeInline">FusionCharts.js</span> JavaScript class.<span class="codeInline"></span></li>
<li>Create the <span class="codeInline">dataURL</span> string and store it in <span class="codeInline">strDataURL</span> variable. </li>
<li>Finally, we render the chart using <span class="codeInline">RenderChart()</span> method and set <span class="codeInline">dataURL</span> as <span class="codeInline">strDataUR</span>. <span class="codeInline">RenderChart()is called form the Page_Load event lsitener. </span></li>
</ol> </td>
</tr>
<tr>
<td valign="top" class="header">Creating the data provider page <span class="codeInline">PieData.aspx </span></td>
</tr>
<tr>
<td valign="top" class="text"><span class="codeInline">PieData.aspx</span> contains the following code to output XML Data: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><%@ Page Language="C#" Debug="true" %><br />
<%@ Import Namespace="DataConnection" %></p>
<p><script runat="server"><br />
protected void <b>Page_Load(object sender, EventArgs e)</b><br />
{<span class="codeComment"><br />
//This page generates the XML data for the Pie Chart contained in<br />
//Default.asp. </span></p>
<p> <span class="codeComment"> //For the sake of ease, we've used an Access database which is present in<br />
//../App_Data/FactoryDB.mdb. It just contains two tables, which are linked to each<br />
//other. </span></p>
<p> <span class="codeComment"> //Database Objects - Initialization</span><br />
DbConn oRs; string strQuery;</p>
<p> <span class="codeComment"> //strXML will be used to store the entire XML document generated</span><br />
string strXML;</p>
<p> <span class="codeComment"> //Generate the graph element</span><br />
strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>";</p>
<p> <span class="codeComment"> //Iterate through each factory</span><br />
strQuery = "select * from Factory_Master";<br />
oRs = new DbConn(strQuery);</p>
<p> while (oRs.ReadData.Read())<br />
{<br />
<span class="codeComment"> //Now create second recordset to get details for this factory</span><br />
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + oRs.ReadData["FactoryId"].ToString();</p>
<p> DbConn oRs2 = new DbConn(strQuery);<br />
oRs2.ReadData.Read();<br />
<span class="codeComment"> //Generate <set name='..' value='..'/> </span><br />
strXML += "<set name='" + oRs.ReadData["FactoryName"].ToString() + "' value='" + oRs2.ReadData["TotOutput"].ToString() + "' />";<br />
<span class="codeComment"> //Close recordset</span><br />
oRs2.ReadData.Close();</p>
<p> }<br />
oRs.ReadData.Close();<br />
<span class="codeComment"> //Finally, close <graph> element</span><br />
strXML += "</graph>";</p>
<p> <span class="codeComment"> //Set Proper output content-type</span><br />
<b>Response.ContentType = "text/xml";</b></p>
<p> <span class="codeComment"> //Just write out the XML data<br />
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER</span><br />
<b>Response.Write(strXML);</b></p>
<p> }<br />
</script></p>
<p><br />
</p></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above page:</p>
<ol>
<li>Include <a href="#DataConn">DataConnection Namespace</a> to fetch data from database. </li>
<li>We generate the data and store it in <span class="codeInline">strXML</span> variable</li>
<li>Finally, we write this data to output stream without any HTML tags. </li>
</ol>
<p>When you view this page, you'll get the same output as before. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td class="text" valign="top"><a name="DataConn" class="header" id="DataConn">Inside DataConnection Namespace</a> </td>
</tr>
<tr>
<td class="text" valign="top">We have used DataConnection Namespace in the above code and in all subsequent Database examples. Using this class we establish connection to the MS Access database with ADO.NET component. Let's go through the lines of code inside this class: </td>
</tr>
<tr>
<td class="text" valign="top"> </td>
</tr>
<tr>
<td class="codeBlock" valign="top"><p>using System;<br>
using System.Data;<br>
using System.Data.Odbc;<br>
using System.Web;<br>
using System.Configuration;</p>
<p>namespace DataConnection<br>
{<br>
<span class="codeComment">/// <summary><br>
/// DataBase Connection Class.<br>
/// </summary></span><br>
public class DbConn<br>
{ <br>
<br>
<span class="codeComment"> // Create a database Connection. using here Access Database<br>
// Return type object of OdbcConnection</span></p>
<p> public OdbcConnection connection;<br>
public OdbcDataReader ReadData;<br>
public OdbcCommand aCommand;<br>
<span class="codeComment">/// <summary><br>
/// Data Connection and get Data Reader<br>
/// </summary><br>
/// <param name="strQuery">SQL Query</param></span><br>
public DbConn(string strQuery)<br>
{<br>
<span class="codeComment">// MS Access DataBase Connection - Defined in Web.Config</span><br>
string connectionName = "MSAccessConnection";</p>
<p> <span class="codeComment">// SQL Server DataBase Connection - Defined in Web.Config<br>
//string connectionName = "SQLServerConnection";</span></p>
<p> <span class="codeComment"> // Creating Connection string using web.config connection string</span><br>
string ConnectionString = ConfigurationManager.ConnectionStrings[connectionName].ConnectionString;<br>
try<br>
{<br>
<span class="codeComment"> // create connection object</span><br>
connection = new OdbcConnection();<br>
<span class="codeComment">// set connection string</span><br>
connection.ConnectionString = ConnectionString;<br>
<span class="codeComment">// open connection</span><br>
connection.Open();<br>
<span class="codeComment">// get reader</span><br>
GetReader(strQuery);<br>
}<br>
catch (Exception e)<br>
{<br>
HttpContext.Current.Response.Write(e.Message.ToString());<br>
}<br>
<br>
}</p>
<p> <span class="codeComment">// Create an instance dataReader<br>
// Return type object of OdbcDataReader<br>
/// <summary><br>
/// Get Data Reader<br>
/// </summary><br>
/// <param name="strQuery">SQL Query</param></span><br>
public void GetReader(string strQuery)<br>
{<br>
<span class="codeComment">// Create a Command object</span><br>
aCommand = new OdbcCommand(strQuery, connection);<br>
<br>
<span class="codeComment">// Create data reader object using strQuery string<br>
// Auto close connection</span><br>
ReadData = aCommand.ExecuteReader(CommandBehavior.CloseConnection);<br>
<br>
}<br>
<br>
}<br>
}</p></td>
</tr>
<tr>
<td class="text" valign="top"> </td>
</tr>
<tr>
<td class="text" valign="top">What it does:<br>
<ul>
<li>Set up Connection as per the connection string defined in <span class="codeInline">web.config</span> file.<br>
<br>
<span class="codeInline"><connectionStrings><br>
<add name="MSAccessConnection" providerName="System.Data.Odbc" connectionString="Driver={Microsoft Access Driver (*.mdb)};Dbq=|DataDirectory|\FactoryDB.mdb"/><br>
</connectionStrings></span><br>
<br>
<br>
To change your connection to any other database server, you only need to setup <span class="codeInline">web.config</span> file. <br>
<br>
</li>
<li>The code to connect to SQL Server Database is also given in comment form. To connect to SQL Server you have to activate the corresponding code. <br>
</li>
<li>It accepts SQL Query, executes it and returns the result as ASP.NET <span class="codeInline">DataReader</span> object -<span class="codeInline">ReadData</span><span class="text">. </span> </li>
</ul></td>
</tr>
<tr>
<td class="text" valign="top"> </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat