[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

ASP.net Timer loading dynamic chart causes screen to jump

Posted on 2014-08-09
2
Medium Priority
?
436 Views
Last Modified: 2014-08-09
On my ASP.net site www.online-excel.com 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
        Try
            oAdd_Random_Chart()
        Catch ex As Exception
            Response.Write(ex.Message & " aka34")
        End Try

    End Sub


    Sub oAdd_Random_Chart()

        Try

            ' 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
            chart1.ChartAreas.Add(chartArea1)

            ' 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
            chart1.Legends.Add(legend1)

            ' 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
            chart1.Series.Add(series1)
            chart1.Series.Add(series2)
            chart1.Series.Add(series3)
            chart1.Series.Add(series4)
            chart1.Series.Add(series5)

            ' 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)
                Next
            Next

            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
            up2.ContentTemplateContainer.Controls.Add(chart1)
            'Panel1.Controls.Add(up2)
            'Me.Panel1.Controls.Add(chart1)
            Table2.Rows(0).Cells(0).Controls.Add(up2)
        Catch ex As Exception
            Response.Write(ex.Message & " tre34")
        End Try
    End Sub

Open in new window

0
Comment
Question by:Murray Brown
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 40250517
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">
    </asp:ScriptManager>
    <div>
        test test test <br />
        ... <br />
        test test test <br />
        <hr />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Timer ID="Timer1" runat="server" Interval="2000">
                </asp:Timer>
                <asp:Table ID="Table2" runat="server">
                <asp:TableRow>
                <asp:TableCell></asp:TableCell>
                </asp:TableRow>
                </asp:Table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
    </form>

Open in new window

0
 

Author Closing Comment

by:Murray Brown
ID: 40250695
Hi Robert. Great answer! Thanks very much
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
With just a little bit of  SQL and VBA, many doors open to cool things like synchronize a list box to display data relevant to other information on a form.  If you have never written code or looked at an SQL statement before, no problem! ...  give i…
Suggested Courses

825 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