Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/vbnet_js_xml.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">Combining FusionCharts, ASP.NET & JavaScript (dataXML)
method
</h2> </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this example, we will see how to <strong> provide updated XML data to chart using JavaScript </strong>
functions. The chart will simply accept that XML data and then render. </p>
<p class="highlightBlock">This method can effectively be used in your AJAX
applications, where your JavaScript code gets the updated XML from server and
then provides it to charts locally. You can process the data received from AJAX
Calls, build XML from it and finally provide it to the chart. </p>
<p><strong>Before you proceed with the contents in this page, we strictly recommend you
to please go through the sections "How FusionCharts works?" and
"<a href="VBNET_DB.html">Plotting from Database Example</a>", as we'll directly use a lot of concepts defined in
those sections.</strong></p>
<p class="highlightBlock">The code discussed in this example is present in<span class="codeInline"> Download Package > Code > VBNET > DB_JS </span>folder. </p> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Defining the applicaton </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let us first define what we want to achieve in this example. We'll carry on from our previous drill-down example and convert it into a single page example. In our previous example, we were showing the Production Summary of all the factories in a pie chart. When the user clicked on a pie slice, he was taken to another page, where a detailed date-wise chart was shown for the required factory. </p>
<p>In this example we will put both the charts together on a single page where clicking on a pie slice of the Production Summary chart will open the detailed chart on the same page without page refresh.</p>
<ol>
<li>
Contain both the pie chart (summary) and column chart (detailed) in one page (<span class="codeInline">Default.aspx</span>).</li>
<li>
When the page loads, the pie chart would use
<span class="codeInline">dataXML</span>
method to show summary of all factories. This data will be built in
<span class="codeInline">Default.aspx</span>
itself. </li>
<li>
There will be a JavaScript array named as
<span class="codeInline">data</span>
in this page. This array will contain detailed data for the factories. The
array will be dynamically built using ASP.NET and then outputted as JavaScript
code. </li>
<li>
Apart from the data in JavaScript, we'll also have a local JavaScript function
<span class="codeInline">updateChart()</span>, which would process the data in
this array and convert it to XML data document, for direct usage by the column
chart. </li>
<li>
The column chart would initialize with no data, as the user has not selected a
factory initially. We'll customize the "<span class="codeInline">No data to display</span>"
message of the chart to show a friendly message.</li>
<li>
The pie chart would have JavaScript links defined for each pie slice. This
JavaScript links refer to
<span class="codeInline">updateChart()</span>
JavaScript function present on the same page. We'll later see how to hand code
this function. When a pie is clicked, the
<span class="codeInline">factory ID </span>is passed to this function. </li>
<li>
The
<span class="codeInline"> updateChart()</span>
function is responsible for udapting the column chart. It generates the XML
data from data stored in JavaScript
<span class="codeInline">data</span>
array and conveys it to the column chart.</li>
<li>
The column chart would now accept this XML data, parse it and finally render.</li>
</ol> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Creating the page - Default.aspx </td>
</tr>
<tr>
<td valign="top" class="text">Both the charts and JavaScript functions to
manipulate the charts is contained in
<span class="codeInline">Default.aspx</span>. It has the following code: </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p><%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="DB_JS_Default" %></p>
<p><HTML><br />
<HEAD> <br />
<TITLE><br />
FusionCharts Free - Client Side Dynamic Chart ( using Database) Example<br />
</TITLE><br />
<br />
<SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"><br />
<span class="codeComment">//You need to include the above JS file, if you intend to embed the chart using JavaScript.</span><br />
</SCRIPT><br />
<br />
<SCRIPT LANGUAGE="JavaScript" ><br />
<span class="codeComment">//Here, we use a mix of server side script (ASP.NET) and JavaScript to<br />
//render our data for factory chart in JavaScript variables. We'll later<br />
//utilize this data to dynamically plot charts.<br />
<br />
//All our data is stored in the data array. From ASP.NET, we iterate through<br />
//each recordset of data and then store it as nested arrays in this data array.</span><br />
var data = new Array();<br />
<br />
<span class="codeComment">//Write the data as JavaScript variables here</span><strong><br />
<%=jsVarString%></strong><br />
<br />
<span class="codeComment">//The data is now present as arrays in JavaScript. Local JavaScript functions<br />
//can access it and make use of it. We'll see how to make use of it.<br />
<br />
/** <br />
* updateChart method is invoked when the user clicks on a pie slice.<br />
* In this method, we get the index of the factory, build the XML data<br />
* for that that factory, using data stored in data array, and finally<br />
* update the Column Chart.<br />
* @param factoryIndex Sequential Index of the factory.<br />
*/ </span><br />
function updateChart(factoryIndex)<br />
{<br />
<span class="codeComment">//defining array of colors<br />
//We also initiate a counter variable to help us cyclically rotate through<br />
//the array of colors.</span><br />
var FC_ColorCounter=0;<br />
<span class="codeComment">//var arr_FCColors= new Array(20);</span><br />
var arr_FCColors= new Array("1941A5" , "AFD8F8", "F6BD0F", "8BBA00", "A66EDD", "F984A1", "CCCC00", "999999", "0099CC", "FF0000", "006F00", "0099FF", "FF66CC", "669966", "7C7CB4", "FF9933", "9900FF", "99FFCC", "CCCCFF", "669900");<br />
<br />
<br />
<span class="codeComment"> //Storage for XML data document</span><br />
var strXML = "<graph caption='Factory " + factoryIndex + " Output ' subcaption='(In Units)' xAxisName='Date' decimalPrecision='0' rotateNames='1' >";<br />
<br />
<span class="codeComment">//Add <set> elements</span><br />
var i=0;<br />
for (i=0; i<data[factoryIndex].length; i++)<br />
{<br />
strXML = strXML + "<set name='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' color='"+ arr_FCColors[++FC_ColorCounter % arr_FCColors.length] +"' />";<br />
}<br />
<br />
<span class="codeComment">//Closing graph Element</span><br />
strXML = strXML + "</graph>";<br />
<br />
<span class="codeComment">//Update it's XML</span><br />
updateChartXML("FactoryDetailed",strXML);</p>
<p> }<br />
</SCRIPT><br />
<br />
</HEAD><br />
<br />
<BODY><br />
<b> <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal><br />
<asp:Literal ID="FCLiteral2" runat="server"></asp:Literal></b><br />
</BODY><br />
<br />
</HTML></p>
<p><br>
<br>
</p>
<p><strong><u>Code in code behind page (<span class="codeInline">Default.aspx</span>.vb file in DB_JS folder):</u></strong> <br>
<br />
Imports DataConnection<br />
Imports InfoSoftGlobal</p>
<p><br />
Partial Class DB_JS_Default<br />
Inherits System.Web.UI.Page<br />
Public jsVarString As String<br />
Public indexCount As String</p>
<p> Protected Sub <b>Page_Load</b>(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load</p>
<p> <span class="codeComment"> ' This string will be built in ASP.Net and rendered at run-time as JavaScript</span><br />
<b> GetjsVar()</b><span class="codeComment"><br />
' Generate chart in Literal Control<br />
' Pie chart with sum of production for each of the factories</span><br />
<b> FCLiteral1.Text = CreateChart()</b><span class="codeComment"><br />
' Generate chart in Literal Control<br />
' Column 2D Chart with changed "No data to display" message</span><br />
<b> FCLiteral2.Text = ShowNextChart()</b><br />
End Sub</p>
<p><br />
<br />
Public Sub <strong>GetjsVar()</strong></p>
<p> <span class="codeComment">'In this example, we show a combination of database + JavaScript rendering using FusionCharts.</span></p>
<p> <span class="codeComment"> 'The entire app (page) can be summarized as under. This app shows the break-down<br />
'of factory wise output generated. In a pie chart, we first show the sum of quantity<br />
'generated by each factory. These pie slices, when clicked would show detailed date-wise<br />
'output of that factory.</span></p>
<p> <span class="codeComment"> 'The XML data for the pie chart is fully created in ASP.NET at run-time. ASP.NET interacts<br />
'with the database and creates the XML for this.<br />
'Now, for the column chart (date-wise output report), we do not submit request to the server.<br />
'Instead we store the data for the factories in JavaScript arrays. These JavaScript<br />
'arrays are rendered by our ASP.NET Code (at run-time). We also have a few defined JavaScript<br />
'functions which react to the click event of pie slice.</span></p>
<p> <span class="codeComment"> 'We've used an Access database which is present in ../DB/FactoryDB.mdb. <br />
'It just contains two tables, which are linked to each other. </span></p>
<p> <span class="codeComment"> 'Before the page is rendered, we need to connect to the database and get the<br />
'data, as we'll need to convert this data into JavaScript variables.</span></p>
<p> <span class="codeComment"> 'The following string will contain the JS Data and variables.<br />
'This string will be built in ASP.NET and rendered at run-time as JavaScript.</span></p>
<p> jsVarString = ""</p>
<p> <span class="codeComment">'Database Objects</span><br />
Dim oRs As DbConn, strQuery As String<br />
indexCount = 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 />
indexCount = indexCount + 1</p>
<p> <span class="codeComment">'Create JavaScript code to add sub-array to data array<br />
'data is an array defined in JavaScript (see below)<br />
'We've added vbTab & vbCRLF to data so that if you View Source of the<br />
'output HTML, it will appear properly. It helps during debugging</span><br />
jsVarString = jsVarString & vbTab & vbTab & "data[" & indexCount & "] = new Array();" & vbCrLf</p>
<p> <span class="codeComment">'Now create second recordset to get date-wise details for this factory</span><br />
strQuery = "select * from Factory_Output where FactoryId=" & oRs.ReadData("FactoryId").ToString() & " order by DatePro Asc" & vbCrLf<br />
Dim oRs2 As New DbConn(strQuery)<br />
While oRs2.ReadData.Read()<br />
<span class="codeComment">'Put this data into JavaScript as another nested array.<br />
'Finally the array would look like data[factoryIndex][i][dataLabel,dataValue]</span><br />
jsVarString = jsVarString & vbTab & vbTab & "data[" & indexCount & "].push(new Array('" & Convert.ToDateTime(oRs2.ReadData("DatePro")).ToString("dd/MM/yyyy") & "'," & oRs2.ReadData("Quantity").ToString() & "));" & vbCrLf</p>
<p> End While<br />
<span class="codeComment">'Close recordset</span><br />
oRs2.ReadData.Close()</p>
<p> End While<br />
oRs.ReadData.Read()</p>
<p> End Sub</p>
<p> Public Function <strong>CreateChart()</strong> As String<br />
<span class="codeComment">'Initialize the Pie chart with sum of production for each of the factories<br />
'strXML will be used to store the entire XML document generated</span><br />
Dim strXML As String, strQuery As String</p>
<p> <span class="codeComment">'Re-initialize Index</span><br />
indexCount = 0</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='20' formatNumberScale='0' >"</p>
<p> <span class="codeComment">'Iterate through each factory</span><br />
strQuery = "select * from Factory_Master"<br />
Dim oRs As New DbConn(strQuery)</p>
<p> While oRs.ReadData.Read()<br />
<span class="codeComment"> 'Update index count - sequential</span><br />
indexCount = indexCount + 1<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()<br />
Dim oRs2 As New DbConn(strQuery)<br />
oRs2.ReadData.Read()<br />
<span class="codeComment"> 'Generate <set name='..' value='..' link='..' /><br />
'Note that we are setting link as updateChart(factoryIndex) - JS Function</span><br />
strXML = strXML & "<set name='" & oRs.ReadData("FactoryName").ToString() & "' value='" & oRs2.ReadData("TotOutput").ToString() & "' link='javascript:updateChart(" & indexCount & ")'/>"<br />
<span class="codeComment">'Close recordset</span><br />
oRs2.ReadData.Close()<br />
oRs2 = Nothing<br />
End While<br />
<span class="codeComment">'Finally, close <graph> element</span><br />
strXML = strXML & "</graph>"<br />
oRs.ReadData.Read()<br />
oRs = Nothing</p>
<p> <span class="codeComment"> 'Create the chart - Pie 3D Chart with data from strXML</span><br />
<strong>Return FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", "", strXML, "FactorySum", "650", "300", False, True)</strong></p>
<p> End Function<br />
<br />
Public Function <strong>ShowNextChart()</strong> As String<br />
<span class="codeComment">'Column 2D Chart with changed "No data to display" message<br />
'We initialize the chart with <graph></graph></span><br />
<strong> Return FusionCharts.RenderChart("../FusionCharts/FCF_Column2D.swf?ChartNoDataText=Please click on a pie slice above to view detailed data.", "", "<graph></graph>", "FactoryDetailed", "600", "300", False, True)</strong><br />
End Function<br />
<br />
End Class</p> </td>
</tr>
<tr>
<td valign="top" class="text"><p> In this page, before rendering any HTML code, we first
fetch all the data in database and sotre it as JavaScript array. To do so, we use string
concatenation in ASP.NET variables to store all data as JavaScript array code.
Once the JavaScript code is built in our ASP.NET variable, we write it out in
the
<span class="codeInline"><SCRIPT></span>
section of HTML
<span class="codeInline"><HEAD></span>.
</p>
<p class="codeInline"><SCRIPT LANGUAGE="JavaScript" ></p>
<p class="codeInline">var data = new Array();^%^</p>
<p><span class="codeInline"><strong><%=jsVarString%></strong><br />
<br />
........<br />
<br />
</SCRIPT></span></p>
<p>Also, the <span class="codeInline">Page_Load</span> event listener calls the <span class="codeInline">GetjsVar()</span> function which creates and intialises all the JavaScript variables.</p>
<p><br />
<br />
If you run this page and view the source JavaScript code, you'll see the
following: </p></td>
</tr>
<tr>
<td valign="top" class="codeBlock">var data = new Array();<br />
<br />
data[1] = new Array();<br />
data[1].push(new Array('1/1',21));<br />
data[1].push(new Array('2/1',23));<br />
data[1].push(new Array('3/1',22));<br />
data[1].push(new Array('4/1',24));<br />
data[1].push(new Array('5/1',32));<br />
data[1].push(new Array('6/1',21));<br />
data[1].push(new Array('7/1',34));<br />
data[1].push(new Array('8/1',32));<br />
data[1].push(new Array('9/1',32));<br />
data[1].push(new Array('10/1',23));<br />
data[1].push(new Array('11/1',23));<br />
data[1].push(new Array('12/1',32));<br />
data[1].push(new Array('13/1',53));<br />
data[1].push(new Array('14/1',23));<br />
data[1].push(new Array('15/1',26));<br />
data[1].push(new Array('16/1',43));<br />
data[1].push(new Array('17/1',16));<br />
data[1].push(new Array('18/1',45));<br />
data[1].push(new Array('19/1',65));<br />
data[1].push(new Array('20/1',54));<br />
data[2] = new Array();<br />
data[2].push(new Array('1/1',121));<br />
data[2].push(new Array('2/1',123));<br />
data[2].push(new Array('3/1',122));<br />
data[2].push(new Array('4/1',124));<br />
data[2].push(new Array('5/1',132));<br />
data[2].push(new Array('6/1',121));<br />
data[2].push(new Array('7/1',134));<br />
data[2].push(new Array('8/1',132));<br />
data[2].push(new Array('9/1',132));<br />
data[2].push(new Array('10/1',123));<br />
data[2].push(new Array('11/1',123));<br />
data[2].push(new Array('12/1',132));<br />
data[2].push(new Array('13/1',153));<br />
data[2].push(new Array('14/1',123));<br />
data[2].push(new Array('15/1',126));<br />
data[2].push(new Array('16/1',143));<br />
data[2].push(new Array('17/1',116));<br />
data[2].push(new Array('18/1',145));<br />
data[2].push(new Array('19/1',165));<br />
data[2].push(new Array('20/1',154));<br />
data[3] = new Array();<br />
data[3].push(new Array('1/1',54));<br />
data[3].push(new Array('2/1',56));<br />
data[3].push(new Array('3/1',89));<br />
data[3].push(new Array('4/1',56));<br />
data[3].push(new Array('5/1',98));<br />
data[3].push(new Array('6/1',76));<br />
data[3].push(new Array('7/1',65));<br />
data[3].push(new Array('8/1',45));<br />
data[3].push(new Array('9/1',75));<br />
data[3].push(new Array('10/1',54));<br />
data[3].push(new Array('11/1',75));<br />
data[3].push(new Array('12/1',76));<br />
data[3].push(new Array('13/1',34));<br />
data[3].push(new Array('14/1',97));<br />
data[3].push(new Array('15/1',55));<br />
data[3].push(new Array('16/1',43));<br />
data[3].push(new Array('17/1',16));<br />
data[3].push(new Array('18/1',35));<br />
data[3].push(new Array('19/1',78));<br />
data[3].push(new Array('20/1',75));</td>
</tr>
<tr>
<td valign="top" class="text"><p>You can clearly see that our ASP.NET code has
outputted JavaScript code that can now locally create an array and feed it with
requisite data.
</p>
<p>Now, before we get to the JavaScript functions, let's first see what we're doing
in our ASP.NET Code.
<ul>
<li>We first create the XML data document for Pie chart - summary of factory output.
For each
<span class="codeInline"><set></span>, we provide a JavaScript link to
the
<span class="codeInline">updateChart()</span>
function and pass the factory ID to it as shown in the line below:<br />
<span class="codeInline"><br />
strXML = strXML & "<set name='" & oRs.ReadData("FactoryName").ToString() & "' value='" & oRs2.ReadData("TotOutput").ToString() & "' link='javascript:updateChart(" & indexCount & ")'/>"</span><br />
<br />
</li>
<li>We now render the Pie 3D chart using dataXML method. The Pie 3D chart has its
DOM Id as
<span class="codeInline">FactorySum</span>:<br />
<span class="codeInline"><br />
FusionCharts.RenderChart("../FusionCharts/FCF_Pie3D.swf", "", <strong>strXML</strong>, "<strong>FactorySum</strong>", "650", "300", False, True)</span><br />
<br />
</li><li>Now, we render an empty Column 2D chart with
<span class="codeInline"><graph></graph></span> data initially. We also change the "<span class="codeInline">No data to display.</span>"
error to a friendly and intuitive "<span class="codeInline">Please select a factory from pie chart above to view detailed data.</span>"
This chart has its <span class="codeInline">DOM Id</span> as
<span class="codeInline">FactoryDetailed</span>.<br />
<span class="codeInline"><br />
FusionCharts.RenderChart("../FusionCharts/FCF_Column2D.swf?<strong>ChartNoDataText=Please click on a pie slice above to view detailed data.</strong>", "", "<strong><graph></graph></strong>", "<strong>FactoryDetailed</strong>", "600", "300", False, True)</span></li>
</ul>
<p>Effectively, our page is now set to show two charts. The pie chart shows the
summary data provided to it using dataXML method. The column chart shows the
above "friendly" error message. Now, when each pie slice is clicked,
the
<span class="codeInline">updateChart()</span>
JavaScript function is called and the
<span class="codeInline">factoryID</span>
of the pie is passed to it. This function is responsible for updating the
column chart and contains the following code: </p> </td>
</tr>
<tr>
<td valign="top" class="codeBlock"><p>function updateChart(factoryIndex){<br />
<span class="codeComment"> //defining array of colors<br />
//We also initiate a counter variable to help us cyclically rotate through<br />
//the array of colors.</span><br />
<span class="codeComment"> </span>var FC_ColorCounter=0;<br />
<span class="codeComment"> //var arr_FCColors= new Array(20);</span><br />
<span class="codeComment"> </span>var arr_FCColors= new Array("1941A5" , "AFD8F8", "F6BD0F", "8BBA00", "A66EDD", "F984A1", "CCCC00", "999999", "0099CC", "FF0000", "006F00", "0099FF", "FF66CC", "669966", "7C7CB4", "FF9933", "9900FF", "99FFCC", "CCCCFF", "669900");<br />
<br />
<br />
<span class="codeComment"> //Storage for XML data document</span><br />
<span class="codeComment"> </span>var strXML = "<graph caption='Factory " + factoryIndex + " Output ' subcaption='(In Units)' xAxisName='Date' decimalPrecision='0' rotateNames='1' >";<br />
<br />
<span class="codeComment"> //Add <set> elements</span><br />
<span class="codeComment"> </span>var i=0;<br />
<span class="codeComment"> </span>for (i=0; i<data[factoryIndex].length; i++){<br />
strXML = strXML + "<set name='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' color='"+ arr_FCColors[++FC_ColorCounter % arr_FCColors.length] +"' />";<br />
<span class="codeComment"> </span>}<br />
<br />
<span class="codeComment"> //Closing graph Element</span><br />
<span class="codeComment"> </span>strXML = strXML + "</graph>";<br />
<br />
<span class="codeComment"> //Update it's XML</span><br />
<span class="codeComment"> </span>updateChartXML("FactoryDetailed",strXML);</p>
<p> }</p></td>
</tr>
<tr>
<td valign="top" class="text">Here,<br />
<ol>
<li>
We first create the XML data document for the column chart by iterating through
data contained in our JavaScript
<span class="codeInline">data</span>
array. </li>
<li>This XML data is stored in <span class="codeInline">strXML</span>. </li>
<li>
Thereafter, we convery this XML data and DOM Id
<span class="codeInline">FactoryDetailed</span> to <span class="codeInline">updateChartXML()</span>
method of the chart.</li>
<li>
This updates the chart with new data. </li>
</ol>
<p>When you now see the application, the initial state would look as under: </p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_JS_XML_Ini.jpg" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text">And when you click on a pie slice, the following
would appear on the same page (without involving any browser refreshes): </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Code_JS_XML_Fin.jpg" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text">This example demonstrated a very basic sample of the
integration capabilities possible with FusionCharts Free. For advanced demos, you
can see and download our FusionCharts Blueprint/Demo Applications. </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat