Jul 09, 2014, 11:51 AM
[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
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
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
Last edited by Daniil; Jul 15, 2014 at 1:03 PM.
Reason: [CLOSED]