PDA

View Full Version : [CLOSED] "Stop running script" message in IE 8 in line chart



PriceRightHTML5team
Apr 23, 2014, 12:13 PM
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(LegendPosit ion.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.
http://forums.ext.net/attachment.php?attachmentid=10161&stc=1

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

Can you please give me the solution of this issue?

Vladimir
Apr 23, 2014, 4:16 PM
Try to set StepUnit for TimeAxis


.StepUnit(DateUnit.Month)

PriceRightHTML5team
Apr 24, 2014, 6:45 AM
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.

Vladimir
Apr 24, 2014, 6:54 AM
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