[CLOSED] Render a Chart on a DirectEvent

  1. #1

    [CLOSED] Render a Chart on a DirectEvent

    I have a south panel that I recreate a chart for based on the user selecting which Request Years to include. The initial Page Load displays the chart properly, but when I select an additional year the legend is updated, but the axis scale is not correct and the line series do not show up. When I resize the splitter bar the chart shows correctly.

    What am I doing wrong in the direct event? Sorry for the code being so long.

    I have commented out the masking because I thought that might be the problem, but it was not.

    Click image for larger version. 

Name:	snapshot01.png 
Views:	22 
Size:	24.9 KB 
ID:	6341Click image for larger version. 

Name:	snapshot02.png 
Views:	22 
Size:	29.2 KB 
ID:	6342Click image for larger version. 

Name:	snapshot03.png 
Views:	16 
Size:	18.4 KB 
ID:	6343Click image for larger version. 

Name:	snapshot04.png 
Views:	20 
Size:	47.1 KB 
ID:	6344

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Globalization" %>
    <script runat="server">
    
        public class ChartByMonth
        {
            public string Name { get; set; }
            public double? Y2013 { get; set; }
            public double? Y2012 { get; set; }
            public double? Y2011 { get; set; }
            public double? Y2010 { get; set; }
            public double? Y2009 { get; set; }
            public double? Y2008 { get; set; }
            public double? Y2007 { get; set; }
            public double? Y2006 { get; set; }
            public double? Y2005 { get; set; }
            public double? Y2004 { get; set; }
            public double? Y2003 { get; set; }
    
            public static Dictionary<String, ChartByMonth> GenerateData(int n = 12)
            {
                var data = new Dictionary<String, ChartByMonth>();
                for (int i = 0; i < n; i++)
                {
                    string month = CultureInfo.InvariantCulture.DateTimeFormat.GetAbbreviatedMonthName(i + 1);
                    data.Add(month, new ChartByMonth { Name = month });
                }
                return data;
            }
        }
    
        public class RequestsInfo
        {
            public int RequestMonth { get; set; }
            public int RequestYear { get; set; }
            public int Requests { get; set; }
        }
    
        protected void Page_Init(object sender, EventArgs e)
        {
            BuildChartYearCheckBoxes();
    
            ((Ext.Net.Checkbox)ChartYearsCbGroup.Items[0]).Checked = true;
        }
    
        protected void Page_Load(Object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
                return;
            
            BuildChart();
    
        }
    
        private void BuildChartYearCheckBoxes()
        {
            // Just hardcode years for this example
            for (int year = 2013; year >= 2003; year--)
            {
                ChartYearsCbGroup.Items.Add(new Ext.Net.Checkbox
                {
                    ID = "Y" + year.ToString(),
                    BoxLabel = year.ToString(),
                    InputValue = year.ToString(),
                    StyleSpec = "StyleSpec='font-size: 11px;'",
                    ClientIDMode = ClientIDMode.Static
                });
            }
    
    
        }
        protected void ChartYearsChange(object sender, DirectEventArgs e)
        {
            BuildChart();
        }
    
        private void BuildChart()
        {
            if (ChartPanelSouth.Hidden) return;
    
            CheckboxGroup cbGroup = X.GetCmp<CheckboxGroup>("ChartYearsCbGroup");
            List<Checkbox> yrsSelected = cbGroup.CheckedItems;
            if (yrsSelected.Count == 0)
            {
                ChartPanel.RemoveAll();
                ChartPanel.Update("<Select a Request Year to display a chart.</p>");
                ChartPanel.BodyStyle = "text-align: center; display: table-cell; vertical-align: middle;";
                ChartPanelSouth.Title = "Charts";
                Ext.Net.X.Mask.Hide();
                return;
            }
            else
            {
                //ChartPanel.ClearContent();
                ChartPanel.BodyStyle = "text-align: left; display:inline; vertical-align: top;";
            }
    
            ChartRequestsByMonth(yrsSelected);
    
        }
    
        private void ChartRequestsByMonth(List<Checkbox> yrsSelected)
        {
    
            int yrsSelectedCount = yrsSelected.Count();
    
            string[] yFields = new string[yrsSelectedCount];
            string[] yTitles = new string[yrsSelectedCount];
            for (int i = 0; i < yrsSelectedCount; i++)
            {
                yFields[i] = "Y" + yrsSelected[i].InputValue;
                yTitles[i] = yrsSelected[i].InputValue;
            }
    
            // Create: Line Chart (Requests by Months)
            Chart byMonthChart = new Chart();
            byMonthChart.ID = "CrtsChart";
            byMonthChart.ClientIDMode = ClientIDMode.Static;
            byMonthChart.StyleSpec = "background:#fff";
            byMonthChart.StandardTheme = StandardChartTheme.Category1;
            byMonthChart.ContextMenuID = "CrtsChart_ContextMenu";
    
            //if (!(Ext.Net.RequestManager.IsIE7 || Ext.Net.RequestManager.IsIE8))
            //{
            //    byMonthChart.Animate = true;
            //    byMonthChart.AnimateConfig = new AnimConfig { Easing = Easing.EaseIn, Duration = 1000 };
            //    byMonthChart.AnimateConfig.Listeners.AfterAnimate.Fn = "chartAnimateComplete";
            //}
            //else
            //    byMonthChart.Listeners.AfterRender.Handler = "Ext.net.Mask.hide();";
    
            // Configure: Chart Legend
            byMonthChart.LegendConfig = new ChartLegend();
            byMonthChart.LegendConfig.Position = LegendPosition.Right;
    
            // Create: Category Axis
            CategoryAxis cAxis = new CategoryAxis();
            cAxis.Position = Position.Bottom;
            cAxis.Title = "Month";
            cAxis.Fields = new String[] { "Name" };
            byMonthChart.Axes.Add(cAxis);
    
            // Create: Numeric Axis
            NumericAxis nAxis = new NumericAxis();
            nAxis.Position = Position.Left;
            nAxis.Title = "Requests";
            nAxis.Fields = yFields;
            nAxis.MinorTickSteps = 1;
            nAxis.Minimum = 0;
            nAxis.Grid = true;
            nAxis.GridConfig = new AxisGrid { Odd = new SpriteAttributes { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 } };
            byMonthChart.Axes.Add(nAxis);
    
            // Create: Line series for each year
            for (int i = 0; i < yrsSelectedCount; i++)
            {
                LineSeries lSeries = new LineSeries();
                lSeries.Axis = Position.Left;
                lSeries.XField = new string[] { "Name" };
                lSeries.YField = new string[] { "Y" + yrsSelected[i].InputValue };
                lSeries.Title = yrsSelected[i].InputValue;
                lSeries.HighlightConfig = new SpriteAttributes { Size = 7, Radius = 7 };
                lSeries.MarkerConfig = new SpriteAttributes { Size = 4, Radius = 4, StrokeWidth = 0 };
    
                // Configure: Line Series Tips
                lSeries.Tips = new ChartTip();
                lSeries.Tips.TrackMouse = true;
                lSeries.Tips.BodyStyle = "text-align: center; font-size: 9px; ";
                lSeries.Tips.Renderer.Handler = "this.update('<b>' + storeItem.get('Name') + ' ' + item.series.title + '<br/>Requests</b><hr><font color=blue>' + String(item.value[1]) + '</font>');";
                byMonthChart.Series.Add(lSeries);
            }
    
            // Create: Store
            Store store = new Store();
            store.ID = "ChartStore";
            store.ClientIDMode = ClientIDMode.Static;
    
            // Create: Model based on the years checked and add it to the store.
            store.Model.Add(createModel(yrsSelected));
    
            // Populate: Build the data for the store
            store.DataSource = generateData(yrsSelected).Values.ToList();
            //store.DataBind();
            byMonthChart.Store.Add(store);
    
            ChartPanel.RemoveAll();
            byMonthChart.AddTo(ChartPanel);
    
            ChartPanelSouth.Title = "Requests by Month";
    
        }
    
        // Create a model based on the years checked
        private Model createModel(List<Checkbox> yrsSelected)
        {
            Model model = new Model();
            model.ID = "ModelByMonth";
            model.Fields.Add("Name");
    
            for (int i = 0; i < yrsSelected.Count(); i++)
            {
                ModelField field = new ModelField();
                field.Name = "Y" + yrsSelected[i].InputValue;
                field.Type = ModelFieldType.Float;
    
                // Allow special interpretation of the data only for this line chart.
                field.Convert.Handler = "if (value === null) {value = undefined;} return value;";
                model.Fields.Add(field);
            }
            
            return model;
        }
    
        private Dictionary<String, ChartByMonth> generateData(List<Checkbox> yrsSelected)
        {
            var theData = ChartByMonth.GenerateData();
            Random random = new Random();
            double p = (random.NextDouble() * 11) + 1;
    
            RequestsInfo[] byMonthRequests = new RequestsInfo[yrsSelected.Count() * 12];
            for (int y = 0; y < yrsSelected.Count(); y++)
            {
                for (int m = 0; m < 12; m++)
                {
                    RequestsInfo ri = new RequestsInfo();
                    ri.RequestMonth = m + 1;
                    ri.RequestYear = Convert.ToInt32(yrsSelected[y].InputValue);
                    ri.Requests = Convert.ToInt32(Math.Floor(Math.Max(random.NextDouble() * 100, 0)));
                    byMonthRequests[y * 12 + m] = ri;
                }
            }
    
            foreach (var reqCnts in byMonthRequests)
            {
                string monthName = CultureInfo.InvariantCulture.DateTimeFormat.GetAbbreviatedMonthName(reqCnts.RequestMonth);
    
                switch (reqCnts.RequestYear)
                {
    
                    case 2013:
                        theData[monthName].Y2013 = reqCnts.Requests;
                        break;
    
                    case 2012:
                        theData[monthName].Y2012 = reqCnts.Requests;
                        break;
    
                    case 2011:
                        theData[monthName].Y2011 = reqCnts.Requests;
                        break;
    
                    case 2010:
                        theData[monthName].Y2010 = reqCnts.Requests;
                        break;
    
                    default:
                        break;
                }
    
            };
    
            return theData;
        }
        
    </script>
    <!DOCTYPE html >
    <html>
    <head id="Head1" runat="server">
        <title>Window issue IE7</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Center" runat="server" Region="Center" Title="Center" />
                <ext:Panel ID="ChartPanelSouth" runat="server" ClientIDMode="Static" Region="South"
                    Title="Charts" TitleAlign="Center" Icon="ChartBar" Height="240" Split="true"
                    Collapsible="true" Layout="BorderLayout" Collapsed="true">
                    <HtmlBin>
                        <script type="text/javascript">
    
                            function commonChartInit() {
                                Ext.net.Mask.show({ el: Ext.get('ChartPanel'), msg: 'Building Chart ...' });
                            }
    
                            var chartAnimateComplete = Ext.Function.createBuffered(function () { Ext.net.Mask.hide(); }, 1200);
    
                        </script>
                    </HtmlBin>
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Left" Vertical="true">
                            <Items>
                                <ext:Button ID="ChartYears" runat="server" ToolTip="years" Icon="Calendar" ArrowAlign="Right"
                                    MenuAlign="tl-tr" AutoShow="true">
                                    <Menu>
                                        <ext:Menu ID="ChartYearsMenu" runat="server" Title="Request Years" TitleAlign="Center"
                                            ShowSeparator="false" RenderToForm="true">
                                            <Items>
                                                <ext:CheckboxGroup ID="ChartYearsCbGroup" runat="server" ClientIDMode="Static" ColumnsWidths="80,80"
                                                    Vertical="true">
                                                    <%--<Listeners>
                                                        <Change Fn="commonChartInit" />
                                                    </Listeners>--%>
                                                    <DirectEvents>
                                                        <Change OnEvent="ChartYearsChange" />
                                                    </DirectEvents>
                                                </ext:CheckboxGroup>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </DockedItems>
                    <Items>
                        <ext:Panel ID="ChartPanel" runat="server" ClientIDMode="Static" Region="Center" Layout="BorderLayout">
                            <Items>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Baidaly; Jun 12, 2013 at 2:04 AM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    Seems I can't reproduce it with the latest Ext.NET sources from SVN trunk. Could you update and retest? If it is still reproducible, please tell us the browser (-s) you are testing in.
  3. #3
    I will bring my samples home and grab the latest trunk.
  4. #4
    Please close the thread. The latest revision in the trunk works just fine (5194). Not sure what changed.

Similar Threads

  1. [CLOSED] Chart tip render
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 16, 2013, 2:57 PM
  2. [CLOSED] Output Cache issue with Direct Method / Direct Event
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 18
    Last Post: Mar 01, 2013, 5:03 AM
  3. [CLOSED] Question about chart render speed
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 29
    Last Post: Jun 11, 2012, 2:51 PM
  4. Direct method and direct event over SSL?
    By dimitar in forum 1.x Help
    Replies: 0
    Last Post: Oct 08, 2011, 8:09 PM
  5. Replies: 3
    Last Post: Apr 20, 2010, 12:21 PM

Posting Permissions