Dec 08, 2014, 8:12 AM
[CLOSED] [#583] Unable to call Listeners and Direct Events for the Ext Bar Series.
Hi Team,
We are working with a chart control (Bar Series), here i am unable to call a java script method or a code behind method on click bar Series.
i have tried listeners putting alert in it, still unable to fire the event.
Could you please help me out. Awaiting for your reply.
Here is the code
BizBites
We are working with a chart control (Bar Series), here i am unable to call a java script method or a code behind method on click bar Series.
i have tried listeners putting alert in it, still unable to fire the event.
Could you please help me out. Awaiting for your reply.
Here is the code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
public List<object> BindStoreData
{
get
{
if (Convert.ToInt16(hdnVal.Value) >= 3)
hdnVal.Value = 0;
List<object> data = new List<object>();
if (Convert.ToInt16(hdnVal.Value) == 0)
{
data = new List<object>
{
new { Name = "Annual Leave", Data1=25 },
new { Name = "Sick Leave", Data1=77 },
new { Name = "Parental Leave", Data1=55 },
new { Name = "Paid", Data1=99 },
new { Name = "Causal", Data1=40 },
new { Name = "Planned", Data1=60 },
new { Name = "Unpaid", Data1=44 }
};
}
else if (Convert.ToInt16(hdnVal.Value) == 1)
{
data = new List<object>
{
new { Name = "Annual Leave", Data1=40 },
new { Name = "Sick Leave", Data1=35 },
new { Name = "Parental Leave", Data1=30 },
new { Name = "Paid", Data1=70 },
new { Name = "Causal", Data1=90 },
new { Name = "Planned", Data1=80 },
new { Name = "Unpaid", Data1=30 }
};
}
else if (Convert.ToInt16(hdnVal.Value) == 2)
{
data = new List<object>
{
new { Name = "Annual Leave", Data1=36 },
new { Name = "Sick Leave", Data1=76 },
new { Name = "Parental Leave", Data1=22 },
new { Name = "Paid", Data1=87 },
new { Name = "Causal", Data1=80 },
new { Name = "Planned", Data1=90 },
new { Name = "Unpaid", Data1=100 }
};
}
return data;
}
}
protected void ReloadData(object sender, DirectEventArgs e)
{
if (hdnVal.Value != "")
hdnVal.Value = Convert.ToInt16(hdnVal.Value) + 1;
else
hdnVal.Value = 1;
this.Chart1.GetStore().DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<%-- <ext:Panel ID="pnlMax" runat="server" >
</ext:Panel>--%>
<ext:Panel ID="Panel1"
runat="server"
Title="Column Chart"
Width="800"
Height="600"
Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ComboBox ID="cmbMonths" runat="server">
<Items>
<ext:ListItem Text="January" Value="1"></ext:ListItem>
<ext:ListItem Text="February" Value="2"></ext:ListItem>
<ext:ListItem Text="March" Value="3"></ext:ListItem>
<ext:ListItem Text="April" Value="4"></ext:ListItem>
<ext:ListItem Text="May" Value="5"></ext:ListItem>
<ext:ListItem Text="June" Value="6"></ext:ListItem>
<ext:ListItem Text="July" Value="7"></ext:ListItem>
<ext:ListItem Text="August" Value="8"></ext:ListItem>
<ext:ListItem Text="September" Value="9"></ext:ListItem>
<ext:ListItem Text="October" Value="10"></ext:ListItem>
<ext:ListItem Text="November" Value="11"></ext:ListItem>
<ext:ListItem Text="December" Value="12"></ext:ListItem>
</Items>
<DirectEvents>
<Select OnEvent="ReloadData">
<EventMask Msg="Loading..." ShowMask="true" />
</Select>
</DirectEvents>
</ext:ComboBox>
<%--<ext:Button ID="Button1"
runat="server"
Text="Reload Data"
Icon="ArrowRefresh"
OnDirectClick="ReloadData" />--%>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:CartesianChart
ID="Chart1"
runat="server">
<AnimationConfig Easing="BounceOut" Duration="750" />
<Store>
<ext:Store ID="Store1"
runat="server"
AutoDataBind="true"
Data="<%# BindStoreData %>">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Gradients>
<ext:LinearGradient GradientID="v-1" Degrees="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
<ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
</Stops>
</ext:LinearGradient>
<ext:LinearGradient GradientID="v-2" Degrees="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
<ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
</Stops>
</ext:LinearGradient>
<ext:LinearGradient GradientID="v-3" Degrees="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
<ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
</Stops>
</ext:LinearGradient>
<ext:LinearGradient GradientID="v-4" Degrees="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
<ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
</Stops>
</ext:LinearGradient>
<ext:LinearGradient GradientID="v-5" Degrees="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
<ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
</Stops>
</ext:LinearGradient>
</Gradients>
<Axes>
<ext:NumericAxis
Position="Left"
Fields="Data1"
Title="Number of Hits"
Minimum="0"
Maximum="100">
<Renderer Handler="return Ext.util.Format.number(label, '0,0');" />
<GridConfig>
<Odd StrokeStyle="#555" />
<Even StrokeStyle="#555" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Type of Leave" />
</Axes>
<Series>
<ext:BarSeries
Highlight="true"
XField="Name"
YField="Data1">
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
FillStyle="#fff"
Font="17px Arial"
TextAlign="Center">
<Renderer Handler="return Ext.util.Format.number(text, '0');" />
</Label>
<Listeners>
<ItemClick Handler="alert('Hellooo')" />
</Listeners>
<StyleSpec>
<ext:Sprite Opacity="0.95" />
</StyleSpec>
<Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];return {fill : colors[index % colors.length]};" />
</ext:BarSeries>
</Series>
</ext:CartesianChart>
</Items>
</ext:Panel>
<ext:Hidden ID="hdnVal" runat="server"></ext:Hidden>
</div>
</form>
</body>
</html>BizBites
Last edited by Daniil; Feb 02, 2015 at 1:46 PM.
Reason: [CLOSED]
