Displaying Dynamic chart By C#

Html Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MonthWiseReport.aspx.cs"
Inherits="qt_MonthWiseReport" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><%@ Register Src="~/qt/Menulist.ascx" TagName="Header" TagPrefix="Admin" %>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="style1.css" type="text/css" rel="Stylesheet" />
<style type="text/css">
.GridHeader
{
background: url(images/strip-play.jpg) repeat-x;
font-weight: bold;
text-align: center;
font-size: 13px;
}
</style>
<script type="text/javascript" src="../LIVE Report_files/1.7.js"></script>
<script type="text/javascript" src="../LIVE Report_files/jquery.min1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ts_tool" runat="server"></ajaxToolkit:ToolkitScriptManager>
<div>
<div class="wraper">
<div class="report-out">
<div class="report-type">
<div class="main_menu">
<Admin:Header ID="adminheader" runat="server" />
</div>
</div>
<div class="report-header">
<div class="report-header-tital" style="padding-top: 50px;">
CallCenter Month Performance
</div>
<div class="report-header-outer">
<table width="100%">
<tr>
<td colspan="5px" style="width:70%" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="frmTable border"
align="center" style="margin-bottom: 10px; background: #FFFFFF;">
<tr>
<td colspan="5px" align="center">
<asp:Label ID="lblforerror1" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</td>
</tr>
<tr>
<td>
Select CallCenter :
</td>
<td>
<asp:DropDownList ID="dp_CallCener" runat="server" Width="185px"></asp:DropDownList>
</td>
</tr>
<tr>
<tr>
<td>
Select Type
</td>
<td>
<asp:RadioButtonList ID="Rd_SelectType" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Amount Wise" Selected="True" Value="1"></asp:ListItem>
<asp:ListItem Text="Quntity Wise" Value="2"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</tr>
<tr>
<td colspan="5px">
<table width="100%">
<tr>
<td align="left">
Month
</td>
<td>
<asp:DropDownList ID="dp_month" runat="server">
<asp:ListItem Value="1" Text="Jan"></asp:ListItem>
<asp:ListItem Value="2" Text="Feb"></asp:ListItem>
<asp:ListItem Value="3" Text="March"></asp:ListItem>
<asp:ListItem Value="4" Text="April"></asp:ListItem>
<asp:ListItem Value="5" Text="May"></asp:ListItem>
<asp:ListItem Value="6" Text="Jun"></asp:ListItem>
<asp:ListItem Value="7" Text="July"></asp:ListItem>
<asp:ListItem Value="8" Text="Aug"></asp:ListItem>
<asp:ListItem Value="9" Text="Sept"></asp:ListItem>
<asp:ListItem Value="10" Text="Oct"></asp:ListItem>
<asp:ListItem Value="11" Text="Nov"></asp:ListItem>
<asp:ListItem Value="12" Text="Dec"></asp:ListItem>
</asp:DropDownList>
</td>
<td align="left">
Year
</td>
<td>
<asp:DropDownList ID="dp_year" runat="server">
<asp:ListItem Value="2014" Text="2014"></asp:ListItem>
<asp:ListItem Value="2015" Text="2015"></asp:ListItem>
<asp:ListItem Value="2014" Text="2014"></asp:ListItem>
<asp:ListItem Value="2016" Text="2016"></asp:ListItem>
<asp:ListItem Value="2017" Text="2017"></asp:ListItem>
<asp:ListItem Value="2018" Text="2018"></asp:ListItem>
<asp:ListItem Value="2019" Text="2019"></asp:ListItem>
<asp:ListItem Value="2020" Text="2020"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" colspan="4px" align="center">
<asp:ImageButton ID="Btn_Submit" type="image" src="images/submit.jpg" Width="65"
Height="28" runat="server" OnClick="Btn_Submit_Click" />
</td>
</tr>
</table>
</td>
<td align="right" colspan="3px">
<table style="border: solid 2px #067ac5;" width="100%">
<tr>
<td colspan="3px" align="center" style="font-size: large; font-weight: bold; color: Blue;
text-transform: uppercase;">
Total Amount
<asp:Label ID="lbl_CallcenterName" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td colspan="3px" align="center" style="font-size: 12px; font-weight: bold; color: Blue;">
Month
<asp:Label ID="Label1" runat="server" ForeColor="Red"></asp:Label>
Year-
<asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td style="font-size: larger; font-weight: bold; color: Green;">
Total Amount/Quntity
</td>
<td style="font-size: larger; font-weight: bold; color: Black;">
:
</td>
<td>
<asp:Label ID="lbl_TotalTelecall" runat="server" Style="font-size: larger; font-weight: bold;
color: Red;"></asp:Label>
</td>
</tr>
<tr>
<td style="font-size: larger; font-weight: bold; color: Green;">
Total Deliver
</td>
<td style="font-size: larger; font-weight: bold; color: Black;">
:
</td>
<td>
<asp:Label ID="lbl_TotalCall" runat="server" Style="font-size: larger; font-weight: bold;
color: Red;"></asp:Label>
</td>
</tr>
<tr>
<td style="font-size: larger; font-weight: bold; color: Green;">
Total Return/Cancel
</td>
<td style="font-size: larger; font-weight: bold; color: Black;">
:
</td>
<td>
<asp:Label ID="lbl_TotalOrder" runat="server" Style="font-size: larger; font-weight: bold;
color: Red;"></asp:Label>
</td>
</tr>
<tr>
<td style="font-size: larger; font-weight: bold; color: Green;">
Total Panding
</td>
<td style="font-size: larger; font-weight: bold; color: Black;">
:
</td>
<td>
<asp:Label ID="lab_TotalPanding" runat="server" Style="font-size: larger; font-weight: bold;
color: Red;"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div class="report-header">
<div class="report-header-outer2">
<div id="container" style="width: %; height: 250px; margin: 0 auto">
<asp:Label ID="lbl_bindimage" runat="server"></asp:Label>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="9" align="center" style="text-align: center;">
<asp:GridView ID="gd_amount" runat="server" Font-Size="Medium" Width="100%" AutoGenerateColumns="false"
GridLines="None" RowStyle-CssClass="gridTable tone" FooterStyle-ForeColor="Red"
FooterStyle-Font-Size="Large" FooterStyle-Font-Bold="true">
<Columns>
<asp:BoundField DataField="MonthDate" HeaderText="Month Date" DataFormatString="{0:dd/MM/yyyy}"
ItemStyle-Font-Bold="true" />
<asp:BoundField DataField="TotalAmount" HeaderText="Total" DataFormatString="{0:n2}"
ItemStyle-Font-Bold="true" ItemStyle-ForeColor="Red" />
<asp:BoundField DataField="DelAmount" HeaderText="Deliver " DataFormatString="{0:n2}"
ItemStyle-ForeColor="#f15c80" />
<asp:BoundField DataField="Delpct" HeaderText="Del %" DataFormatString="{0:n2}" ItemStyle-ForeColor="#f15c80" />
<asp:BoundField DataField="RetAmount" HeaderText="Return/Cancel" DataFormatString="{0:n2}"
ItemStyle-ForeColor="#a8cef3" />
<asp:BoundField DataField="Retpct" HeaderText="Ret %" DataFormatString="{0:n2}" ItemStyle-ForeColor="#a8cef3" />
<asp:BoundField DataField="PanAmount" HeaderText="PanDing" DataFormatString="{0:n2}"
ItemStyle-ForeColor="Green" />
<asp:BoundField DataField="Pandingpct" HeaderText="Panding %" DataFormatString="{0:n2}"
ItemStyle-ForeColor="Green" />
</Columns>
<HeaderStyle CssClass="GridHeader" />
</asp:GridView>
</td>
</tr>
</table>
</div>
</div>
<div class="footer white" align="center">
Site Developed by: Dv info Solutions Pvt Ltd: Dv info Solutions Pvt Ltd</div>
</div>
</div>
</div>
<script type="text/javascript" src="../LIVE Report_files/exporting.js"></script>
<script type="text/javascript" src="../LIVE Report_files/highcharts.js"></script>
</form>
</body>
</html>

C# Code

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Text;
public partial class qt_MonthWiseReport: System.Web.UI.Page {
StringBuilder sb = new StringBuilder();
masterClass_Emp ms = new masterClass_Emp();
DataTable dt;
string str_DelAmount = "";
string str_retamount;
string str_TotalAmount;
string str_Pandingamount;
string Str_Date;
int type;
string Text;
string ValuePerfix;
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
bind_ddl1();
}
}
void bind_ddl1() {
ListItem li = new ListItem("Select", "0");
ms.bind_DropdownList(dp_CallCener, "Select * from callcenterMst order by CallcenterName", "CallcenterName", "Callcenterid");
dp_CallCener.Items.Insert(0, li);
}
protected void Btn_Submit_Click(object sender, ImageClickEventArgs e) {
if (Rd_SelectType.SelectedValue == "1") {
type = 1;
Text = "Amount";
ValuePerfix = "(Rs)";
} else {
type = 2;
Text = "Quntity";
ValuePerfix = "";
}
dt = ms.loadGridDataTable(" sp_totalAmountCountWithMonth " + dp_month.SelectedValue + "," + dp_year.SelectedValue + "," + type + "," + dp_CallCener.SelectedValue);
for (int i = 0; i < dt.Rows.Count; i++) {
if (i != dt.Rows.Count - 1) {
str_TotalAmount += "" + dt.Rows[i][1].ToString() + ",";
str_DelAmount += "" + dt.Rows[i][2].ToString() + ",";
str_retamount += "" + dt.Rows[i][4].ToString() + ",";
str_Pandingamount += "" + dt.Rows[i][6].ToString() + ",";
Str_Date += "'" + Convert.ToDateTime(dt.Rows[i][0].ToString()).ToString("dd") + "',";
} else {
str_TotalAmount += "" + dt.Rows[i][1].ToString() + "";
str_DelAmount += "" + dt.Rows[i][2].ToString() + "";
str_retamount += "" + dt.Rows[i][4].ToString() + "";
str_Pandingamount += "" + dt.Rows[i][6].ToString() + "";
Str_Date += "'" + Convert.ToDateTime(dt.Rows[i][0].ToString()).ToString("dd") + "'";
}
}
sb.Append("<script type='text/javascript'>" +
"$(function () {" +
"$('#container').highcharts({" +
"title: {" +
"text: 'CallCenter Delhi " + Text + " Report '" +
"}," +
"subtitle: {text: 'Month:" + dp_month.SelectedValue + " Year:" + dp_year.SelectedValue + "' }," +
"xAxis: {" +
" categories: [" + Str_Date + "]" +
"}," +
" yAxis: {" +
" title: {" +
"text: 'Total " + Text + "" + ValuePerfix + "'" +
" }," +
"plotLines: [{" +
"value: 10000," +
"width: 0," +
"color: ''" +
"}]" +
"}," +
"tooltip: {" +
"valueSuffix: '" + ValuePerfix + "'" +
"}," +
" series: [{" +
"name: 'Total Amount " + Text + "'," +
"data: [" + str_TotalAmount + "]," +
"color: Highcharts.getOptions().colors[2]" +
" },{" +
"name: 'Delivery " + Text + "'," +
"data: [" + str_DelAmount + "]," +
"color: Highcharts.getOptions().colors[5]" +
" }, {" +
"name: 'Return/Cancel " + Text + "'," +
" data: [" + str_retamount + "]," +
"color: Highcharts.getOptions().colors[3]" +
"}, {" +
"name: 'Panding " + Text + "'," +
" data: [" + str_Pandingamount + "]," +
"color: Highcharts.getOptions().colors[4]" +
"}]" +
"});" +
"});" +
"</script>");
lbl_bindimage.Text = sb.ToString();
gd_amount.DataSource = dt;
gd_amount.DataBind();
lbl_TotalTelecall.Text = dt.Compute("Sum(TotalAmount)", "").ToString();
lbl_TotalCall.Text = dt.Compute("Sum(DelAmount)", "").ToString();
lbl_TotalOrder.Text = dt.Compute("Sum(RetAmount)", "").ToString();
lab_TotalPanding.Text = dt.Compute("Sum(PanAmount)", "").ToString();
}