[CLOSED] Vertical Marker on partial line series

  1. #1

    [CLOSED] Vertical Marker on partial line series

    Here is a fun one that I didn't catch until I got back to the production system. I have a line series representing this year that is from January 2013 - July 2013 (I know it is only June). When I add a line series for 2012 there is data for all 12 months.

    When you move the Vertical Marker across the chart with a partial line series it stops on the last data point (June) (See the first image). I can not move the marker from July through December even though there are data points for 2012.

    I can bring the cursor off the window and start on the right side (December) and move to the left. The data label for June 2013 shows and along with the Nov 2012 data label (See the second image).

    Click image for larger version. 

Name:	VerticalMarker02a.PNG 
Views:	18 
Size:	48.3 KB 
ID:	6433Click image for larger version. 

Name:	VerticalMarker02b.PNG 
Views:	18 
Size:	48.2 KB 
ID:	6434

    Requires Trunk Revision 5215 (June 21, 2013)
    <%@ 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 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 >= 2009; 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;
    
            VerticalMarker vm = new VerticalMarker();
            vm.Snap = true;
            vm.ShowXLabel = false;
            byMonthChart.Plugins.Add(vm);
    
            // Configure: AfterRender to enable/disable Vertical Marker based on CheckMenuItem
            if (ShowVerticalMarkers.Checked == true)
                byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].enable();";
            else
                byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].disable();";
    
            // 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);
            }
    
            // Configure: AfterRender to enable/disable Vertical Marker based on CheckMenuItem
            //byMonthChart.Listeners.AfterRender.Handler += "chartTips(Ext.getCmp('ShowTips').checked);";
    
            // 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);
    
                    if (y == 0 && m >= 7)
                        ri.Requests = null;
                    else
                        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;
    
                    case 2009:
                        theData[monthName].Y2009 = 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="false">
                    <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);
    
                            function chartTips(checked) {
    
                                var chart = Ext.getCmp('CrtsChart');
    
                                for (var i = 0; i < chart.series.length; i++) {
                                    var series = chart.series.items[i];
    
                                    if (checked === false) {
                                        series.originalTooltip = series.tooltip;
                                        delete series.tooltip;
                                    }
                                    else {
                                        // Just incase we start out as true, there is nothing in the original.
                                        if (series.originalTooltip != undefined)
                                            series.tooltip = series.originalTooltip;
                                        delete series.originalTooltip;
                                    }
                                }
                            }
    
                        </script>
                    </HtmlBin>
                    <Bin>
                        <ext:Menu ID="CrtsChart_ContextMenu" runat="server" ClientIDMode="Static" RenderToForm="true"
                            Title="Chart Options" TitleAlign="Center">
                            <Items>
                                <ext:CheckMenuItem ID="ShowTips" runat="server" ClientIDMode="Static" Checked="true"
                                    Text="Tips">
                                    <Listeners>
                                        <CheckChange Handler="chartTips(this.checked)" />
                                    </Listeners>
                                </ext:CheckMenuItem>
                                <ext:CheckMenuItem ID="ShowVerticalMarkers" runat="server" ClientIDMode="Static"
                                    Checked="true" Text="Vertical Marker">
                                    <Listeners>
                                        <CheckChange Handler="if (checked === true) {Ext.getCmp('CrtsChart').plugins[0].enable();} else {Ext.getCmp('CrtsChart').plugins[0].disable();};" />
                                    </Listeners>
                                </ext:CheckMenuItem>
                            </Items>
                        </ext:Menu>
                    </Bin>
                    <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 26, 2013 at 7:28 PM. Reason: [CLOSED]
  2. #2
    Hello!

    It seems VerticalMarker wasn't designed for this case. We are investigating.
  3. #3
    I haven't looked closely at the code to determine if changes are possible to make it work. I only showed a line series that has null values for the last 5 months. A line series could also have null data for the first couple of months (e.g. We didn't start collecting data until April).

    Not a huge rush, going on vacation Monday for a week.
    Last edited by cwolcott; Jun 22, 2013 at 11:54 PM.
  4. #4
    Vladimir has committed the fix to the trunk.

    I am closing the thread, but please feel free to provide any feedback.
  5. #5
    Sorry not done yet.

    1) If you have a line series showing and the vertical marker showing a javascript error occurs when you de-select the line series in the legend.

    "Cannot read property dist of null"

    2) If I turn on two line series with line series 1 having null data after June and line series 2 have null data before April. Then turn on the vertical marker where only one line series exists. A javascript error occurs:

    "Unable to get property getXY of undefined or null reference"

    3) If you turn on the marker where both series exist everything works where both line series works. When you move to the right (towards Dec) everything works when only one line series exists. When you move to the left (towards Jan) it doesn't work when only one line series works.

    Below is the code I used to reproduce the issues.
    Line series 1 will only populate months Jan - June;
    Line series 2 will only populate months Apr - Dec;
    Line series 3+ will populate all months;

    <%@ 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 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();
    
        }
    
        protected void Page_Load(Object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
                return;
    
            ((Ext.Net.Checkbox)ChartYearsCbGroup.Items[0]).Checked = true;
            BuildChart();
    
        }
    
        private void BuildChartYearCheckBoxes()
        {
            // Just hardcode years for this example
            for (int year = 2013; year >= 2009; 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("<p>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;
    
            VerticalMarker vm = new VerticalMarker();
            vm.Snap = true;
            vm.ShowXLabel = false;
            byMonthChart.Plugins.Add(vm);
    
            // Configure: Enable/Disable Vertical Marker based on contextmenu
            if (ShowVerticalMarkers.Checked == true)
                byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].enable();";
            else
                byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].disable();";
    
            // 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>');";
    
                // Configure: Enable/Disable series tooltip based on contextmenu.
                lSeries.Listeners.AfterRender.Handler = "chartTips(Ext.getCmp('ShowTips').checked);";
    
                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);
    
                    if ((y == 0 && m >= 6) || (y == 1 && m <=2))
                        ri.Requests = null;
                    else
                    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;
    
                    case 2009:
                        theData[monthName].Y2009 = 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="false">
                    <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">
                            <HtmlBin>
                                <script type="text/javascript">
                                    function chartTips(checked) {
    
                                        var chart = Ext.getCmp('CrtsChart');
    
                                        for (var i = 0; i < chart.series.length; i++) {
                                            var series = chart.series.items[i];
    
                                            if (checked === false) {
                                                series.originalTooltip = series.tooltip;
                                                delete series.tooltip;
                                            }
                                            else {
                                                // Just incase we start out as true, there is nothing in the original.
                                                if (series.originalTooltip != undefined)
                                                    series.tooltip = series.originalTooltip;
                                                delete series.originalTooltip;
                                            }
                                        }
                                    }
                                </script>
                            </HtmlBin>
                            <Bin>
                                <ext:Menu ID="CrtsChart_ContextMenu" runat="server" ClientIDMode="Static" RenderToForm="true"
                                    Title="Chart Options" TitleAlign="Center">
                                    <Items>
                                        <ext:CheckMenuItem ID="ShowTips" runat="server" ClientIDMode="Static" Checked="true"
                                            Text="Tips">
                                            <Listeners>
                                                <CheckChange Handler="chartTips(this.checked)" />
                                            </Listeners>
                                        </ext:CheckMenuItem>
                                        <ext:CheckMenuItem ID="ShowVerticalMarkers" runat="server" ClientIDMode="Static"
                                            Checked="false" Text="Vertical Marker">
                                            <Listeners>
                                                <CheckChange Handler="if (checked === true) {Ext.getCmp('CrtsChart').plugins[0].enable();} else {Ext.getCmp('CrtsChart').plugins[0].disable();};" />
                                            </Listeners>
                                        </ext:CheckMenuItem>
                                    </Items>
                                </ext:Menu>
                            </Bin>
                            <Items>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  6. #6
    Bump, reminder that this thread is not closed. See the post above about issues with Trunk Revision 5218 and premature closure.
  7. #7
    Thank you for the report. It should be fixed in SVN trunk. Please update.
  8. #8
    Please close the thread. Thank you for the fixes. Everything checks out perfectly.

Similar Threads

  1. [CLOSED] Disable/Enable Vertical Marker based on Context Menu
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 21, 2013, 1:44 PM
  2. [CLOSED] Disable Line Series Tips
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 19, 2013, 4:12 PM
  3. How to use Line series Chart in version 1.3
    By Binai in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2013, 12:46 PM
  4. [CLOSED] Adding line series tooltip dynamically.
    By RCM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2013, 7:06 PM
  5. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM

Posting Permissions