[CLOSED] Window Show with Click Column Bar

  1. #1

    [CLOSED] Window Show with Click Column Bar

    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
    Last edited by Daniil; Nov 28, 2012 at 3:00 PM. Reason: [CLOSED]
  2. #2
    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. Click image for larger version. 

Name:	chart.PNG 
Views:	676 
Size:	48.4 KB 
ID:	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.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>
    Last edited by Baidaly; Nov 23, 2012 at 1:21 AM.

Similar Threads

  1. [CLOSED] Show context menu on column right click
    By RCM in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 15, 2013, 5:38 AM
  2. Replies: 2
    Last Post: Oct 22, 2012, 1:17 PM
  3. Replies: 4
    Last Post: Jul 17, 2012, 9:33 PM
  4. Replies: 4
    Last Post: Sep 17, 2010, 10:33 PM
  5. Replies: 8
    Last Post: May 17, 2010, 11:11 AM

Tags for this Thread

Posting Permissions