In this article I’m going
to explain how to create Fusion Line chart from database in ASP.NET.
Line charts are
used to show trends and performance over a period of time. For example, if you
want to see how company’s sales has been growing, these charts can help you
understand the overall trend without going into the individual values
themselves.
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 Line 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 = "550";
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)
{
LoadGraphData();
CreateLineGraph();
}
}
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 CreateLineGraph()
{
string
strCaption = "Year wise Sales report";
string
strSubCaption = "2000 - 2005";
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 + @"'
hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0'
decimalPrecision='2'
showvalues='0'
numdivlines='3' numVdivlines='0' yaxisminvalue='80.00' yaxismaxvalue='80.00' rotateNames='1'
showAlternateHGridColor='1' AlternateHGridColor='ff5904'
divLineColor='ff5904'
divLineAlpha='20' alternateHGridAlpha='5'
xAxisName='" + xAxis + @"'
yAxisName='" + yAxis + @"' > ";
string
tmp = null;
tmp = @"<categories
font='Arial' fontSize='11' fontColor='000000'>";
foreach
(DataRow DR in
dt.Rows)
{
tmp += @"<category
name='" + DR["year"].ToString().Trim()
+ @"' />";
}
tmp += @"</categories>";
strXML += tmp;
tmp = @"<dataset
seriesName='Sales' color='1D8BD1' anchorBorderColor='1D8BD1'
anchorBgColor='1D8BD1'>";
foreach
(DataRow DR in
dt.Rows)
{
tmp += @"<set
value='" + DR["sales"].ToString().Trim()
+ @"'
link="JavaScript:myJS('" + DR["year"].ToString() + ", " + DR["sales"].ToString()
+ "'); " />";
}
tmp += @"</dataset>";
strXML += tmp;
strXML += "</graph>";
FCLiteral1.Text = FusionCharts.RenderChartHTML(
"FusionCharts/FCF_MSLine.swf", // Path to chart's
SWF
"", // Leave blank when using Data String method
strXML, // xmlStr contains the chart data
"mygraph4", //
Unique chart ID
GraphWidth, GraphHeight, // Width
& Height of chart
false
);
}
}