Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/cs_array.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) > Charting data from Array </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we'll show you how to use FusionCharts with ASP.NET to plot charts from data contained in ASP.NET arrays. We'll cover the following examples here:</p>
<ul>
<li>Creating a single series chart from data contained in arrays</li>
<li>Creating a multi-series chart from data contained in arrays </li>
</ul>
<p><strong>Before you go further with this page, we recommend you to please see the previous section "<a href="VBNET_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 > ArrayExample</span> folder. </p></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Creating a single series chart from data contained in arrays</td>
</tr>
<tr>
<td valign="top" class="text">The code to create a single series chart is contained in <span class="codeInline">SingleSeries.aspx</span> and can be listed as under: <br /></td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><%@ Page Language="C#" AutoEventWireup="false" CodeFile="SingleSeries.aspx.cs" Inherits="ArrayExample_SingleSeries" %></p>
<p><HTML><br />
<HEAD><br />
<TITLE> <br />
FusionCharts Free - Array Example using Single Series Column 3D Chart <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 />
<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"><p>In the above code, we first include <span class="codeInline">FusionCharts.js</span> 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 <span class="codeInline"><strong>CreateCharts()</strong></span> function does the generation, and is the code behind the file to <span class="codeInline">SingleSeries.aspx.cs</span>.</p>
<p>Let's see the code of the code behind file <span class="codeInline">SingleSeries.aspx.cs</span>: </p></td>
</tr>
<tr>
<td valign="top" class="text 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 Utilities;<br />
using InfoSoftGlobal;</p>
<p>public partial class ArrayExample_SingleSeries : System.Web.UI.Page<br />
{</p>
<p> protected void <b>Page_Load(object sender, EventArgs e)</b><br />
{<br />
// Generate chart in Literal Control<br />
<b> FCLiteral.Text = CreateChart();</b><br />
}</p>
<p><br />
public string <strong>CreateChart()</strong><br />
{</p>
<p> <span class="codeComment">//In this example, we plot a single series chart from data contained<br />
//in an array. The array will have two columns - first one for data label<br />
//and the next one for data values.</span></p>
<p> <span class="codeComment"> //Let's store the sales data for 6 products in our array). We also store<br />
//the name of products. </span><br />
string [,] arrData=new string[6,2];<br />
<span class="codeComment">// Creating util Object</span><br />
Util util=new Util();<br />
<span class="codeComment">//Store Name of Products</span><br />
arrData[0,0] = "Product A";<br />
arrData[1,0] = "Product B";<br />
arrData[2,0] = "Product C";<br />
arrData[3,0] = "Product D";<br />
arrData[4,0] = "Product E";<br />
arrData[5,0] = "Product F";<br />
<span class="codeComment">//Store sales data</span><br />
arrData[0,1] = "567500";<br />
arrData[1,1] = "815300";<br />
arrData[2,1] = "556800";<br />
arrData[3,1] = "734500";<br />
arrData[4,1] = "676800";<br />
arrData[5,1] = "648500";</p>
<p> <span class="codeComment"> //Now, we need to convert this data into XML. We convert using string concatenation.</span><br />
string strXML; int i;</p>
<p> <span class="codeComment">//Initialize <graph> element</span><br />
strXML = "<graph caption='Sales by Product' numberPrefix='$' formatNumberScale='0' decimalPrecision='0'>";</p>
<p> <span class="codeComment">//Convert data to XML and append</span><br />
for(i=0;i<6;i++){<br />
<span class="codeComment">//add values using <set name='...' value='...' color='...'/></span><br />
strXML += "<set name='" + arrData[i,0] + "' value='" + arrData[i,1] + "' color='" + util.getFCColor() + "' />";<br />
}<br />
<span class="codeComment">//Close <graph> element</span><br />
strXML += "</graph>";</p>
<p> <span class="codeComment">//Create the chart - Column 3D Chart with data contained in strXML</span><br />
<strong>return FusionCharts.RenderChart("../FusionCharts/FCF_Column3D.swf", "", strXML, "productSales", "600", "300", false, false);</strong></p>
<p> }<br />
}</p> </td>
</tr>
<tr>
<td valign="top" class="text"><ul>
<li>In the above example, we first include <span class="codeInline">Utilites</span> and <span class="codeInline">InfoSoftGlobal</span> namespace.</li>
<li>Then we define the <span class="codeInline">CreateChart()</span> function. </li>
<li>Inside the function, we declare an array <span class="codeInline">arrData</span> to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values.</li>
<li>We define a variable <span class="codeInline">strXML</span> to store the entire XML data. To build the XML, we iterate through the array and using string concatenation. </li>
<li>Finally, we render the chart using <span class="codeInline">RenderChart()</span> function 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>
</ul>
<p class="highlightBlock">We included <span class="codeInline">Utilities</span> namespace, which contains the default color set for the FusionCharts. These colors in Hex code are optimized to give a snazzy look to the charts. The <span class="codeInline">getFCColor()</span> function in cyclic iteration returns these color values.</p>
<p>When you view the chart, you'll see a chart as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_ArraySS.jpg" /></td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Creating a multi-series chart from data contained in arrays </td>
</tr>
<tr>
<td valign="top" class="text">Let us now create a multi-series chart from data contained in arrays. We create a file <span class="codeInline">MultiSeries.aspx</span> with the following code: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><%@ Page Language="C#" AutoEventWireup="false" CodeFile="MultiSeries.aspx.cs" <br />
Inherits="ArrayExample_MultiSeries" %></p>
<p><HTML><br />
<HEAD><br />
<TITLE><br />
FusionCharts Free - Array Example using Multi Series Column 3D Chart<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><br />
<strong><asp:Literal ID="FCLiteral" runat="server"></asp:Literal></strong><br />
</BODY><br />
</HTML></p></td>
</tr>
<tr>
<td valign="top" class="text"><p>In the above code, we first include <span class="codeInline">FusionCharts.js</span> file to enable us embed the chart using JavaScript. We also add the ASP literal control which acts as the container for the chart. </p>
<p>Take a look at the code behind file <span class="codeInline">MultiSeries.aspx.cs</span>: </p></td>
</tr>
<tr>
<td valign="top" class="text 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 InfoSoftGlobal;</p>
<p>public partial class ArrayExample_MultiSeries : System.Web.UI.Page<br />
{</p>
<p> protected void <b>Page_Load(object sender, EventArgs e)</b><br />
{<br />
<span class="codeComment">// Generate chart in Literal Control</span><br />
<b> FCLiteral.Text = CreateChart();</b><br />
}</p>
<p><br />
public string <strong>CreateChart()</strong><br />
{</p>
<p> <span class="codeComment">//In this example, we plot a multi series chart from data contained<br />
//in an array. The array will have three columns - first one for data label (product)<br />
//and the next two for data values. The first data value column would store sales information<br />
//for current year and the second one for previous year.</span></p>
<p> <span class="codeComment"> //Let's store the sales data for 6 products in our array. We also store<br />
//the name of products. </span><br />
string [,] arrData =new string[6, 3];<br />
<span class="codeComment">//Store Name of Products</span><br />
arrData[0, 0] = "Product A";<br />
arrData[1, 0] = "Product B";<br />
arrData[2, 0] = "Product C";<br />
arrData[3, 0] = "Product D";<br />
arrData[4, 0] = "Product E";<br />
arrData[5, 0] = "Product F";<br />
<span class="codeComment">//Store sales data for current year</span><br />
arrData[0, 1] = "567500";<br />
arrData[1, 1] = "815300";<br />
arrData[2, 1] = "556800";<br />
arrData[3, 1] = "734500";;<br />
arrData[4, 1] = "676800";<br />
arrData[5, 1] = "648500";<br />
<span class="codeComment">//Store sales data for previous year</span><br />
arrData[0, 2] = "547300";<br />
arrData[1, 2] = "584500";<br />
arrData[2, 2] = "754000";<br />
arrData[3, 2] = "456300";<br />
arrData[4, 2] = "754500";<br />
arrData[5, 2] = "437600";</p>
<p> <span class="codeComment">//Now, we need to convert this data into multi-series XML. <br />
//We convert using string concatenation.<br />
//strXML - Stores the entire XML<br />
//strCategories - Stores XML for the <categories> and child <category> elements<br />
//strDataCurr - Stores XML for current year's sales<br />
//strDataPrev - Stores XML for previous year's sales</span><br />
string strXML, strCategories, strDataCurr, strDataPrev;<br />
int i;</p>
<p> <span class="codeComment"> //Initialize <graph> element</span><br />
strXML = "<graph caption='Sales by Product' numberPrefix='$' decimalPrecision='0' >";</p>
<p> <span class="codeComment">//Initialize <categories> element - necessary to generate a multi-series chart</span><br />
strCategories = "<categories>";</p>
<p> <span class="codeComment">//Initiate <dataset> elements</span><br />
strDataCurr = "<dataset seriesName='Current Year' color='AFD8F8'>";<br />
strDataPrev = "<dataset seriesName='Previous Year' color='F6BD0F'>";</p>
<p> <span class="codeComment"> //Iterate through the data </span><br />
for(i=0;i<6;i++)<br />
{<br />
<span class="codeComment">//Append <category name='...' /> to strCategories</span><br />
strCategories += "<category name='" + arrData[i, 0] + "' />";<br />
<span class="codeComment">//Add <set value='...' /> to both the datasets</span><br />
strDataCurr += "<set value='" + arrData[i, 1] + "' />";<br />
strDataPrev += "<set value='" + arrData[i, 2] + "' />";<br />
}</p>
<p> <span class="codeComment">//Close <categories> element</span><br />
strCategories += "</categories>";</p>
<p> <span class="codeComment"> //Close <dataset> elements</span><br />
strDataCurr += "</dataset>";<br />
strDataPrev += "</dataset>";</p>
<p> <span class="codeComment">//Assemble the entire XML now</span><br />
strXML += strCategories + strDataCurr + strDataPrev + "</graph>";</p>
<p> <span class="codeComment">//Create the chart - MS Column 3D Chart with data contained in strXML</span><br />
<strong>return FusionCharts.RenderChart("../FusionCharts/FCF_MSColumn3D.swf", "", strXML, "productSales", "600", "300", false, false);</strong></p>
<p> }</p>
<p>}</p>
</td>
</tr>
<tr>
<td valign="top" class="text"><ul>
<li>In the above code we include InfoSoftGlobal namespace.</li>
<li>Then we define the <span class="codeInline">CreateChart()</span> function. </li>
<li>We declare an array <span class="codeInline">arrData</span> to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year.</li>
<li>We define a variable <span class="codeInline">strXML</span> to store the entire XML data.</li>
<li>We also define <span class="codeInline">strCategories</span>, <span class="codeInline">strDataCurr</span> and <span class="codeInline">strDataPrev</span> variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation.</li>
<li>We concatenate the entire XML in <span class="codeInline">strXML</span>. </li>
<li>Finally, we render the chart using <span class="codeInline">RenderChart()</span> function 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 listener</span>. </li>
</ul></td>
</tr>
<tr>
<td valign="top" class="text"><p>When you view the chart, you'll see a chart as under: </p>
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_ArrayMS.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" class="highlightBlock">In <span class="codeInline">Download Package > Code > CNET > ArrayExample</span>, we've more example codes to create Stacked and Combination Charts too, which we have not explained here, as they're similar in concept. You can directly see the code if you want to. </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat