[CLOSED] Stop Running this script? Page becomes unresponsive in IE8 for Line Chart Graphs

  1. #1

    [CLOSED] Stop Running this script? Page becomes unresponsive in IE8 for Line Chart Graphs

    Hello Ext.Net Team,

    I have a huge set of data that get's rendered on line chart. Other browser it do takes time for rendering but on IE 8 it gives the dialog to stop the script.
    If by chance end user says "YES" then the chart renders partially.How shall i make the rendering fast. Please find the sample code below:

    //View
    @model List<object>
    @{
      
        var X = Html.X();
        Layout = null;
    }
    @functions
    {    
        private Ext.Net.Model getChartModel()
        {
            var chartModel = new Ext.Net.Model();
    
            chartModel.Fields.Add(new ModelField() { Name = "Name" });
            chartModel.Fields.Add(new ModelField() { Name = "Albania" });
            chartModel.Fields.Add(new ModelField() { Name = "France" });
            chartModel.Fields.Add(new ModelField() { Name = "Mexico" });
            chartModel.Fields.Add(new ModelField() { Name = "Spain" });
            chartModel.Fields.Add(new ModelField() { Name = "Portugal" });
            chartModel.Fields.Add(new ModelField() { Name = "US" });
            chartModel.Fields.Add(new ModelField() { Name = "Brazil" });
            chartModel.Fields.Add(new ModelField() { Name = "Chile" });
            chartModel.Fields.Add(new ModelField() { Name = "India" });
            chartModel.Fields.Add(new ModelField() { Name = "Pakistan" });
            chartModel.Fields.Add(new ModelField() { Name = "Sri" });
            chartModel.Fields.Add(new ModelField() { Name = "Nepal" });
            chartModel.Fields.Add(new ModelField() { Name = "Korea" });
            chartModel.Fields.Add(new ModelField() { Name = "Japan" });
            chartModel.Fields.Add(new ModelField() { Name = "C1" });
            chartModel.Fields.Add(new ModelField() { Name = "C2" });
            chartModel.Fields.Add(new ModelField() { Name = "C3" });
            chartModel.Fields.Add(new ModelField() { Name = "C4" });
            chartModel.Fields.Add(new ModelField() { Name = "C5" });
            chartModel.Fields.Add(new ModelField() { Name = "C6" });
            chartModel.Fields.Add(new ModelField() { Name = "C7" });
            chartModel.Fields.Add(new ModelField() { Name = "C8" });
            chartModel.Fields.Add(new ModelField() { Name = "C9" });
            return chartModel;
            
           
        }
     
        private string[] getNumericFields()
        {
            return new string[] { "Albania", "France", "Mexico", "Spain", "Portugal", "US", "Brazil", "Chile", "India", "Pakistan", "Sri", "Nepal", "Korea", "Japan"     , "C1","C2","C3","C4","C5","C6","C7","C8","C9"};
        }
    
      
        private SeriesCollection getColumnSeries()
        {
            SeriesCollection absSeries = new SeriesCollection();
    
            List<string> cdata = new List<string>();
            cdata.Add("Albania");
            cdata.Add("France");
            cdata.Add("Mexico");
            cdata.Add("Spain");
            cdata.Add("Portugal");
            cdata.Add("US");
            cdata.Add("Brazil");
            cdata.Add("Chile");
            cdata.Add("India");
            cdata.Add("Pakistan");
            cdata.Add("Chile");
            cdata.Add("Sri");
            cdata.Add("Nepal");
            cdata.Add("Korea");
            cdata.Add("Japan");
            cdata.Add("C1");
            cdata.Add("C2");
            cdata.Add("C3");
            cdata.Add("C4");
            cdata.Add("C5");
            cdata.Add("C6");
            cdata.Add("C7");
            cdata.Add("C8");
            cdata.Add("C9");
            absSeries = new SeriesCollection();
            
            foreach (var row in cdata)
            {
                absSeries.Add(
                            Html.X().LineSeries()
                                    .Axis(Position.Left)
                                    .XField("Name")
                                    .YField(row)
                                    .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                    .MarkerConfig(new SpriteAttributes { Type = SpriteType.Diamond, Size = 5, Radius = 5, StrokeWidth = 0 })
                                    .Tips(Html.X().ChartTip()
                                              .TrackMouse(true)
                                              .Height(28)
                                           .Renderer(r => r.Handler = "this.update('" + row+ ", Median, '+ storeItem.get('Name') + ', Cumulative Revenue:' + Ext.util.Format.number(storeItem.get('" + row + "'),'0.000'));"))
    
                            );
               
    
            }
    
            return absSeries;
     
           
     
        }
    }
     
    <!DOCTYPE html>
    <html>
    
    <body>
        @X.ResourceManager()
     
        @(X.Chart()
            .Width(1300)
            .Height(600)
            .Shadow(true)
            .LegendConfig(X.ChartLegend().Position(LegendPosition.Bottom))
            .Store(X.Store()
                .Data(Model)
                .Model(this.getChartModel())           
            )
            .Axes(
                X.NumericAxis()
                    .GridConfig(new AxisGrid() { Odd = new SpriteAttributes() { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 } })
                    .Fields(this.getNumericFields())
                    .Title("Revenue"),
    
                X.CategoryAxis()
                    .Position(Position.Bottom)
                    .Fields("Name")
                    .Title("Months").Label(new AxisLabel() { Rotate = new RotateAttribute() { Degrees = 315 } })
            )
            .Series(this.getColumnSeries())
        )
    </body>
    </html>
    //Controller
     public ActionResult About()
            {
                var chartDataList = getMockChartData();         
                return View(chartDataList);
            }
      public List<object> getMockChartData()
            {
    
                var chartDataList = new List<object>();
    
             
                chartDataList.Add(new { Name = "Sept-2013", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Oct-2013", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Nov-2013", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Dec-2013", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Jan-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Feb-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Mar-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Apr-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "May-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Jun-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Jul-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Aug-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Sept-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Oct-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Nov-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Dec-2014", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                   chartDataList.Add(new { Name = "Jan-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Feb-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Mar-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Apr-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "May-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Jun-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Jul-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Aug-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Sept-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Oct-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Nov-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});
                  chartDataList.Add(new { Name = "Dec-2015", Albania = 2.5, France = 2.8, Mexico = 9.5, Spain = 10.2 , Portugal = 11, US = 12 , Brazil = 1.5 , Chile = 22 , India = 11, Pakistan = 17 , Sri =22 , Nepal = 33,
                Korea = 22, Japan = 11 , C1 =24, C2= 13,C3= 13 , C4= 13 , C5 = 18,C7 = 55, C8 =12, C9=12});              
                return chartDataList;
    
            }
    ScreenShot:


    Please note that this model has 22 countries, but in our real time scenario we can have 45 countries.We do also have few custom tooltip rendering in javascript which adds up additional rendering time.

    Can you please let me know how to speed up this rendering time .

    Thanks
    Attached Thumbnails Click image for larger version. 

Name:	Dialog.PNG 
Views:	75 
Size:	92.0 KB 
ID:	13381  
    Last edited by Daniil; Jul 15, 2014 at 1:03 PM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    I am afraid I don't have any suggestions except reducing the amount of countries and/or markers shown to a user at a time.

    It is just too heavy for IE8.

    IE8 is not the ideal tool to work with the big amount of data.

Similar Threads

  1. [CLOSED] "Stop running script" message in IE 8 in line chart
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 24, 2014, 5:54 AM
  2. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM
  3. [CLOSED] Stop running this script?
    By ptrourke in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 05, 2013, 3:26 PM
  4. IE Error : Stop running this script?
    By pooja in forum 1.x Help
    Replies: 5
    Last Post: Nov 07, 2011, 7:22 AM
  5. [CLOSED] Error:Stop running this script
    By pbsoft in forum 1.x Help
    Replies: 2
    Last Post: Aug 05, 2010, 3:30 PM

Tags for this Thread

Posting Permissions