Apr 23, 2014, 11:13 AM
[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
Other browsers also get in "Not Responding" mode when there is more data.
Can you please give me the solution of this issue?
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 Codeusing 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 Codeusing 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?
Last edited by Daniil; May 06, 2014 at 6:58 AM.
Reason: [CLOSED]