Table of Contents
FusionCharts XT with ASP.NET
- Part 1 – Create JavaScript charts in ASP.NET (C#)
- Part 2 – Plot JavaScript charts using SQL Server data
- Part 3 – Create Drill-Down charts in ASP.NET(C#)
- Part 4 – Create LinkedCharts in ASP.NET(C#)
FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll
. By referencing this library, rendering charts is just one line of code! Let us see how.. FusionChartsXT_with_ASPNET
.Solution Explorer > Add New Item > Web Form
. Keep the name as Using_MS_SQL_Server.aspx
.Charts
folder from the FusionCharts Download Package and paste it in the Solution Explorer.Using_MS_SQL_Server.aspx
:[cceWl lang=’html’]Solution Explorer > Add ASP.NET Folder > App_Data
.App_Data > Add Existing Item > Browse
to the folder containing Sample SQL Server Database.Solution Explorer > Add Reference > Browse
. Now browse to FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll
.Using_MS_SQL_Server.aspx.cs
, include the namespace of this library by writing using InfoSoftGlobal;
FC_Orders
and FC_OrderDetails
: Using_MS_SQL_Server.aspx
, create a Literal
tag with a unique ID. In the code-behind page, write the following code. In-line comments will help you understand what we’re doing: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.Sql; using System.Data.SqlClient; using System.Text; using InfoSoftGlobal; public partial class Using_MS_SQL_Server : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Construct the connection string to interface with the SQL Server Database string connStr = @"Data Source=.SQLEXPRESS;AttachDbFilename=C:UsersFusion ChartsDocumentsVisual Studio 2010WebSitesFusionChartsXT_with_ASPNETApp_DataFusionChartsDB.mdf;Integrated Security=True;User Instance=True"; // Initialize the string which would contain the chart data in XML format StringBuilder xmlStr = new StringBuilder(); // Provide the relevant customization attributes to the chart xmlStr.Append(""); // Create a SQLConnection object using (SqlConnection conn = new SqlConnection(connStr)) { // Establish the connection with the database conn.Open(); // Construct and execute SQL query which would return the total amount of sales for each year SqlCommand query = new SqlCommand("SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)", conn); // Begin iterating through the result set SqlDataReader rst = query.ExecuteReader(); while (rst.Read()) { // Construct the chart data in XML format xmlStr.AppendFormat("", rst["yr"].ToString(), rst["AMOUNT"].ToString()); } // End the XML string xmlStr.Append(""); // Close the result set Reader object and the Connection object rst.Close(); conn.Close(); // Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag chart_from_db.Text = FusionCharts.RenderChart( "FusionChartsXT/Column2D.swf", // Path to chart's SWF "", // Leave blank when using Data String method xmlStr.ToString(), // xmlStr contains the chart data "annual_revenue", // Unique chart ID "640", "340", // Width & Height of chart false, // Disable Debug Mode true); // Register with JavaScript object } } }Save and run this project. This is the chart that you should see in your browser:
Using_MS_SQL_Server.aspx
page for this.DataProvider.aspx
.Keep the code in Using_MS_SQL_Server.aspx
as it is. Delete all but the first line from DataProvider.aspx
. From Using_MS_SQL_Server.aspx.cs
, cut the contents of the Page_Load()
method, till before the RenderChart()
method’s line. Paste it in DataProvider.aspx.cs
. This is what you should have in DataProvider.aspx.cs
: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.Sql; using System.Data.SqlClient; using System.Text; using InfoSoftGlobal; public partial class DataProvider : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Construct the connection string to interface with the SQL Server Database string connStr = @"Data Source=.SQLEXPRESS;AttachDbFilename=C:UsersFusion ChartsDocumentsVisual Studio 2010WebSitesFusionChartsXT_with_ASPNETApp_DataFusionChartsDB.mdf;Integrated Security=True;User Instance=True"; // Initialize the string which would contain the chart data in XML format StringBuilder xmlStr = new StringBuilder(); // Provide the relevant customization attributes to the chart xmlStr.Append(""); // Create a SQLConnection object using (SqlConnection conn = new SqlConnection(connStr)) { // Establish the connection with the database conn.Open(); // Construct and execute SQL query which would return the total amount of sales for each year SqlCommand query = new SqlCommand("SELECT SUM(FC_OrderDetails.UnitPrice * FC_OrderDetails.Quantity) AS AMOUNT, YEAR(FC_Orders.OrderDate) AS yr FROM FC_Orders INNER JOIN FC_OrderDetails ON FC_OrderDetails.OrderID = FC_Orders.OrderID GROUP BY YEAR(FC_Orders.OrderDate) ORDER BY YEAR(FC_Orders.OrderDate)", conn); // Begin iterating through the result set SqlDataReader rst = query.ExecuteReader(); while (rst.Read()) { // Construct the chart data in XML format xmlStr.AppendFormat("", rst["yr"].ToString(), rst["AMOUNT"].ToString()); } // End the XML string xmlStr.Append(""); // Close the result set Reader object and the Connection object rst.Close(); conn.Close(); // This page should return only XML content Response.ContentType = "text/xml"; Response.Write(xmlStr.ToString()); } } }This completes the code for
DataProvider.aspx
. Run this page, and all you will see is the chart data in XML format: Coming back to
Using_MS_SQL_Server.aspx.cs
, modify the RenderChart()
method to use Data URL: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using InfoSoftGlobal; public partial class Using_MS_SQL_Server : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Call the RenderChart method, pass the correct parameters, and write the return value to the Literal tag chart_from_db.Text = FusionCharts.RenderChart( "FusionChartsXT/Column2D.swf", // Path to chart's SWF Server.UrlEncode("DataProvider.aspx"), // Page which returns chart data "", // String containing the chart data. Leave blank when using Data URL. "annual_revenue", // Unique chart ID "640", "340", // Width & Height of chart false, // Disable Debug Mode true); // Register with JavaScript object } }We use the
Server.UrlEncode()
method to take care of any special characters in the URL / querystring. Save and run this page. You should see the same chart as before: DataProvider.aspx.cs
. You can see this by opening the Network tab in either Firebug or Chrome’s Developer Tools. Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
hi i used above code but it generate an error
"
This page contains the following errors:
error on line 3 at column 1: Extra content at the end of the document
Below is a rendering of the page up to the first error."
so please send me proper solutions for this on my mail id nnnlaxman12@gmail.com
Best Regards
Mr.Laxman
Hi Laxman,
Please drop us a mail at “support[at]fusioncharts[dot]com” along with the sample code.
We would check the sample and suggest a solution.
You use this
try
{
Response.End();
}
catch { }
Hi, when i try to copy the code as it is, i get error XML parsing error. Please fix the code
it works, thanks alot