Displays the data in the demographical dashboard and allows the user to drill the information of the next level by activating the respective Graphical control to various levels. The drilled data would be a demographic or a textual display
aspx source
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="InventoryWebChart.WebForm1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:WebChartControl ID="WebChartControl1" runat="server" OnCustomCallback="WebChartControl1_CustomCallback"
CrosshairEnabled="True" Height="500px" SideBySideEqualBarWidth="True" Width="800px">
<fillstyle><OptionsSerializable>
<dx:SolidFillOptions></dx:SolidFillOptions>
</OptionsSerializable>
</fillstyle>
<clientsideevents objectselected="function(s, e) {
productsPopup.ShowWindowAtPos(e.x, e.y);
}" />
<clientsideevents objectselected="function(s, e) {
if (e.additionalHitObject != null) {
productsChart.PerformCallback(e.additionalHitObject.argument);
productsPopup.ShowAtPos(e.x, e.y);
}
}"></clientsideevents>
<crosshairoptions><CommonLabelPositionSerializable>
<dx:CrosshairMousePosition></dx:CrosshairMousePosition>
</CommonLabelPositionSerializable>
</crosshairoptions>
<tooltipoptions><ToolTipPositionSerializable>
<dx:ToolTipMousePosition></dx:ToolTipMousePosition>
</ToolTipPositionSerializable>
</tooltipoptions>
</dx:WebChartControl>
</div>
<div>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="productsPopup"
Height="400px" RenderMode="Lightweight" Width="500px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" SupportsDisabledAttribute="True">
<dx:WebChartControl ID="productsChart" runat="server" CrosshairEnabled="True" Height="400px"
SideBySideEqualBarWidth="True" Width="500px" ClientInstanceName="productsChart"
OnCustomCallback="WebChartControl1_CustomCallback">
<clientsideevents objectselected="function(s, e) {
productsPopup2.ShowWindowAtPos(e.x, e.y);
}" />
<clientsideevents objectselected="function(s, e) {
if (e.additionalHitObject != null) {
productsChart2.PerformCallback(e.additionalHitObject.argument);
productsPopup1.ShowAtPos(e.x, e.y);
}
}"></clientsideevents>
<crosshairoptions>
<commonlabelpositionserializable>
<dx:CrosshairMousePosition />
</commonlabelpositionserializable>
</crosshairoptions>
<tooltipoptions>
<tooltippositionserializable>
<dx:ToolTipMousePosition />
</tooltippositionserializable>
</tooltipoptions>
</dx:WebChartControl>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
<div>
<dx:ASPxPopupControl ID="ASPxPopupControl2" runat="server" ClientInstanceName="productsPopup1"
Height="380px" RenderMode="Lightweight" Width="450px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl2" runat="server" SupportsDisabledAttribute="True">
<dx:WebChartControl ID="WebChartControl3" runat="server" CrosshairEnabled="True"
Height="400px" SideBySideEqualBarWidth="True" Width="500px" ClientInstanceName="productsChart2"
OnCustomCallback="WebChartControl3_CustomCallback">
<clientsideevents objectselected="function(s, e) {
chartpopup1.ShowWindowAtPos(e.x, e.y);
}" />
<clientsideevents objectselected="function(s, e) {
if (e.additionalHitObject != null) {
chart2.PerformCallback(e.additionalHitObject.argument);
chartpopup1.ShowAtPos(e.x, e.y);
}
}"></clientsideevents>
<crosshairoptions><CommonLabelPositionSerializable>
<dx:CrosshairMousePosition></dx:CrosshairMousePosition>
</CommonLabelPositionSerializable>
</crosshairoptions>
<tooltipoptions><ToolTipPositionSerializable>
<dx:ToolTipMousePosition></dx:ToolTipMousePosition>
</ToolTipPositionSerializable>
</tooltipoptions>
</dx:WebChartControl>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
<div>
<dx:ASPxPopupControl ID="ASPxPopupControl3" runat="server" ClientInstanceName="chartpopup1"
Height="400px" RenderMode="Lightweight" Width="500px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl3" runat="server" SupportsDisabledAttribute="True">
<dx:WebChartControl ID="WebChartControl2" runat="server" CrosshairEnabled="True"
Height="400px" SideBySideEqualBarWidth="True" Width="500px" ClientInstanceName="chart2"
OnCustomCallback="WebChartControl2_CustomCallback">
<clientsideevents objectselected="function(s, e) {
chartpopup2.ShowWindowAtPos(e.x, e.y);
}" />
<clientsideevents objectselected="function(s, e) {
if (e.additionalHitObject != null) {
chart4.PerformCallback(e.additionalHitObject.argument);
chartpopup2.ShowAtPos(e.x, e.y);
}
}"></clientsideevents>
</dx:WebChartControl>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
<div>
<dx:ASPxPopupControl ID="ASPxPopupControl4" runat="server" ClientInstanceName="chartpopup2"
Height="400px" RenderMode="Lightweight" Width="600px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl4" runat="server" SupportsDisabledAttribute="True">
<dx:WebChartControl ID="WebChartControl4" runat="server" CrosshairEnabled="True"
Height="374px" SideBySideEqualBarWidth="True" Width="576px" ClientInstanceName="chart4"
OnCustomCallback="WebChartControl4_CustomCallback">
<clientsideevents objectselected="function(s, e) {
chartpopup3.ShowWindowAtPos(e.x, e.y);
}" />
<clientsideevents objectselected="function(s, e) {
if (e.additionalHitObject != null) {
chart5.PerformCallback(e.additionalHitObject.argument);
chartpopup3.ShowAtPos(e.x, e.y);
}
}"></clientsideevents>
</dx:WebChartControl>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
<div>
<dx:ASPxPopupControl ID="ASPxPopupControl5" runat="server" ClientInstanceName="chartpopup3"
Height="300px" RenderMode="Lightweight" Width="400px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl5" runat="server" SupportsDisabledAttribute="True">
<dx:WebChartControl ID="WebChartControl5" runat="server" CrosshairEnabled="True"
Height="300px" SideBySideEqualBarWidth="True" Width="400px" ClientInstanceName="chart5"
OnCustomCallback="WebChartControl5_CustomCallback">
</dx:WebChartControl>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
</div>
</form>
</body>
</html>
--------------------------------------------------------------
ASPX.CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using DevExpress.XtraCharts;
using DevExpress.XtraCharts.Web;
namespace InventoryWebChart
{
public partial class WebForm1 : System.Web.UI.Page
{
SqlConnection Conn = new SqlConnection("server=;database=Sample2;uid=;pwd=");
protected void Page_Load(object sender, EventArgs e)
{
try
{
DataTable dt = new DataTable();
SqlDataReader dr = null;
if (!IsPostBack)
{
Conn.Open();
string sql = "select * from Emp";
SqlCommand cmd = new SqlCommand(sql, Conn);
dr = cmd.ExecuteReader();
dt.Load(dr);
Series series1 = new Series("series1", ViewType.Pie);
for (int i = 0; i < dt.Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(dt.Rows[i]["empname"], new string[] { dt.Rows[i]["eid"].ToString() }));
}
WebChartControl1.Series.Add(series1);
this.Form.Controls.Add(WebChartControl1);
WebChartControl1.DataBind();
Conn.Close();
}
}
catch (Exception ex)
{
throw;
}
}
protected void WebChartControl1_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{
try
{
Conn.Open();
var v = e.Parameter;
string sql = "select eid,empname from Emp where empname=@emp ";
SqlCommand cmd = new SqlCommand(sql, Conn);
DataSet ds1 = new DataSet();
cmd.Parameters.AddWithValue("@emp", SqlDbType.Int).Value = v;
SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);
mySQLadapter.Fill(ds1);
Series series1 = new Series("series1", ViewType.SideBySideFullStackedBar);
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(ds1.Tables[0].Rows[i]["empname"], new string[] { ds1.Tables[0].Rows[i]["eid"].ToString() }));
}
productsChart.DataSource = ds1;
this.form1.Controls.Add(productsChart);
productsChart.Series.Add(series1);
productsChart.DataBind();
Conn.Close();
}
catch (Exception ex)
{
throw;
}
}
protected void WebChartControl3_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{
try
{
Conn.Open();
var v = e.Parameter;
string sql = "select cat_id,eid,empname from Emp where empname=@emp ";
SqlCommand cmd = new SqlCommand(sql, Conn);
DataSet ds1 = new DataSet();
cmd.Parameters.AddWithValue("@emp", SqlDbType.Int).Value = v;
SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);
mySQLadapter.Fill(ds1);
Series series1 = new Series("series1", ViewType.StackedBar);
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(ds1.Tables[0].Rows[0]["empname"], new string[] { ds1.Tables[0].Rows[0]["eid"].ToString() }));
}
productsChart.DataSource = ds1;
this.form1.Controls.Add(WebChartControl3);
WebChartControl3.Series.Add(series1);
productsChart.DataBind();
Conn.Close();
}
catch (Exception ex)
{
throw;
}
}
protected void WebChartControl2_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{
try
{
Conn.Open();
var v = e.Parameter;
string sql = "select cat_id,eid,empname from Emp where empname=@emp ";
SqlCommand cmd = new SqlCommand(sql, Conn);
DataSet ds1 = new DataSet();
cmd.Parameters.AddWithValue("@emp", SqlDbType.Int).Value = v;
SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);
mySQLadapter.Fill(ds1);
Series series1 = new Series("series1", ViewType.Bar);
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(ds1.Tables[0].Rows[0]["empname"], new string[] { ds1.Tables[0].Rows[0]["eid"].ToString() }));
}
productsChart.DataSource = ds1;
this.form1.Controls.Add(WebChartControl2);
WebChartControl2.Series.Add(series1);
productsChart.DataBind();
Conn.Close();
}
catch (Exception ex)
{
throw;
}
}
protected void WebChartControl4_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{
try
{
Conn.Open();
var v = e.Parameter;
string sql = "select cat_id,eid,empname from Emp where empname=@emp ";
SqlCommand cmd = new SqlCommand(sql, Conn);
DataSet ds1 = new DataSet();
cmd.Parameters.AddWithValue("@emp", SqlDbType.Int).Value = v;
SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);
mySQLadapter.Fill(ds1);
Series series1 = new Series("series1", ViewType.Doughnut);
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(ds1.Tables[0].Rows[0]["empname"], new string[] { ds1.Tables[0].Rows[0]["eid"].ToString() }));
}
productsChart.DataSource = ds1;
this.form1.Controls.Add(WebChartControl4);
WebChartControl4.Series.Add(series1);
productsChart.DataBind();
}
catch (Exception ex)
{
throw;
}
}
protected void WebChartControl5_CustomCallback(object sender, DevExpress.XtraCharts.Web.CustomCallbackEventArgs e)
{
try
{
Conn.Open();
var v = e.Parameter;
string sql = "select cat_id,eid,empname from Emp where empname=@emp ";
SqlCommand cmd = new SqlCommand(sql, Conn);
DataSet ds1 = new DataSet();
cmd.Parameters.AddWithValue("@emp", SqlDbType.Int).Value = v;
SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);
mySQLadapter.Fill(ds1);
Series series1 = new Series("series1", ViewType.Bar3D);
for (int i = 0; i < ds1.Tables[0].Rows.Count; i++)
{
series1.Points.Add(new SeriesPoint(ds1.Tables[0].Rows[0]["empname"], new string[] { ds1.Tables[0].Rows[0]["eid"].ToString() }));
}
productsChart.DataSource = ds1;
this.form1.Controls.Add(WebChartControl5);
WebChartControl5.Series.Add(series1);
productsChart.DataBind();
}
catch (Exception ex)
{
throw;
}
}
}
}