[CLOSED] "Stop running script" message in IE 8 in line chart

  1. #1

    [CLOSED] "Stop running script" message in IE 8 in line chart

    Hi Ext Team,

    I have a line chart with multiple line series. It works well in all browsers except native IE 8.

    Below is the sample code:

    1. CSHTML Page
    @model List<ExtNetPractice.Models.ChartModel>
    @{
        ViewBag.Title = "Line Chart";
        var X = Html.X();
    }
    @(X.Panel()
            .Title("Line Chart")
            .Layout(LayoutType.Fit)
            .Width(1000)
            .Height(600)
            .Items(
                X.Chart()
                    .ID("Chart1")
                    .ShadowMode(ShadowMode.None)
                    .StandardTheme(StandardChartTheme.Category2)
                    .Animate(true)
                    .LegendConfig(X.ChartLegend().Position(LegendPosition.Right))
                    .Store(
                            X.Store()
                            .Data(Model)
                            .Model(
                                    X.Model()
                                     .Fields(
                                                X.ModelField().Name("DateColumn").Type(ModelFieldType.Date),
                                                X.ModelField().Name("Data1"),
                                                X.ModelField().Name("Data2"),
                                                X.ModelField().Name("Data3")
                                            )
                                   )
                    )
                    .Axes(
                        X.NumericAxis()
                            .Fields(new[] { "Data1", "Data2", "Data3" })
                            .Title("Price")
                            .MinorTickSteps(1)
                            .Minimum(0)
                                .GridConfig(X.AxisGrid()
                                    .Odd(new SpriteAttributes { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 })
                                ),
    
                        X.TimeAxis()
                            .DateFormat("dd-MMM-yyyy")
                            .FromDate(new DateTime(2014, 01, 31))
                            .ToDate(new DateTime(2015, 12, 31))
                            .Position(Position.Bottom)
                            .Fields("DateColumn")
                            .Title("Date")
                    )
                    .Series(
                        X.LineSeries()
                            .Axis(Position.Left)
                            .Smooth(3)
                            .XField("DateColumn")
                            .YField("Data1")
                            .HighlightConfig(new SpriteAttributes { Size = 5, Radius = 0 })
                            .Label(X.SeriesLabel()
                                        .Display(SeriesLabelDisplay.Over)
                                        .Orientation(Orientation.Vertical)
                                        .Renderer(r => r.Handler = "return (Ext.util.Format.currencySign + storeItem.get('Data2'));")
                                  )
                            .Tips(X.ChartTip()
                                    .TrackMouse(true)
                                    .Width(140)
                                    .Height(28)
                                    .Renderer(r => r.Handler = "this.setTitle(Ext.util.Format.date(storeItem.get('DateColumn'),'d-M-Y') + ': '+ Ext.util.Format.currencySign + storeItem.get('Data1'));")
                                 )
                            .Style(new SpriteAttributes { StrokeDashArray = "5", StrokeWidth = 2 })
                            .MarkerConfig(new SpriteAttributes { Type = SpriteType.Square, Size = 5, Radius = 5, Fill = "White", StrokeWidth = 2 }),
    
                        X.LineSeries()
                .Axis(Position.Left)
                .Smooth(3)
                .XField("DateColumn")
                .YField("Data2")
                .HighlightConfig(new SpriteAttributes { Size = 5, Radius = 0 })
                .Label(X.SeriesLabel()
                            .Display(SeriesLabelDisplay.Over)
                            .Field(new[] { "Data2" })
                            .Orientation(Orientation.Vertical)
                            .Renderer(r => r.Handler = "return (Ext.util.Format.currencySign + storeItem.get('Data2'));")
                      )
                .Tips(X.ChartTip()
                        .TrackMouse(true)
                        .Width(140)
                        .Height(28)
                        .Renderer(r => r.Handler = "this.setTitle(Ext.util.Format.date(storeItem.get('DateColumn'),'d-M-Y') + ': '+ Ext.util.Format.currencySign + storeItem.get('Data2'));")
                     )
                .Style(new SpriteAttributes { StrokeWidth = 2 })
                .MarkerConfig(new SpriteAttributes { Type = SpriteType.Square, Size = 5, Radius = 5, Fill = "White", StrokeWidth = 2 }),
    
                        X.LineSeries()
                .Axis(Position.Left)
                .Smooth(3)
                .XField("DateColumn")
                .YField("Data3")
                .Style(new SpriteAttributes { StrokeWidth = 2 })
                .HighlightConfig(new SpriteAttributes { Size = 5, Radius = 0 })
                .MarkerConfig(new SpriteAttributes { Type = SpriteType.Square, Size = 5, Radius = 5, Fill = "White", StrokeWidth = 2 })
                .Label(X.SeriesLabel()
                            .Display(SeriesLabelDisplay.Over)
                            .Field(new[] { "Data3" })
                            .Orientation(Orientation.Vertical)
                            .Renderer(r => r.Handler = "return (Ext.util.Format.currencySign + storeItem.get('Data3'));")
                      )
                .Tips(X.ChartTip()
                        .TrackMouse(true)
                        .Width(140)
                        .Height(28)
                        .Renderer(r => r.Handler = "this.setTitle(Ext.util.Format.date(storeItem.get('DateColumn'),'d-M-Y') + ': '+ Ext.util.Format.currencySign + storeItem.get('Data3'));")
                     )
                    )
            )
        )
    2. Controller Code
    using Ext.Net;
    using Ext.Net.MVC;
    using ExtNetPractice.Models;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace ExtNetPractice.Controllers
    {
        public class HomeController : Controller
        {
    
            public ActionResult LineChartDemo()
            {
                List<ChartModel> demoData = new List<ChartModel>();
                for (int i = 1; i <= 20; i++)
                {
                    demoData.Add(new ChartModel()
                        {
                            DateColumn = new DateTime(2014, 02, 01).AddMonths(i),
                            Data1 = 20 + i*2,
                            Data2 = 21 + i*3,
                            Data3 = 22 + i*4
                        });
                }
                return View(demoData);
            }
    }
    }
    3. Model Code
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace ExtNetPractice.Models
    {
        public class ChartModel
        {
            public DateTime DateColumn { get; set; }
    
            public double Data1 { get; set; }
    
            public int Data2 { get; set; }
    
            public int Data3 { get; set; }
        }
    }
    I am getting "Stop running script" message in native IE 8 only. Please see the screenshot.


    Other browsers also get in "Not Responding" mode when there is more data.

    Can you please give me the solution of this issue?
    Attached Thumbnails Click image for larger version. 

Name:	IE8-JS-Error.PNG 
Views:	64 
Size:	31.3 KB 
ID:	10161  
    Last edited by Daniil; May 06, 2014 at 6:58 AM. Reason: [CLOSED]
  2. #2
    Try to set StepUnit for TimeAxis
    .StepUnit(DateUnit.Month)
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by Vladimir View Post
    Try to set StepUnit for TimeAxis
    .StepUnit(DateUnit.Month)
    Hi @Vladimir,

    It works when records are less than 300 or so but when records gets bigger in number that message comes again.
  4. #4
    IE8 has slow javascript engine therefore do not expect that it can display very hard charts (in your case you have three series with 300 points for each series). It is atleast >2000 DOM elements for series + DOM elements for chart (axies)

    So, you should reduce amount of points for browser like IE8
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Replies: 1
    Last Post: Nov 06, 2013, 3:52 PM
  2. [CLOSED] Stop running this script?
    By ptrourke in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 05, 2013, 3:26 PM
  3. Replies: 7
    Last Post: Dec 19, 2012, 3:02 PM
  4. Replies: 6
    Last Post: Nov 15, 2011, 2:02 AM
  5. Replies: 3
    Last Post: Oct 16, 2011, 5:46 PM

Posting Permissions