updatepanel example

Nov 29, 2012 at 9:11 AM

any example on usage inside updatepanel?

when i place chart inside an updatepanel, chart diassappears after first roundtrip.

a sample would be helpfull.

Coordinator
Nov 29, 2012 at 5:15 PM
Hi,

I don't have a lot of experience using updatepanels but I assume your using ASP's flavor of AJAX updates. Have you tried to recreate the chart each time on postback. I think i remember that much with using update panels.


On Thu, Nov 29, 2012 at 2:11 AM, hmtalu <notifications@codeplex.com> wrote:

From: hmtalu

any example on usage inside updatepanel?

when i place chart inside an updatepanel, chart diassappears after first roundtrip.

a sample would be helpfull.

Read the full discussion online.

To add a post to this discussion, reply to this email (googlevisnet@discussions.codeplex.com)

To start a new discussion for this project, email googlevisnet@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com




--
Best Regards,

Julian King
(206) 697-4663
hoolmank@gmail.com
Nov 30, 2012 at 7:15 AM

Hi,

I try recreating the chart on every refresh, but it just disappears. Here is my code. I also try changing text of a label during refresh and that works well. 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

<%@ Register Assembly="GoogleChartsNGraphsControls" Namespace="GoogleChartsNGraphsControls" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" EnableViewState="True" Text="Button" />
                <cc1:GVColumnChart ID="GVColumnChart1" runat="server" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            
        </asp:UpdatePanel>
    </form>
</body>
</html>

Partial Class Test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Button1_Click(Nothing, Nothing)
    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim barchart As New System.Data.DataTable("Company Performance")
        Dim rand As New Random(System.Environment.TickCount)

        barchart.Columns.Add("Year", GetType(String))
        barchart.Columns.Add("Sales", GetType(Integer))
        barchart.Columns.Add("Expenses", GetType(Integer))
        barchart.Rows.Add(New Object() {"2004", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2005", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2006", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2007", rand.Next, rand.Next})

        GVColumnChart1.GviVAxis = "{title: 'Year', titleTextStyle: {color: 'red'} }"
        GVColumnChart1.ChartData(barchart)
        Label1.Text = rand.Next
    End Sub
End Class

 

Coordinator
Nov 30, 2012 at 4:15 PM
Zip and send me your simple test project and I will look if i can adapt the charts to work with ASP update panels.

Alternatively, don't update pages via AJAX, just do a postback and recreate the grid. Real easy. Ajax is fun and provides animation but ... if the page is simple no need.

Also don't forget, use my reload function on each chart.

var myArgs= JSON.stringify(document.form[0].elements); // should get all the fields and values in the form
chart_ChartName1.reload(myArgs, '\url\handler.ashx');

Markup

Gauge Example


<cc1:GVGauge ID="GVGauge1" runat="server" Width="250" Height="150" QueryString="~\AjaxUpdateHandler.ashx?type=gauge" GviRedFrom="80" GviRedTo="100" GviYellowFrom="50" GviYellowTo="80"/>

<asp:Button ID="ButtonReload" runat="server" OnClientClick="chart_GVGauge1.reload(); return false;" Text="Ajax Reload" />

Code

public void ProcessRequest(HttpContext context)
{
context
.Response.ContentType = "text/html";
context
.Response.AddHeader("Content-Disposition", "inline; filename=Response.json");
System.Data.DataTable dt = null;
Random rand = new Random(System.Environment.TickCount);

switch(context.Request.Params["type"])
{
case "column":
{
dt
= new System.Data.DataTable("Company Performance");
dt
.Columns.Add("Year", typeof(string));
dt
.Columns.Add("Sales", typeof(int));
dt
.Columns.Add("Expenses", typeof(int));
dt
.Rows.Add(new object[] { "2004", rand.Next(100, 1000), rand.Next(75,700) });
dt
.Rows.Add(new object[] { "2005", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2006", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2007", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2008", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2009", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2010", rand.Next(100, 1000), rand.Next(75, 700) });
dt
.Rows.Add(new object[] { "2011", rand.Next(100, 1000), rand.Next(75, 700) });
break;
}
default:
{
dt
= new System.Data.DataTable("Computer");
dt
.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("Label",typeof(string)),
new System.Data.DataColumn("Value",typeof(int))
});


dt
.Rows.Add(new object[] { "Memory", rand.Next(0, 100) });
dt
.Rows.Add(new object[] { "CPU", rand.Next(0, 100) });
dt
.Rows.Add(new object[] { "Network", rand.Next(0, 100) });
break;
}
}

context
.Response.Write(new Bortosky.Google.Visualization.GoogleDataTable(dt).GetJson());
}







On Fri, Nov 30, 2012 at 12:16 AM, hmtalu <notifications@codeplex.com> wrote:

From: hmtalu

Hi,

I try recreating the chart on every refresh, but it just disappears. Here is my code. I also try changing text of a label during refresh and that works well.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

<%@ Register Assembly="GoogleChartsNGraphsControls" Namespace="GoogleChartsNGraphsControls" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
            </Triggers>
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" EnableViewState="True" Text="Button" />
                <cc1:GVColumnChart ID="GVColumnChart1" runat="server" />
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            </ContentTemplate>
            
        </asp:UpdatePanel>
    </form>
</body>
</html>

Partial Class Test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Button1_Click(Nothing, Nothing)
    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim barchart As New System.Data.DataTable("Company Performance")
        Dim rand As New Random(System.Environment.TickCount)

        barchart.Columns.Add("Year", GetType(String))
        barchart.Columns.Add("Sales", GetType(Integer))
        barchart.Columns.Add("Expenses", GetType(Integer))
        barchart.Rows.Add(New Object() {"2004", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2005", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2006", rand.Next, rand.Next})
        barchart.Rows.Add(New Object() {"2007", rand.Next, rand.Next})

        GVColumnChart1.GviVAxis = "{title: 'Year', titleTextStyle: {color: 'red'} }"
        GVColumnChart1.ChartData(barchart)
        Label1.Text = rand.Next
    End Sub
End Class

Read the full discussion online.

To add a post to this discussion, reply to this email (googlevisnet@discussions.codeplex.com)

To start a new discussion for this project, email googlevisnet@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe or change your settings on codePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at codeplex.com




--
Best Regards,

Julian King
(206) 697-4663
hoolmank@gmail.com