Jun 17, 2013, 4:34 PM
Column Chart - Failed New Data Reload
Hi,
Using ext.net 2.2, VS2010, .net framework 4.0 and tried the issue on IE10, Firefox and chrome
Nothing happens when reloading the column chart with new data (taken from column chart browser stats example), the chart data stays as it is
aspx code sample:
Using ext.net 2.2, VS2010, .net framework 4.0 and tried the issue on IE10, Firefox and chrome
Nothing happens when reloading the column chart with new data (taken from column chart browser stats example), the chart data stays as it is
aspx code sample:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="GlobalSimNow.Backoffice.Dashboard" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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>Dashboard</title>
<link id="linkFavico1" runat="server" rel="shortcut icon" href="~/Images/WebSite/favicon.ico"
type="image/x-icon" />
<link id="linkFavico2" runat="server" rel="icon" href="~/Images/WebSite/favicon.ico"
type="image/ico" />
<link rel="stylesheet" type="text/css" href="../Styles/Layout.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="../Scripts/jquery-1.7.js"></script>
<script language="javascript" type="text/javascript" src="../Scripts/jquery-1.7.min.js"></script>
<style type="text/css">
.x-tip
{
background-color: #C0C0C0;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
border: 1px solid rgba(134, 84, 41, 0.5);
opacity: 0.95;
}
.x-tip-header
{
margin-bottom: 5px;
}
.x-tip .x-panel .x-panel-body.x-layout-fit
{
border: none;
}
.x-tip .x-panel.x-grid-section.x-panel-noborder.x-fit-item
{
margin: 0;
}
.x-tip .x-panel.x-box-item
{
top: 0 !important;
}
.x-tip-header-body .x-component.x-box-item
{
width: 100%;
text-align: center;
}
.x-tip-body
{
text-shadow: none;
}
.x-panel
{
margin: 20px;
}
ul
{
margin-left: 10px;
}
ul li
{
display: block;
font-weight: normal;
color: #fff;
padding: 2px;
}
</style>
<script type="text/javascript">
var saveChart = function (btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if (choice == 'yes') {
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
var tipsRenderer = function (si, item) {
this.setTitle("Voucher Total Price " + item.storeItem.get('Voucher_Price') + "$");
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false"
IDMode="Explicit" />
<div>
<ext:ChartTheme ID="FancyTheme" runat="server" ThemeName="Fancy" Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)">
<Axis Stroke="#eee" />
<AxisLabelLeft Fill="#eee" />
<AxisLabelBottom Fill="#eee" />
<AxisTitleLeft Fill="#eee" />
<AxisTitleBottom Fill="#eee" />
</ext:ChartTheme>
<ext:Portal ID="DashboardPortal" runat="server" Border="false">
<Items>
<ext:PortalColumn ID="PortalColumnVouchers" runat="server" ColumnWidth=".32" Cls="x-column-padding">
<Items>
<ext:Portlet ID="PortletVouchersStatusCount" runat="server" Title="Vouchers Status Count"
Height="250">
<TopBar>
<ext:Toolbar ID="ToolbarVouchersStatusCount" runat="server">
<Items>
<ext:Button ID="btnReloadVouchersStatusCount" runat="server" Text="Reload Data" Icon="ArrowRefresh"
OnDirectClick="ReloadData" />
<ext:Button ID="btnSaveVouchersStatusCount" runat="server" Text="Save Chart" Icon="Disk"
Handler="saveChart" />
<ext:ComboBox ID="ddlVoucherStatusUserAccount" runat="server" Name="VoucherStatusUserAccount"
DisplayField="FullName" ValueField="UserAccountId" EmptyText="Filter by User..."
Width="180" QueryMode="Local" TypeAhead="true" OnDirectSelect="ddlVoucherStatusUserAccount_Select">
<Store>
<ext:Store ID="ddlVoucherStatusUserAccountStore" runat="server">
<Model>
<ext:Model ID="ddlVoucherStatusUserAccountModel" runat="server" IDProperty="UserAccountId">
<Fields>
<ext:ModelField Name="FullName" />
<ext:ModelField Name="UserAccountId" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div style="color: gray">{FullName}</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart ID="ChartVouchersStatusCount" runat="server" Theme="Fancy" Shadow="true">
<AnimateConfig Easing="BounceOut" Duration="750" />
<Store>
<ext:Store ID="StoreVouchersStatusCount" runat="server" Data="<%# GetVouchersStatusAndCount() %>"
AutoDataBind="true">
<Model>
<ext:Model ID="ModelVouchersStatusCount" runat="server">
<Fields>
<ext:ModelField Name="Voucher_Status" />
<ext:ModelField Name="Voucher_Count" />
<ext:ModelField Name="Voucher_Price" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Background Fill="rgb(17, 17, 17)" />
<Gradients>
<ext:Gradient GradientID="v-1" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
<ext:GradientStop Offset="95150" Color="rgb(117, 14, 14)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-2" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
<ext:GradientStop Offset="95150" Color="rgb(94, 114, 13)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-3" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
<ext:GradientStop Offset="95150" Color="rgb(14, 117, 56)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-4" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
<ext:GradientStop Offset="95150" Color="rgb(14, 56, 117)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-5" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
<ext:GradientStop Offset="95150" Color="rgb(85, 10, 103)" />
</Stops>
</ext:Gradient>
</Gradients>
<Axes>
<ext:NumericAxis Fields="Voucher_Count" Title="Voucher Count" Minimum="0" Maximum="95150">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
<GridConfig>
<Odd Stroke="#555" />
<Even Stroke="#555" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Voucher_Status" Title="Voucher Status" />
</Axes>
<Series>
<ext:ColumnSeries Axis="Left" Highlight="true" XField="Voucher_Status" YField="Voucher_Count">
<Tips ID="TipVouchersStatusCount" runat="server" TrackMouse="true" Width="200" Height="25"
Layout="FitLayout">
<Renderer Fn="tipsRenderer" />
</Tips>
<Label Display="InsideEnd" Field="Voucher_Count" Orientation="Horizontal" Fill="#fff"
Font="17px Arial" TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Style Opacity="0.95" />
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</div>
</form>
</body>
</html>protected void ReloadData(object sender, DirectEventArgs e)
{
Store store = null;
store = this.ChartVouchersStatusCount.GetStore();
store.DataSource = VoucherBLL.GetVoucherChart_StatusAndCount();
store.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (Request.QueryString["UserAccountId"] != null)
this.UserAccountId = Converter.ToInt(Request.QueryString["UserAccountId"]);
if (!IsPostBack && !X.IsAjaxRequest)
{
ddlVoucherStatusUserAccountStore.DataSource = GetUserAccount();
ddlVoucherStatusUserAccountStore.DataBind();
ddlVoucherStatusUserAccountStore.Style.Add("color", "red");
}
}
catch (Exception ex)
{
throw new CustomException(ex, ErrorType.Base);
}
}
public void ddlVoucherStatusUserAccount_Select(object sender, DirectEventArgs e)
{
Store store = null;
UserAccount selectedUser;
try
{
if (ddlVoucherStatusUserAccount.SelectedItem.Index > -1)
{
store = this.ChartVouchersStatusCount.GetStore();
selectedUser = UserAccountBLL.Get(Converter.ToInt(ddlVoucherStatusUserAccount.SelectedItem.Value));
ChartVouchersStatusCount.RemoveAll();
if (selectedUser.DistributorCode != "")
{
store.DataSource = DistributorVouchersBLL.GetVoucherChart_StatusAndCount_DistributorFilter(selectedUser.UserAccountId);
store.DataBind();
}
if (selectedUser.ResellerCode != "")
{
store.DataSource = ResellerVouchersBLL.GetVoucherChart_StatusAndCount_ResellerFilter(selectedUser.UserAccountId);
store.DataBind();
}
ChartVouchersStatusCount.Redraw();
}
else
{
X.Msg.Alert("Data Filter", "Data filter unsupported");
}
}
catch (Exception ex)
{
X.Msg.Alert("Payment Delete", "Delete failed");
new CustomException(ex, ErrorType.Base);
}
}
public DataTable GetVouchersStatusAndCount()
{
try
{
DataTable dt = new DataTable();
if (this.UserRole == ProjectEnums.getUserRolesName(1))
{
dt = VoucherBLL.GetVoucherChart_StatusAndCount();
}
return dt;
}
catch (Exception ex)
{
throw new CustomException(ex, ErrorType.Base);
}
}
public DataTable GetUserAccount()
{
try
{
return UserAccountBLL.GetAllAsResellerAndDistributorAndAgent();
}
catch (Exception ex)
{
throw new CustomException(ex, ErrorType.Base);
}
}
Originally Posted by Baidaly
