In this article I’m going
to explain how to create Fusion multi series Line chart from database in
ASP.NET.
Line charts are
used to show trends and performance over a period of time. Fusion Line charts
allows to create multi series or multi lines. For example, if you want to see
how company’s performance has been growing which includes purchase, sales,
expense 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 multi series Line chart from SQL Server
database. First we have to create table. Table design and sample data given
below.
Table design:
|
Column name
|
data type
|
|
id
|
int
|
|
year
|
varchar(10)
|
|
purchase
|
varchar(10)
|
|
sales
|
varchar(10)
|
|
expenses
|
varchar(10)
|
Sample data:
|
id
|
year
|
purchase
|
sales
|
expenses
|
|
1
|
2000
|
100000
|
150000
|
50000
|
|
2
|
2001
|
60000
|
100000
|
30000
|
|
3
|
2002
|
140000
|
200000
|
100000
|
|
4
|
2003
|
120000
|
180000
|
80000
|
|
5
|
2004
|
170000
|
200000
|
90000
|
|
6
|
2005
|
130000
|
250000
|
200000
|
We
have 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>
<div style="padding-left:200px"><b>Demo by dotnetfox</b></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 = "370";
string[]
color = new string[12];
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,purchase,sales,expences
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='Purchase' color='1D8BD1' anchorBorderColor='1D8BD1'
anchorBgColor='1D8BD1'>";
foreach
(DataRow DR in
dt.Rows)
{
tmp += @"<set
value='" + DR["purchase"].ToString().Trim()
+ @"'
link="JavaScript:myJS('" + DR["year"].ToString() + ", " + DR["purchase"].ToString()
+ "'); " />";
}
tmp += @"</dataset>";
tmp += @"<dataset
seriesName='Sales' color='008E8E' anchorBorderColor='008E8E'
anchorBgColor='008E8E'>";
foreach
(DataRow DR in
dt.Rows)
{
tmp += @"<set
value='" + DR["sales"].ToString().Trim()
+ @"'
link="JavaScript:myJS('" + DR["year"].ToString() + ", " + DR["sales"].ToString()
+ "'); " />";
}
tmp += @"</dataset>";
tmp += @"<dataset
seriesName='Expences' color='D64646' anchorBorderColor='D64646'
anchorBgColor='D64646'>";
foreach
(DataRow DR in
dt.Rows)
{
tmp += @"<set
value='" + DR["expences"].ToString().Trim()
+ @"'
link="JavaScript:myJS('" + DR["year"].ToString() + ", " + DR["expences"].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
);
}
}