In this article I’m going
to explain how to create Fusion Doughnut chart from database in ASP.NET.
The pie and the doughnut
charts are used to show the breakdown of data into its constituents, i.e. parts
of a whole. I have already wrote an article about Fusion
Pie chart. Here I’ll show you how to create Doughnut chart from SQL Server
database.
You can download Fusion charts by following the link given below
or you can download source code which has been attached along with this article.
http://sourceforge.net/projects/fusioncharts/
Fusion Charts:
FusionCharts Free is
an open-source FREE flash charting component that can be used to render
data-driven animated charts.
If you are not aware of Fusion charts
and how to install or configure this, please you could refer these articles
Getting started with
Fusion Charts
How to
install or configure Fusion Charts in ASP.NET
How Fusion Charts works.?
As you must already be
aware by now, FusionCharts accepts only XML data to plot the charts. You can
either provide physical XML data files or dynamically relay XML data using
server-side scripts to FusionCharts. Here, we explore the various methods using
which you can provide XML data to FusionCharts.
There are 3 ways using which you can provide XML data to
FusionCharts:
- dataURL method - In this
method, you only provide the URL of XML Data Document to FusionCharts. The
chart now sends a request for XML data to the specified URL, reads it,
parses it and then renders the charts accordingly.
- dataXML method - Here, you send
the XML data along with the HTML Content and chart SWF file to the
browser. The SWF loads, reads this data (present in same HTML page) and
then renders the chart.
- JavaScript method
using updateChartXML - In this method, you provide the
XML data to FusionCharts using JavaScript functions (present on the same
page in which chart is present).
For more details
Here I’ll show you how to create
Fusion Doughnut chart from SQL Server
database. First we have to create table. Table design and sample data given
below.
Table
design:
|
Column
|
datatype
|
|
id
|
Int
|
|
year
|
varchar(50)
|
|
sales
|
varchar(10)
|
Sample
data:
|
id
|
year
|
Sales
|
|
1
|
2000
|
150000
|
|
2
|
2001
|
100000
|
|
3
|
2002
|
200000
|
|
4
|
2003
|
180000
|
|
5
|
2004
|
200000
|
|
6
|
2005
|
250000
|
Here
we’ve to use following code to load Fusion Chart
<script type="text/javascript"
language="JavaScript"
src="FusionCharts/FusionCharts.js">
</script>
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!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 runat="server">
<title></title>
<script type="text/javascript" language="JavaScript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" language="JavaScript">
function
myJS(myVar) {
window.alert(myVar);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>
</form>
</body>
</html>
Note:
Here we have to use following
namespace
using InfoSoftGlobal;
C#
code:
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.SqlClient;
using InfoSoftGlobal;
public partial class _Default :
System.Web.UI.Page
{
DataTable
dt = new DataTable("Chart");
string
GraphWidth = "450";
string
GraphHeight = "420";
string[]
color = new string[12];
//Get connection
string from web.config
SqlConnection
conn = new SqlConnection("Data source=localhost; Initial catalog=Demo;
Integrated Security=True");
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
ConfigureColors();
LoadGraphData();
CreateDoughnutGraph();
}
}
private void ConfigureColors()
{
color[0] = "AFD8F8";
color[1] = "F6BD0F";
color[2] = "8BBA00";
color[3] = "FF8E46";
color[4] = "008E8E";
color[5] = "D64646";
color[6] = "8E468E";
color[7] = "588526";
color[8] = "B3AA00";
color[9] = "008ED6";
color[10] = "9D080D";
color[11] = "A186BE";
}
private DataTable LoadGraphData()
{
conn.Open();
string
cmd = "select year,sales from Sales";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
conn.Close();
return
dt;
}
private void CreateDoughnutGraph()
{
string
strCaption = "Year wise Sales report";
string
strSubCaption = "2000 - 2008";
string
xAxis = "Year";
string
yAxis = "Sales";
//strXML will
be used to store the entire XML document generated
string
strXML = null;
//Generate
the graph element
strXML = @"<graph
caption='" + strCaption + @"'
subCaption='" + strSubCaption + @"'
decimalPrecision='0'
pieSliceDepth='30'
formatNumberScale='0'
xAxisName='" + xAxis + @"'
yAxisName='" + yAxis + @"'
rotateNames='1' >";
int i =
0;
foreach
(DataRow DR in
dt.Rows)
{
strXML += "<set
name='" + DR[0].ToString() + "'
value='" + DR[1].ToString() + "'
color='" + color[i] + @"' link="JavaScript:myJS('"
+ DR["year"].ToString() + ", " + DR["sales"].ToString()
+ "'); "/>";
i++;
}
//Finally, close <graph> element
strXML += "</graph>";
FCLiteral1.Text = FusionCharts.RenderChartHTML(
"FusionCharts/FCF_Doughnut2D.swf",
// Path to chart's SWF
"", // Leave blank when using Data String method
strXML, // xmlStr contains the chart data
"mygraph1", //
Unique chart ID
GraphWidth, GraphHeight, //
Width & Height of chart
false
);
}
}