i have used fusion chart in my app'n.,
it may help u,
My Code:
.aspx
<![CDATA[<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TruckChart.aspx.cs" Inherits="NPSDashboard.TruckChart" %>]]>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><![CDATA[</title>
<meta content="3000;URL=Logout.aspx" http-equiv="refresh" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="assets/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" />
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="css/style.min.css" rel="stylesheet" />
<link href="css/style_responsive.css" rel="stylesheet" />
<link href="css/style_default.css" id="style_color" rel="stylesheet" />
<link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<link href="assets/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="assets/gritter/css/jquery.gritter.css" rel="stylesheet" type="text/css" />
<link href="assets/chosen-bootstrap/chosen/chosen.css" rel="stylesheet" type="text/css" />
<link href="assets/jquery-tags-input/jquery.tagsinput.css" rel="stylesheet" type="text/css" />
<link href="assets/clockface/css/clockface.css" rel="stylesheet" type="text/css" />
<link href="assets/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet" type="text/css" />
<link href="assets/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="assets/bootstrap-timepicker/compiled/timepicker.css" rel="stylesheet" type="text/css" />
<link href="assets/bootstrap-colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
<link href="assets/bootstrap-toggle-buttons/static/stylesheets/bootstrap-toggle-buttons.css" rel="stylesheet" />
<link href="assets/data-tables/DT_bootstrap.css" rel="stylesheet" />
<link href="assets/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body class="fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top" id="header">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#"><img alt="Admin Lab" src="<br" mode="hold" /> "img/logo.png"></a><a class="btn btn-navbar collapsed">
data-target=".nav-collapse" data-toggle="collapse" id=
"main_menu_trigger"> "icon-bar"><span class="icon-bar"> "arrow"></a>
<div class="nav notify-row" id="top_menu">
<ul class="nav top-menu">
<li class="dropdown" style="display:none">
<a class="dropdown-toggle element icon-cog">
data-original-title="Settings" data-placement=
"bottom" data-toggle="tooltip" href="#" style=
"font-style: italic"></a>
</li>
<li class="dropdown" id="header_inbox_bar">
<a class="dropdown-toggle" data-toggle="dropdown">
href="#"><br"__^
<ul class="dropdown-menu extended inbox" style="display:none">
<li>
<p></p>
</li>
<li>
<a href="#"><span class="photo"><img alt="<br" mode="hold" /> "avatar" src=
"img/avatar-mini.png"> "subject"><span class="from">Dulal
KhanJust
now "message">Hello, this is an example
messages please check</a>
</li>
<li>
<a href="#"><span class="photo"><img alt="<br" mode="hold" /> "avatar" src=
"img/avatar-mini.png"> "subject"><span class="from">Rafiqul
Islam10
mins "message">Hi, Mosaddek Bhai how are you
?</a>
</li>
<li>
<a href="#"><span class="photo"><img alt="<br" mode="hold" /> "avatar" src=
"img/avatar-mini.png"> "subject"><span class="from">Sumon
Ahmed3
hrs "message">This is awesome dashboard
templates</a>
</li>
<li>
<a href="#"><span class="photo"><img alt="<br" mode="hold" /> "avatar" src=
"img/avatar-mini.png"> "subject"><span class="from">Dulal
KhanJust
now "message">Hello, this is an example
messages please check</a>
</li>
<li>
<a href="#">See all messages</a>
</li>
</ul>
</li>
<li class="dropdown" id="header_notification_bar">
<a class="dropdown-toggle" data-toggle="dropdown">
href="#">^__i class="icon-bell-alt"__^</i__^<span class="<br" mode="hold" /> "badge badge-warning"></a>
<ul class="dropdown-menu extended notification" style="display:none">
<li>
<p>You have 7 new notifications</p>
</li>
<li>
<a href="#"><span class="<br" mode="hold" /> "label label-important icon-bolt" style=
"font-style: italic"> Server #3
overloaded. <span class="small italic">34
mins</a>
</li>
<li>
<a href="#"> "label label-warning icon-bell" style=
"font-style: italic"> Server #10 not
respoding. <span class="small italic">1
Hours</a>
</li>
<li>
<a href="#"> "label label-important icon-bolt" style=
"font-style: italic"> Database
overloaded 24%. <span class="<br" mode="hold" /> "small italic">4 hrs</a>
</li>
<li>
<a href="#"><span class="<br" mode="hold" /> "label label-success icon-plus" style=
"font-style: italic"> New user
registered. <span class="small italic">Just
now</a>
</li>
<li>
<a href="#"> "label label-info icon-bullhorn" style=
"font-style: italic"> Application
error. <span class="small italic">10
mins</a>
</li>
<li>
<a href="#">See all notifications</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="top-nav">
<ul class="nav pull-right top-menu">
<li class="dropdown mtop5" style="display:none">
<a class="<br" mode="hold" /> "dropdown-toggle element icon-comments-alt"
data-original-title="Chat" data-placement="bottom"
data-toggle="tooltip" href="#" style=
"font-style: italic">
</li>
<li class="dropdown mtop5" style="display:none">
<a class="dropdown-toggle element icon-headphones">
data-original-title="Help" data-placement="bottom"
data-toggle="tooltip" href="#" style=
"font-style: italic"></a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Administrator^__b class="caret"__^</a>
<ul class="dropdown-menu">
<li>
<a href="#">^__i class="icon-user"__^ My
Profile</a>
</li>
<li>
<a href="#">^__i class="icon-tasks"__^ My
Tasks</a>
</li>
<li>
<a href="#">^__i class="icon-calendar"__^
Calendar</a>
</li>
<li class="divider"></li>
<li>
<a href="Logout.aspx">^__i class="<br" mode="hold" /> "icon-key"> Log Out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-fluid" id="container">
<div id="main-content">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hidden-phone" id="theme-change">
^__i class="icon-cogs"> "settings"><span class="<br" mode="hold" /> "text">Theme:<span class="<br" mode="hold" /> "colors"><span class="color-default" data-style="<br" mode="hold" /> "default"><span class="color-gray">
data-style="gray">
data-style="purple"> "color-navy-blue" data-style=
"navy-blue">
</div>
<h3 class="page-title">National Petroleum Services Dashboard<small></small></h3>
<ul class="breadcrumb" style="display:none">
<li>
<a class="icon-home" href="#" style="<br" mode="hold" /> "font-style: italic"><span class="<br" mode="hold" /> "divider">
</li>
<li>
<a href="EquipmentTracking.aspx">Equipment Tracking</a><span class="<br" mode="hold" /> "divider">
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="widget">
<div class="widget-title">
<h4>Truck Tracking</h4><span class="tools">
<a class="icon-chevron-down" href="javascript:;"></a><a class="icon-remove" href="javascript:;"></a>
</div>
<div class="widget-body">
<div class="control-group">
<form id="form1" runat="server">
<div class="controls">
<table id="sample_1" border="0" width="100%">
<thead>
<tr>
<td>Start Date</td>
<td>
<asp:textbox id="StartDate" runat="server" cssclass="m-ctrl-medium date-picker" xmlns:asp="#unknown"></asp:textbox>
</td>
<td>End Date</td>
<td>
<asp:textbox id="EndDate" runat="server" cssclass="m-ctrl-medium date-picker" xmlns:asp="#unknown"></asp:textbox> </td>
</tr>
</thead>
</table>
<div class="form-horizontal well">
<fieldset>
<legend>Select Trucks</legend>
<center>
<table width="80%">
<tr>
<td>
<asp:checkboxlist id="cbltrucks" width="150px" font-bold="true" xmlns:asp="#unknown">
ForeColor="Black" runat="server"
RepeatColumns="20" CellPadding="5" CellSpacing="5"
RepeatDirection="Horizontal">
</asp:checkboxlist>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Generate" class="btn btn-success" onclick="CreateChart()" /></td>
</tr>
<tr>
<td>
<asp:hiddenfield id="hdn" runat="server" xmlns:asp="#unknown" />
</td>
</tr>
</table>
</center>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="widget">
<div class="widget-title">
<h4>Data Chart</h4>
<a class="icon-chevron-down" href="javascript:;"></a><a class="icon-remove" href="javascript:;"></a>
</div>
<div class="widget-body">
<div class="control-group">
<div class="controls">
<div id="chartContainerCT" style="text-align:center">FusionCharts will load here!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
National Petroleum Services Dashboard @<%=DateTime.Now.Year %>
<div class="span pull-right">
</div>
</div>
<script src="./js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="./assets/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="./assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/bootstrap/js/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="./js/jquery.blockui.js" type="text/javascript"></script>
<!--[if lt IE 9]><script src="./js/excanvas.js"></script><script src="./js/respond.js"></script><![endif]-->
<script src="./assets/chosen-bootstrap/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src="./assets/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<script src="./assets/bootstrap-wysihtml5/wysihtml5-0.3.0.js" type="text/javascript"></script>
<script src="./assets/bootstrap-wysihtml5/bootstrap-wysihtml5.js" type="text/javascript"></script>
<script src="./assets/clockface/js/clockface.js" type="text/javascript"></script>
<script src="./assets/jquery-tags-input/jquery.tagsinput.min.js" type="text/javascript"></script>
<script src="./assets/bootstrap-toggle-buttons/static/js/jquery.toggle.buttons.js" type="text/javascript"></script>
<script src="./assets/bootstrap-datepicker/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="./assets/bootstrap-daterangepicker/date.js" type="text/javascript"></script>
<script src="./assets/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>
<script src="./assets/bootstrap-colorpicker/js/bootstrap-colorpicker.js" type="text/javascript"></script>
<script src="./assets/bootstrap-timepicker/js/bootstrap-timepicker.js" type="text/javascript"></script>
<script src="./assets/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script>
<script src="./assets/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="./js/scripts.js" type="text/javascript"></script>
<script src="chart/FusionChart/Charts/FusionCharts.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
App.init()
});
function CreateChart() {
var Section = $('#ddSection option:selected').val();
var StartDate = $('#StartDate').val();
var EndDate = $('#EndDate').val();
var checkList1 = document.getElementById('<%= cbltrucks.ClientID %>');
var checkBoxList1 = checkList1.getElementsByTagName("input");
var checkBoxSelectedItems1 = new Array();
var ary = "";
for (var i = 0; i < checkBoxList1.length; i++) {
if (checkBoxList1[i].checked) {
checkBoxSelectedItems1.push(checkBoxList1[i].value);
ary += checkBoxList1[i].value + ","
}
}
'<%Session["chkList"] = "' + ary + '"; %>';
var my = '<%= Session["chkList"] %>';
if (StartDate != "" && EndDate != "") {
var chart_id = "chart_" + generateGuid();
var myChart = new FusionCharts("chart/FusionChart/Charts/StackedBar3D.swf", chart_id, "1000", "500", "0", "1");
myChart.setXMLUrl("TruckChartData.aspx?FromDate=" + StartDate + "&ToDate=" + EndDate + "&DeptID=" + Section + "&sess=" + my);
myChart.render("chartContainerCT");
}
}
function generateGuid() {
var result, i, j;
result = '';
for (j = 0; j < 32; j++) {
if (j == 8 || j == 12 || j == 16 || j == 20)
result = result + '_';
i = Math.floor(Math.random() * 16).toString(16).toUpperCase();
result = result + i;
}
return result;
}
function getValueUsingClass() {
var checkList1 = document.getElementById('<%= cbltrucks.ClientID %>');
var checkBoxList1 = checkList1.getElementsByTagName("input");
var checkBoxSelectedItems1 = new Array();
var ary="";
for (var i = 0; i < checkBoxList1.length; i++) {
if (checkBoxList1[i].checked) {
checkBoxSelectedItems1.push(checkBoxList1[i].value);
ary += checkBoxList1[i].value+","
}
}
'<%Session["chkList"] = "' + ary + '"; %>';
}
</script>
</body>
</html>
add another page: where i'm redirecting from javascript code, above.
it should be only backend code, not else:
.aspx page:
<![CDATA[<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TruckChartData.aspx.cs" Inherits="NPSDashboard.TruckChartData" %>]]>
.cs page:
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 DataAccessLayer;
using System.Xml;
namespace NPSDashboard
{
public partial class TruckChartData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Generate_chart();
}
protected void Generate_chart()
{
try
{
//DataTable dt = new DataTable();
//SqlParameter[] p=new SqlParameter[1];
string str = Request.QueryString["sess"].ToString();
//p[0] = new SqlParameter("@tid", str);
//dt = DAL.GetDataWithParameters("sp_GetSeletedTrucks", p);
XmlDocument XDoc = new XmlDocument();
XmlDocument Chart = new XmlDocument();
Chart.LoadXml("<chart />");
Chart.DocumentElement.SetAttribute("caption", "NATIONAL PETROLEUM SERVICES");
Chart.DocumentElement.SetAttribute("palette", "1");
Chart.DocumentElement.SetAttribute("animation", "1");
Chart.DocumentElement.SetAttribute("formatNumberScale", "0");
// Chart.DocumentElement.SetAttribute("plotfillalpha", "95");
Chart.DocumentElement.SetAttribute("baseFontSize", "12");
Chart.DocumentElement.SetAttribute("formatnumberscale", "0");
//Chart.DocumentElement.SetAttribute("showLabels","1" );
//Chart.DocumentElement.SetAttribute("showvalues","0" );
Chart.DocumentElement.SetAttribute("labelDisplay","rotate" );
Chart.DocumentElement.SetAttribute("useRoundEdges","1" );
Chart.DocumentElement.SetAttribute("legendBorderAlpha","0" );
// Chart.DocumentElement.SetAttribute("numDivLines", "6");
// Chart.DocumentElement.SetAttribute("divLineAlpha", "75");
// Chart.DocumentElement.SetAttribute("canvasLeftMargin", "0");
// Chart.DocumentElement.SetAttribute("displayValue", "Target");
Chart.DocumentElement.SetAttribute("baseFontSize", "15");
Chart.DocumentElement.SetAttribute("baseFontBold", "1");
XmlDocument CategoryXml = new XmlDocument();
CategoryXml.LoadXml(DAL.GenericSP_Str(2, "sp_GetSeletedTrucks", "<root fromdate="\""" todate="\""" tid="\""" str="" />"));
string check = DAL.GenericSP_Str(2, "sp_GetSeletedTrucks", "<root fromdate="\""" todate="\""" tid="\""" str="" />");
XmlNode CategoryDummyNode = Chart.ImportNode(CategoryXml.DocumentElement, true);
Chart.DocumentElement.AppendChild(CategoryDummyNode);
XmlNodeList CategoryLst = CategoryXml.DocumentElement.SelectNodes("//category");
for (int i = 0; i < 2; i++)
{
XmlElement DataSet = Chart.CreateElement("dataset");
if (i + 1 == 1)
{
DataSet.SetAttribute("seriesName", "Active");
}
else
{
DataSet.SetAttribute("seriesName", "InActive");
}
Chart.DocumentElement.AppendChild(DataSet);
for (int j = 0; j < CategoryLst.Count; j++)
{
XmlElement SetElement = Chart.CreateElement("set");
string XmlPara = "<root doorno="\""" fromdate="\""" todate="\""" status="\""" />";
XDoc.LoadXml(DAL.GenericSP_Str(2, "Sp_GetTruckTrackingStatus", XmlPara));
if ((i + 1) == 1)
{
if (XDoc.DocumentElement.GetAttribute("value") != "0")
{
SetElement.SetAttribute("value", XDoc.DocumentElement.GetAttribute("value"));
SetElement.SetAttribute("color", "#00FF00");
//string Para = "EquipmentID=" + ((XmlElement)CategoryLst[j]).GetAttribute("UnitID");
//Para = Para + "&Section=" + Request.QueryString["Section"];
//Para = Para + "&StartDate=" + Request.QueryString["StartDate"];
//Para = Para + "&EndDate=" + Request.QueryString["EndDate"];
//Para = Para + "&Status=" + (i + 1).ToString();
//Para = Para + "&label=" + ((XmlElement)CategoryLst[j]).GetAttribute("label");
//SetElement.SetAttribute("link", "P-detailsPopUp,width=800,height=550,toolbar=no,scrollbars=no,resizable=no-EquipmentActive.aspx?" + Para);
DataSet.AppendChild(SetElement);
}
if (XDoc.DocumentElement.GetAttribute("value") == "0")
{
SetElement.SetAttribute("value", "");
SetElement.SetAttribute("color", "#00FF00");
DataSet.AppendChild(SetElement);
}
}
else
{
if (XDoc.DocumentElement.GetAttribute("value") != "0")
{
//string Para = "EquipmentID=" + ((XmlElement)CategoryLst[j]).GetAttribute("UnitID");
//Para = Para + "&Section=" + Request.QueryString["Section"];
//Para = Para + "&StartDate=" + Request.QueryString["StartDate"];
//Para = Para + "&EndDate=" + Request.QueryString["EndDate"];
//Para = Para + "&Status=" + (i + 1).ToString();
//Para = Para + "&label=" + ((XmlElement)CategoryLst[j]).GetAttribute("label");
//SetElement.SetAttribute("link", "P-detailsPopUp,width=800,height=550,toolbar=no,scrollbars=no,resizable=no-EquipmentInActive.aspx?" + Para);
SetElement.SetAttribute("value", XDoc.DocumentElement.GetAttribute("value"));
SetElement.SetAttribute("color", "#FF0000");
DataSet.AppendChild(SetElement);
}
if (XDoc.DocumentElement.GetAttribute("value") == "0")
{
SetElement.SetAttribute("value", "");
SetElement.SetAttribute("color", "#00FF00");
DataSet.AppendChild(SetElement);
}
}
}
}
Response.Write(Chart.OuterXml);
}
catch (Exception)
{
throw;
}
}
}
}
Submit an article or tip