PDA

View Full Version : [CLOSED] Window Show with Click Column Bar



osef
Nov 22, 2012, 7:36 PM
Hi, Can you please give me a example about how I can to do click on a column bar (ColumnSeries) (take parameter of axis vertical and title parameter in ext:ColumnSeries) and show me a ext window (with the parameters).

Regards

Baidaly
Nov 23, 2012, 1:14 AM
Hello!

You can listen the ItemClick event. There you have access to the 'item' variable withthe many of other data as storeItem, series, attr, etc. 5168 . Try this example:



<%@ Page Language="C#" %>
<%@ Import Namespace="System.Globalization" %>

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

<script runat="server">
public class ChartData {
public string Name { get; set; }

public double Data1 { get; set; }

public static List<ChartData> GenerateData(int n, int floor) {
List<ChartData> data = new List<ChartData>(n);
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;

for (int i = 0; i < n; i++) {
data.Add(new ChartData {
Name = CultureInfo.InvariantCulture.DateTimeFormat.MonthN ames[i % 12],
Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
});
}

return data;
}
}

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 runat="server">
<title>Column 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 runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True" ScriptMode="Debug" />

<h1>Column Chart Sample</h1>

<p>Display a sets of random data in a column series. Reload data will randomly generate a new set of data in the store.</p>

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

<ext:Button
runat="server"
Text="Save Chart"
Icon="Disk"
Handler="saveChart"
/>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true">
<Listeners>
</Listeners>
<Store>
<ext:Store
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData() %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Axes>
<ext:NumericAxis
Fields="Data1"
Grid="true"
Title="Number of Hits"
Minimum="0">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year"
/>
</Axes>
<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Name"
YField="Data1">
<Tips runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));" />
</Tips>
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
Color="#333"
TextAnchor="middle" >
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
<Listeners>
<ItemClick Handler="Ext.create('Ext.window.Window', { title: 'Window with values', html: item.storeItem.get('Data1') + ', ' + item.storeItem.get('Name') , width: 300, height: 200 }).show();"></ItemClick>
</Listeners>
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>