I am using the Google Chart API to show the chart on the page on the drop down selection. This is working fine in IE but not in firefox 3.6 with update panel. When I remove the update panel then this is working fine in all browsers but if I use update panel
on the page then chart is disappering after changing the selection of drop down. It seems that google chart is not compatible with update panel.
My code is something like this. Please suggest where I am doing wrong.
I guess it may be caused by some setting in web.config, e.g. xhtmlConformance. But I am not sure. Update panel works differently not only on different browsers but also in different deployment environments. It sometime causes really bizarre and complex problems.
Thnks for the reply, but there is no guarantee that ESRI will remain alway a freeware tool. But it is sure with google. So I have to perform this with googlemap in any case.
harish.kr.ch...
Member
6 Points
12 Posts
Google Chart with update panel not working in firefox but fine in IE
Mar 17, 2011 07:32 AM|LINK
Hi,
I am new to this forums.
I am using the Google Chart API to show the chart on the page on the drop down selection. This is working fine in IE but not in firefox 3.6 with update panel. When I remove the update panel then this is working fine in all browsers but if I use update panel on the page then chart is disappering after changing the selection of drop down. It seems that google chart is not compatible with update panel.
My code is something like this. Please suggest where I am doing wrong.
/******************* default.aspx *******************/
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="SAGAdriving_Default2" %>
<!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>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 2);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 0);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 10);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { width: 400, height: 240, title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: 'red'} }, is3D: true });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="z-index: 2; vertical-align: middle; position: absolute; left: 450px;
top: 300px;">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/ajax-loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:DropDownList ID="ddlTime" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlTime_SelectedIndexChanged">
</asp:DropDownList>
<div id="chart_div">
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlTime" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
/******************* default.aspx.cs *******************/
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class SAGAdriving_Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ddlTime.Items.Add(new ListItem("lasttwoweeks", "1")); ddlTime.Items.Add(new ListItem("lastmonth", "2")); ddlTime.Items.Add(new ListItem("last3months", "3")); ddlTime.Items.Add(new ListItem("last12months", "4")); showchart(); } } protected void ddlTime_SelectedIndexChanged(object sender, EventArgs e) { showchart(); } private void showchart() { ScriptManager.RegisterStartupScript(Form.Page, Form.GetType(), "load", "drawChart();", true); } }Note: when I remove update panel from the page then it works fine in both firefox and IE.
firefox Ajax updatepanel
Small Peter
Contributor
2433 Points
484 Posts
Re: Google Chart with update panel not working in firefox but fine in IE
Mar 17, 2011 01:14 PM|LINK
I guess it may be caused by some setting in web.config, e.g. xhtmlConformance. But I am not sure. Update panel works differently not only on different browsers but also in different deployment environments. It sometime causes really bizarre and complex problems.
chetan.sarod...
All-Star
65749 Points
11148 Posts
Re: Google Chart with update panel not working in firefox but fine in IE
Mar 18, 2011 03:10 AM|LINK
Google maps cannot be nested inside an Update Panel as contains its on ajax, you can use an ESRI map to do that.
http://alpascual.com/blog/al/archive/2007/04/03/Using-ASP.NET-AJAX-with-the-Web-ADF-by-ScriptManager.aspx
http://forums.asp.net/t/1353890.aspx
http://forums.asp.net/p/1133531/2185505.aspx
</div>Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
harish.kr.ch...
Member
6 Points
12 Posts
Re: Google Chart with update panel not working in firefox but fine in IE
Jun 15, 2011 11:35 AM|LINK
Thnks for the reply, but there is no guarantee that ESRI will remain alway a freeware tool. But it is sure with google. So I have to perform this with googlemap in any case.
Again Thanks
harish.kr.ch...
Member
6 Points
12 Posts
Re: Google Chart with update panel not working in firefox but fine in IE
Jun 15, 2011 11:36 AM|LINK
No There is nothing like that.