PDA

View Full Version : [CLOSED] [#583] Unable to call Listeners and Direct Events for the Ext Bar Series.



mohan.bizbites
Dec 08, 2014, 8:12 AM
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



<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>


Thanks in Advance
BizBites

Daniil
Dec 10, 2014, 8:17 AM
Hi @mohan.bizbites,

Unfortunately, it is a problem in ExtJS 5.0.0 - no sprite-related events in Chart and Draw components.

Here is a couple of words regarding time frames.
http://forums.ext.net/showthread.php?48151&p=218121&viewfull=1#post218121

Daniil
Dec 19, 2014, 12:01 PM
It looks the events have been added in ExtJS 5.1.0. We've started to incorporate it into Ext.NET. Once we finish we will relese Ext.NET 3.1.0.

I've added the reference in the GitHub issue to post a follow-up here if any new info appears.
https://github.com/extnet/Ext.NET/issues/583

Daniil
Feb 02, 2015, 1:45 PM
I've just added the ChartItemEvents (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.chart.plugin.ItemEvents) plugin and related events in the revision #6296 (trunk). It goes to 3.1.0 beta.

Now you should be able to get the ItemClick (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.chart.series.Series-event-itemclick) event and others working by adding a ChartItemEvents plugin for a Chart:

<ext:CartesianChart runat="server">
<Plugins>
<ext:ChartItemEvents runat="server" />
</Plugins>
</ext:CartesianChart>

It is possible to listen to events of a specific Series (use a Series' Listeners) or of all Series (use a Chart's Listeners or DirectEvents).

Please let us know if you face any issues with this functionality.