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
Printable View
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
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. Attachment 5168 . Try this example:
Code:<%@ 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.MonthNames[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>