|
 Asp.net usercontrol with charts. Charts slow to load |
| Posted by Soeren on May-13-2014 22:49 |
|
Hi
Having a bit of an issue with an asp.net user control containing some charts.
In code behind we might load multiple instances of this, but the images loads very slow.
It seems that they are generated fast enough but the actual loading in the browser is very slow. (500ms between each or so)
A very simplified example is attached.
Any ideas on why this is happening?
Thank you in advance
| | | | |
| Report.aspx.cs |
|---|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Diagnostics;
public partial class Report : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
DisplayCharts();
}
protected void DisplayCharts()
{
ASP.usercnt_ascx oControl1;
oControl1 = new ASP.usercnt_ascx();
lblContainer.Controls.Add(oControl1);
ASP.usercnt_ascx oControl2;
oControl2 = new ASP.usercnt_ascx();
lblContainer.Controls.Add(oControl2);
}
} |
|
| | | | |
| UserCnt.ascx.cs |
|---|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ChartDirector;
using System.Data;
public partial class Controls_RollUp : System.Web.UI.UserControl
{
// Page Load event handler
protected void Page_Load(object sender, EventArgs e)
{
GeneratePieChart1();
GeneratePieChart2();
}
//Code for creating Pie chart
public void GeneratePieChart1()
{
// The data for the pie chart
double[] data = { 25, 18, 15, 12, 8, 30, 35 };
// The labels for the pie chart
string[] labels = {"Labor", "Licenses", "Taxes", "Legal", "Insurance",
"Facilities", "Production"};
// Create a PieChart object of size 360 x 300 pixels
PieChart c = new PieChart(360, 300);
// Set the center of the pie at (180, 140) and the radius to 100 pixels
c.setPieSize(180, 140, 100);
// Set the pie data and the pie labels
c.setData(data, labels);
// Output the chart
PieChart1.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
PieChart1.ImageMap = c.getHTMLImageMap("", "",
"title='{label}: US${value}K ({percent}%)'");
}
//Code for creating Pie chart
public void GeneratePieChart2()
{
// The data for the pie chart
double[] data = { 25, 18, 15, 12, 8, 30, 35 };
// The labels for the pie chart
string[] labels = {"Labor", "Licenses", "Taxes", "Legal", "Insurance",
"Facilities", "Production"};
// Create a PieChart object of size 360 x 300 pixels
PieChart c = new PieChart(360, 300);
// Set the center of the pie at (180, 140) and the radius to 100 pixels
c.setPieSize(180, 140, 100);
// Set the pie data and the pie labels
c.setData(data, labels);
// Output the chart
PieChart2.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
PieChart2.ImageMap = c.getHTMLImageMap("", "",
"title='{label}: US${value}K ({percent}%)'");
}
} |
| |
| Re: Asp.net usercontrol with charts. Charts slow to load |
| Posted by Peter Kwan on May-14-2014 06:03 |
|
Hi,
You may try to add the following PageInit event handler in Report.aspx:
protected void Page_Init(object sender, EventArgs e)
{
ChartDirector.WebChartViewer.OnPageInit(this);
}
Like all other web pages, each image in a web page requires a separate HTTP request.
(This is part of the HTTP standard.) As your web page contains 4 images, it would need 5
HTTP requests.
Since the only URL in your case is Report.aspx, it means this page is accessed 5 times.
The first request is for creating the 4 charts, and create the HTML output with 4 <IMG>
tags so that the browser can load the chart images. The next 4 requests is for loading
the 4 chart images, again using Report.aspx.
In most cases, the WebChartViewer control is in the ASPX page that outputs the charts
(that is, in Report.aspx). In this case, the WebChartViewer control will intercept the 4
requests for the chart images, and deliver the images and abort the requests. As a
result, the Page_Load event handler is only executed once, even there are 5 requests,
because 4 of the requests are handled and then aborted by the WebChartViewer control.
However, for your case, the Report.aspx does not contain the WebChartViewer control.
So the Page_Load event is executed 5 times. Eventually, your code will create the user
control, which includes the WebChartViewer control. At that point, the WebChartViewer
control can intercept the requests for the chart images and deliver the images. So even
though it works, it is slower because the Page_Load event is executed 5 times, and in
your case, the Page_Load event can consume some CPU resource.
To address the above problem, ChartDirector has a method called
WebChartViewer.OnPageInit that you can put in the PageInit event handler of the web
page. This method allows the WebChartViewer to intercept the request before Page_Load
is executed, and is useful for web pages that uses WebChartViewer control but the ASPX
does not contain the control. See:
http://www.advsofteng.com/doc/cdnet.htm#WebChartViewer.OnPageInit.htm
Hope this can help.
Regards
Peter Kwan |
| Re: Asp.net usercontrol with charts. Charts slow to load |
| Posted by Soeren on May-14-2014 16:29 |
|
Hi Peter
And thanks for the reply.
I actually tried this already (Should have included it in the code), but it made no difference to the speed of loading the images.
It is all a bit strange. I have attached a screenshot showing the load speeds.
|
| Re: Asp.net usercontrol with charts. Charts slow to load |
| Posted by Peter Kwan on May-15-2014 02:12 |
|
Hi Soeren,
To avoid confusion, I have attached my test code for your reference. The only difference
is
the addition of the Page_Init handler.
I realize you are using "localhost:50416", which seems to suggest that the code is
running inside Visual Studio. To be sure the Page_Init handler is used, you may modify
the code to print some debug log to the VS output console, like:
protected void Page_Init(object sender, EventArgs e)
{
Debug.WriteLine("In Page_Init");
ChartDirector.WebChartViewer.OnPageInit(this);
Debug.WriteLine("Exit Page_Init");
}
When you load Report.aspx, you should see 5 lines of "In Page_Init" (as the Report.aspx
is accessed 5 times), but only one line of "Exit Page_Init" (as the WebChartViewer has
intercepted 4 of the requests).
I am also suspecting, may be the strange speed is a result of running the code in Visual
Studio. The Visual Studio, being a debugging environment, can significantly slow down a
lot of things, include the operation of the web server. For performance testing, it is
better to compile the code in release mode, and deploy it to a real IIS web server (not
the development web server at localhost:50416 or localhost:xxxx).
Note that many browsers will only allow two concurrent connections to the web server,
or the web server may limit the number of concurrent connections from a browser too. So
the first two HTTP requests can be faster, while subsequent requests may be held up in
a queue and not processed until the first two requests are completed.
Regards
Peter Kwan
| Report.aspx.cs |
|---|
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Diagnostics;
public partial class Report : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{
ChartDirector.WebChartViewer.OnPageInit(this);
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
DisplayCharts();
}
protected void DisplayCharts()
{
ASP.usercnt_ascx oControl1;
oControl1 = new ASP.usercnt_ascx();
lblContainer.Controls.Add(oControl1);
ASP.usercnt_ascx oControl2;
oControl2 = new ASP.usercnt_ascx();
lblContainer.Controls.Add(oControl2);
}
} |
| |
| Re: Asp.net usercontrol with charts. Charts slow to load |
| Posted by Soeren on May-16-2014 17:45 |
|
That is exactly what the problem was.
Windows 7 simultaneous request execution limit of 10.
Ran this on a windows 2012 server and there was no issue.
Thank you so much. Would never have thought of looking in that direction.
Great support as always! |
|
Forum Home
Search
Message List
Post Message
(Soeren)