<%@ Language=VBScript %> FusionCharts - Database + JavaScript Example <% 'We've included ../Includes/FusionCharts.asp, which contains functions 'to help us easily embed the charts. %> <% 'In this example, we show a combination of database + JavaScript rendering using FusionCharts. 'The entire app (page) can be summarized as under. This app shows the break-down 'of factory wise output generated. In a pie chart, we first show the sum of quantity 'generated by each factory. These pie slices, when clicked would show detailed date-wise 'output of that factory. 'The XML data for the pie chart is fully created in ASP at run-time. ASP interacts 'with the database and creates the XML for this. 'Now, for the column chart (date-wise output report), we do not submit request to the server. 'Instead we store the data for the factories in JavaScript arrays. These JavaScript 'arrays are rendered by our ASP Code (at run-time). We also have a few defined JavaScript 'functions which react to the click event of pie slice. 'We've used an Access database which is present in ../DB/FactoryDB.mdb. 'It just contains two tables, which are linked to each other. 'Before the page is rendered, we need to connect to the database and get the 'data, as we'll need to convert this data into JavaScript variables. 'The following string will contain the JS Data and variables. 'This string will be built in ASP and rendered at run-time as JavaScript. Dim jsVarString jsVarString = "" 'Database Objects Dim oRs, oRs2, strQuery, indexCount indexCount = 0 'Create the recordset to retrieve data Set oRs = Server.CreateObject("ADODB.Recordset") 'Iterate through each factory strQuery = "select * from Factory_Master" Set oRs = oConn.Execute(strQuery) While not oRs.EOF indexCount = indexCount + 1 'Create JavaScript code to add sub-array to data array 'data is an array defined in JavaScript (see below) 'We've added vbTab & vbCRLF to data so that if you View Source of the 'output HTML, it will appear properly. It helps during debugging jsVarString = jsVarString & vbTab & vbTab & "data[" & indexCount & "] = new Array();" & vbCRLF 'Now create second recordset to get date-wise details for this factory Set oRs2 = Server.CreateObject("ADODB.Recordset") strQuery = "select * from Factory_Output where FactoryId=" & ors("FactoryId") & " order by DatePro Asc" & vbCRLF Set oRs2 = oConn.Execute(strQuery) While not oRs2.EOF 'Put this data into JavaScript as another nested array. 'Finally the array would look like data[factoryIndex][i][dataLabel,dataValue] jsVarString = jsVarString & vbTab & vbTab & "data[" & indexCount & "].push(new Array('" & datePart("d",ors2("DatePro")) & "/" & datePart("m",ors2("DatePro")) & "'," & ors2("Quantity") & "));" & vbCRLF oRs2.MoveNext() Wend 'Close recordset Set oRs2 = Nothing oRs.MoveNext() Wend %>

Inter-connected charts - Click on any pie slice to see detailed chart below

<% 'Initialize the Pie chart with sum of production for each of the factories 'strXML will be used to store the entire XML document generated Dim strXML 'Re-initialize Index indexCount=0 'Generate the chart element strXML = "" 'Move back to first index of the factory master recordset oRs.MoveFirst() While Not oRs.Eof 'Update index count - sequential indexCount = indexCount + 1 'Now create second recordset to get details for this factory Set oRs2 = Server.CreateObject("ADODB.Recordset") strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" & ors("FactoryId") Set oRs2 = oConn.Execute(strQuery) 'Generate 'Note that we're setting link as updateChart(factoryIndex) - JS Function strXML = strXML & "" 'Close recordset Set oRs2 = Nothing oRs.MoveNext Wend 'Finally, close element strXML = strXML & "" Set oRs = nothing 'Create the chart - Pie 3D Chart with data from strXML Call renderChart("../../FusionCharts/Pie3D.swf", "", strXML, "FactorySum", 500, 250, false, false) %>
<% 'Column 2D Chart with changed "No data to display" message 'We initialize the chart with Call renderChart("../../FusionCharts/Column2D.swf?ChartNoDataText=Please select a factory from pie chart above to view detailed data.", "", "", "FactoryDetailed", 600, 250, false, false) %>

 

The charts in this page have been dynamically generated using data contained in a database. We've NOT hard-coded the data in JavaScript