<% 'We've included ../Includes/FusionCharts.asp, which contains functions 'to help us easily embed the charts. %> FusionCharts - AJAX + Database Example <% 'In this example, we show a combination of database + AJAX + 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 detailed data would be dynamically pulled by the column 'chart from another ASP page. There are no page refreshes required. Everything 'is done on one single page. '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, the the drilldown chart (date-wise output report) is provided by AJAX 'each time we need to see detailed data we click on a pie slice 'Using AJAX (we use jQuery here for AJAX implementation) we dynamically submit request 'to the server with the appropriate factoryId. The server 'responds with an HTML for chart as well as XML document, 'which we accept and update a section of our page at client side. %> <% 'You need to include the above JS files, if you intend to embed the chart using JavaScript. 'jQuery is used to perform AJAX submit and handling AJAX response. 'When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors. %> <% 'You need to include the following JS file, if you intend to embed the chart using JavaScript. 'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer 'When you make your own charts, make sure that the path to this JS file is correct. Else, you 'would get JavaScript errors. %>

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

<% Dim oRs, strQuery 'strXML will be used to store the entire XML document generated 'Generate the chart element strXML = "" 'Create the recordset to retrieve data Set oRs = Server.CreateObject("ADODB.Recordset") ' Fetch all factory records strQuery = "select fm.FactoryId, fm.FactoryName, sum(fo.Quantity) as TotOutput from Factory_Master fm, Factory_Output fo where fm.FactoryId=fo.FactoryID group by fm.FactoryId, fm.FactoryName" Set oRs = oConn.Execute(strQuery) 'Iterate through each factory If Not oRs Is Nothing Then While Not oRs.Eof 'Generate 'Note that we're setting link as updateChart(factoryIndex) - JS Function strXML = strXML & "" 'free the resultset oRs.MoveNext Wend End If 'Finally, close element strXML = strXML & "" 'Create the chart - Pie 3D Chart with data from strXML Call renderChart("../../FusionCharts/Pie3D.swf", "", strXML, "FactorySum", 500, 250, false, false) %>

 

The charts in this page have been dynamically generated using data contained in a database.

The detailed charts along with the dynamic data are received using AJAX.