Solved Timer loading dynamic chart causes screen to jump

Posted on 2014-08-09
Last Modified: 2014-08-09
On my site I am running the following code to dynamically
load a chart on the timer tick every few seconds. At the top of the page I have MaintainScrollPositionOnPostback="true"
but the screen jumps. How can I prevent the screen from jumping

    Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        Catch ex As Exception
            Response.Write(ex.Message & " aka34")
        End Try

    End Sub

    Sub oAdd_Random_Chart()


            ' Initialize the Chart object    
            Dim chart1 As New Chart()
            chart1.ID = "chart1"

            'Add to do code here

            ' Initialize objects and elements
            Dim chartArea1 As New ChartArea()
            Dim legend1 As New Legend()
            Dim series1 As New Series()
            Dim series2 As New Series()
            Dim series3 As New Series()
            Dim series4 As New Series()
            Dim series5 As New Series()

            ' Set the Chart Properties
            chart1.Width = 900
            chart1.Height = 340

            chart1.BackColor = System.Drawing.Color.Navy
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

            chart1.BorderlineColor = System.Drawing.Color.Gray
            'chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderlineWidth = 4
            chart1.BackGradientStyle = GradientStyle.LeftRight

            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.SlateGray
            chartArea1.BackGradientStyle = GradientStyle.LeftRight

            'Enable AJAX features such as zooming and scrolling for the ChartArea
            'chartArea1.CursorX.UserEnabled = True
            'chartArea1.CursorY.UserEnabled = True

            ' Add the ChartArea to the Chart

            ' Set the Legend properties
            legend1.Name = "Default"
            legend1.Docking = Docking.Bottom
            legend1.LegendStyle = LegendStyle.Row
            legend1.Alignment = System.Drawing.StringAlignment.Center

            legend1.BackColor = System.Drawing.Color.Transparent
            legend1.BorderColor = System.Drawing.Color.Black
            legend1.BorderWidth = 1

            ' Add the Legend to the Chart

            ' Set the Series properties
            series1.Name = "Store 1"
            series1.ChartType = SeriesChartType.Line
            series1.BorderColor = Drawing.Color.Black
            series1.BorderWidth = 3
            'following two lines used to change series line colors....
            series1.EmptyPointStyle.Color = Drawing.Color.Transparent
            series1.Color = Drawing.Color.DodgerBlue

            series2.Name = "Store 2"
            series2.BorderColor = System.Drawing.Color.DarkSlateGray
            series2.BorderWidth = 3
            series2.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series2.EmptyPointStyle.Color = Drawing.Color.Transparent
            series2.Color = Drawing.Color.Green

            series3.Name = "Store 3"
            series3.BorderWidth = 3
            series3.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series3.EmptyPointStyle.Color = Drawing.Color.Transparent
            series3.Color = Drawing.Color.Red

            series4.Name = "Store 4"
            series4.BorderWidth = 3
            series4.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series4.EmptyPointStyle.Color = Drawing.Color.Transparent
            series4.Color = Drawing.Color.Olive

            series5.Name = "Store 5"
            series5.BorderWidth = 3
            series5.ChartType = SeriesChartType.Line
            'following two lines used to change series line colors....
            series5.EmptyPointStyle.Color = Drawing.Color.Transparent
            series5.Color = Drawing.Color.MintCream

            ' Add the Series to the Chart

            ' Add points to each series.
            Dim rnd As New Random()
            Dim S As String = "Laptops,Desktops,Cameras,Smart Phones,Phones,Batteries,Computer Bags,Camera Bags,Accessories,Airtime,Modems,Memory Sticks,3g USB Modems"
            Dim arrSplit As Object = Split(S, ",")
            Dim oNewRandomNumber As String

            For Each ser As Series In chart1.Series
                For i As Integer = 0 To 12
                    'ser.Points.AddY(rnd.[Next](5, 10))
                    oNewRandomNumber = rnd.[Next](0, 100)
                    If ser.Name = "Store 1" Then
                        oNewRandomNumber = oNewRandomNumber * 0.5
                    ElseIf ser.Name = "Store 2" Then
                        oNewRandomNumber = oNewRandomNumber * 0.7
                    ElseIf ser.Name = "Store 3" Then
                        oNewRandomNumber = oNewRandomNumber * 0.9
                    ElseIf ser.Name = "Store 4" Then
                        oNewRandomNumber = oNewRandomNumber * 0.3
                    ElseIf ser.Name = "Store 5" Then
                        oNewRandomNumber = oNewRandomNumber * 0.6
                    End If
                    ser.Points.AddXY(arrSplit(i), oNewRandomNumber)

            Dim oTitle As String = "Sales Activity Across Stores"
            chart1.Titles.Add(New Title(oTitle, Docking.Top, New Font("Century Gothic", 13, FontStyle.Regular), Drawing.Color.White))
            'Preserve the chart's state during callbacks
            'chart1.CallbackStateContent = CallbackStateContent.All

            Dim up2 As New UpdatePanel
        Catch ex As Exception
            Response.Write(ex.Message & " tre34")
        End Try
    End Sub

Open in new window

Question by:murbro
    LVL 35

    Accepted Solution

    The fact that you need to use MaintainScrollPositionOnPostback is a hint that the whole page is being updated/refreshed instead of just updating the UpdatePanel. A quick look around the 'net suggests you may not be using the right trigger type; use AsyncPostBackTrigger, here is some aspx code that works for me, creating everything dynamically might also be possible but I haven't tried it:
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            test test test <br />
            ... <br />
            test test test <br />
            <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
                    <asp:Timer ID="Timer1" runat="server" Interval="2000">
                    <asp:Table ID="Table2" runat="server">
                    <asp:AsyncPostBackTrigger ControlID="Timer1" />

    Open in new window


    Author Closing Comment

    Hi Robert. Great answer! Thanks very much

    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
    Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
    Need more eyes on your posted question? Go ahead and follow the quick steps in this video to learn how to Request Attention to your question. *Log into your Experts Exchange account *Find the question you want to Request Attention for *Go to the e…
    In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now