PDA

View Full Version : [CLOSED] Stacked Chart, How to get clicked YField



gs_user
Jan 25, 2013, 7:06 AM
Like following Samples
5475
When i click blue,i want to get "this is Data2"
the same, When i click read,i want to get "this is Data3"

How to get clicked YField name in ItemMouseDown ?




<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
protected void ReloadData(object sender, DirectEventArgs e)
{
Store store = this.Chart1.GetStore();

store.DataSource = Ext.Net.Examples.ChartData.GenerateData();
store.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Grouped Bar Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
function saveChart(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'
});
}
});
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Grouped Bar Sample</h1>

<p>Display 3 sets of random data in a grouped bar series.</p>

<p>Reload data will randomly generate a new set of data in the store. Click or hover on the legend items to highlight and remove them from the chart.</p>

<ext:Panel ID="Panel1"
runat="server"
Title="Grouped Bar Chart"
Width="800"
Height="600"
Layout="FitLayout">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1"
runat="server"
Text="Reload Data"
Icon="ArrowRefresh"
OnDirectClick="ReloadData"
/>

<ext:Button ID="Button2"
runat="server"
Text="Animate"
Icon="ShapesManySelect"
EnableToggle="true"
Pressed="true">
<Listeners>
<Toggle Handler="#{Chart1}.animate = pressed ? {easing: 'ease', duration: 500} : false;" />
</Listeners>
</ext:Button>

<ext:Button ID="Button3"
runat="server"
Text="Save Chart"
Icon="Disk"
Handler="saveChart"
/>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;"
Shadow="true"
Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store1"
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
<ext:ModelField Name="Data3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Position="Bottom"
Fields="Data1,Data2,Data3"
Title="Number of Hits"
Grid="true"
Minimum="0">
<Label>
<Renderer Fn="Ext.util.Format.numberRenderer('0,0')" />
</Label>
</ext:NumericAxis>

<ext:CategoryAxis
Fields="Name"
Position="Left"
Title="Month of the Year"
/>
</Axes>
<Series>
<ext:BarSeries
Axis="Bottom"
XField="Name" Stacked="true"
YField="Data1,Data2,Data3">
<Tips TrackMouse="true" Width="65" Height="28">
<Renderer Handler="this.setTitle(String(item.value[1] ) );" />
</Tips>
<Listeners>
<ItemMouseDown Handler="function(item) {
alert('You clicked ' + item.value)
} " />
</Listeners>

</ext:BarSeries>

</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

Daniil
Jan 25, 2013, 10:26 AM
Hi @gs_user,

Here you are.

<ItemMouseDown Handler="alert(item.yField);" />

gs_user
Jan 28, 2013, 6:04 AM
Thank's a lot
it's working


Hi @gs_user,

Here you are.

<ItemMouseDown Handler="alert(item.yField);" />