Ms charts : Area chart is not loading sometimes when using div.Load ,method to render a chart
I am trying to load mschart in my aspx page(SalesOverview.aspx) using jQuery.load() method, I am loading another aspx page(ChartHandler.aspx) which accepts the parameters and render the chart . but when trying to execute,the chart is not getting rendered sometimes.Instead i could see an image holder kind of thing in the page (Similar to what we see when we refer an invalid image url as an image tag src attribute value).
The code i am using is as below
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SalesOverview.aspx.cs" Inherits="OmnexCRM_UI.SalesOverview" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head></head>
<body>
<form id="frmPag1" runat="server">
<div id="divGraph"> </div>
</form>
</body>
$(document).ready(function() { var startDate ="10/10/2009" var endDate = "12/11/2009" var height = "150"; var width = "730";
var strUrl = "ChartHandler.aspx?chartMode=salesOverview&startDate=" + startDate + "&endDate=" + endDate + "&height=" + height + "&width=" + width;
$("#divGraph").html("<div class='divLoadingProdReport'><img src='images/ajax-loader-gray.gif' alt='Loading...'/></div>").fadeIn(10, function() {
jQuery.ajax({
url: strUrl,
type: "POST",
processData: false,
contentType: "text/xml",
data: null,
success: function(data) {
$("#divGraph").fadeOut(200, function() {
$(this).html(data).fadeIn(100);
});
}
}); //ajax
});
});
In ChartHandler.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>开发者_如何学Python;
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlSalesChart" CssClass="pnlSalesChart" Visible="false" runat="server">
</asp:Panel>
</div>
</form>
In ChartHandler.aspx.cs,In page load,i am reading the querystring values and building an area chart and adding that to the panel.
Couple of things:
- You're rendering a whole page to ajax, you should just render your panel
- You are doing a POST to your ChartHandler page, this should be a GET
- You're requesting text/xml, yet you aren't doing anything with xml
- You're requesting a webpage. Just use a generic handler (ashx) for stuff like this
Example code
HTML page
<form id="form1" runat="server">
<div>
<p>Test page</p>
<div id="renderPanel">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$.get("chart.ashx?propertyA=1&propertyB=2", function(data, textStatus) {
$("#renderPanel").html(data);
});
});
</script>
Create a generic handler (ashx) with the name 'Chart.ashx'
public class ChartHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
//process querystring, which is in 'context.Request.QueryString'
context.Response.ContentType = "text/html";
PlaceHolder wrapperPanel = new PlaceHolder();
//add your chart here
wrapperPanel.Controls.Add(
new Image() { ImageUrl = "http://www.geenstijl.nl/archives/images/niekijkenw.png" });
//render control to HTML
StringBuilder stringBuilder = new StringBuilder();
StringWriter stringWriter = new StringWriter(stringBuilder);
HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
wrapperPanel.RenderControl(htmlWriter);
context.Response.Write(wrapperPanel);
}
public bool IsReusable {
get {
return false;
}
}
}
Add in web.config under httpHandlers:
<add verb="*" path="~/Chart.ashx" validate="false" type="ChartHandler"/>
加载中,请稍侯......
精彩评论