In this article I’m going
to explain how to create Fusion multi series Column chart from database in
ASP.NET.
Fusion Charts are made up of one or more series. Normally, each series would
be a single line or column etc. The design of the charting system is very
flexible, so a custom series can basically be anything it wants to be. In order
to be this flexible, the chart looks at the series definitions to help
determine the axis details and range. Then it goes through the defined series
and has them draw 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 Column 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(50)
|
|
sales
|
varchar(10)
|
|
expences
|
varchar(10)
|
Sample data:
|
id
|
year
|
sales
|
expences
|
|
1
|
2000
|
150000
|
50000
|
|
2
|
2001
|
100000
|
30000
|
|
3
|
2002
|
200000
|
100000
|
|
4
|
2003
|
180000
|
80000
|
|
5
|
2004
|
200000
|
90000
|
|
6
|
2005
|
250000
|
200000
|
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 = "650";
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();
CreateBarGraph();
}
}
private DataTable LoadGraphData()
{
conn.Open();
string
cmd = "select year,sales,expences from
Sales";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
conn.Close();
return
dt;
}
private void CreateBarGraph()
{
try
{
string
xmlData, categories, currentYear, previousYear;
//Initialize
<chart> element
xmlData = @"<graph
caption='Year wise Sales report' numberPrefix='$' formatNumberScale='1'
rotateValues='1' placeValuesInside='1' decimals='0' >";
//Initialize
<categories> element - necessary to generate a multi-series chart
categories = "<categories>";
//Initiate
<dataset> elements
currentYear = "<dataset seriesName='Sales'
color='#8BBA00'>";
previousYear = "<dataset seriesName='Purchase' color='#FF8E46'>";
//Iterate
through the data
int
i = 0;
foreach
(DataRow DR in
dt.Rows)
{
//Append
<category name='...' /> to strCategories
categories += "<category name='" + DR["year"].ToString() + "' />";
//Add
<set value='...' /> to both the datasets
currentYear += "<set value='" + DR["sales"].ToString() + "' />";
previousYear += "<set value='" + DR["expences"].ToString() + "' />";
i++;
}
//Close
<categories> element
categories += "</categories>";
//Close
<dataset> elements
currentYear += "</dataset>";
previousYear += "</dataset>";
//Assemble
the entire XML now
xmlData += categories + currentYear
+ previousYear + "</graph>";
//Create
the chart - MS Column 3D Chart with data contained in xmlData
// return
FusionCharts.RenderChart("../../FusionCharts/MSColumn3D.swf",
"", xmlData, "productSales", "600",
"300", false, false);
FCLiteral1.Text = FusionCharts.RenderChartHTML(
"FusionCharts/FCF_MSColumn3D.swf",
// Path to chart's SWF
"", // Leave blank when using Data String method
xmlData, // xmlStr contains the chart data
"productSales", //
Unique chart ID
GraphWidth, GraphHeight, //
Width & Height of chart
false
);
}
catch (Exception ex)
{ }
}
}