asp:Chart updatepanel timer flicker issue : The Official Microsoft ASP.NET Forums

Reply

Horizon

Member

155 Points

asp:Chart updatepanel timer flicker issue

Jun 13, 2012 04:07 PM|LINK

I have a chart refreshing every 1000 seconds from an timer control. I have done some searching and I think my chart is trying to redraw every update. I want to know if I am coding this right with my database querying or is there a better way to avoid the flicker?

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart2.aspx.cs" Inherits="Chart2" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!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>
        <title>ChartTitle</title>
        <link media="all" href="samples.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <form id="Form1" method="post" runat="server">
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
            <table class="sampleTable">
                <tr>
                    <td class="tdchart" style="width:412px">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
						<asp:Chart id="Chart3" runat="server" Palette="BrightPastel" BackColor="#FFFFFF" ImageType="Png" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Width="812px" Height="596px" BorderlineDashStyle="NotSet" BackGradientStyle="TopBottom" BorderWidth="0" BorderColor="26, 59, 105" EnableViewState="true">
							<titles>
								<asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3" Text="Overall Score" ForeColor="26, 59, 105"></asp:Title>
							</titles>
							<legends>
								<asp:Legend Enabled="False" IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>
							</legends>
							<series>
								<asp:Series ChartArea="ChartArea1" Name="Series1" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240">
								</asp:Series>
                            </series>
							<chartareas>
								<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
									<area3dstyle Rotation="10" Perspective="10" Enable3D="True" Inclination="15" IsRightAngleAxes="False" WallWidth="0" IsClustered="False" />
									<axisy LineColor="64, 64, 64, 64">
                                    <ScaleView Size="100" />
										<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
										<MajorGrid LineColor="64, 64, 64, 64" />
									</axisy>
									<axisx LineColor="64, 64, 64, 64">
										<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
										<MajorGrid LineColor="64, 64, 64, 64" />
									</axisx>
								</asp:ChartArea>
							</chartareas>
                        </asp:Chart>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                        </Triggers>
                      </asp:UpdatePanel>
                        <asp:UpdatePanel ID="upTimer" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                            <ContentTemplate>
                                <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
                                </asp:Timer>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</HTML>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;

public partial class Chart2 : System.Web.UI.Page
{

    protected String strConnectionString = (string)System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
    protected String strUserID = "0";
    protected String strType = "0";

    protected void Page_Load(object sender, System.EventArgs e)
    {

        if (IsPostBack)
        {
        }
        else
        {
            Chart3.ChartAreas[0].Area3DStyle.LightStyle = LightStyle.Realistic;
            getData(true);

        }
    }


    protected void getData(bool bolValue)
    {
        String strQueryString = Request.QueryString.ToString();
        if (strQueryString.IndexOf("Type") >= 0)
        {
            strType = Request["Type"].ToString();
        }
        int i = 0;
        string strQuery;
        //SQL Query
        strQuery = "EXEC sp_Report 1, 5, " + strType + ", 0, 'xyz'";

        SqlConnection cnn = new SqlConnection(strConnectionString);
        SqlCommand cmd = new SqlCommand(strQuery, cnn);

        cmd.Parameters.Add(new SqlParameter("@UserID", SqlDbType.Int));
        cmd.Parameters["@UserID"].Value = Int32.Parse(strUserID);
        cmd.Connection.Open();

        IDataReader reader = cmd.ExecuteReader();

        //Iterate through each factory
        while (reader.Read())
        {
            if (bolValue == true)
            {
                Chart3.Series["Series1"].Points.AddY(reader["Pct"]);
            }
            else
            {
                Chart3.Series["Series1"].Points[i].SetValueY(reader["Pct"]);
            }
            Chart3.Series["Series1"].Points[i].AxisLabel = reader["DisplayLabel"].ToString();
            Chart3.Series["Series1"].Points[i].Label = reader["Pct"].ToString() + "%";
            i++;
        }
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        getData(false);
    }
}

Edited by Horizon on Jun 13, 2012 04:07 PM

Reply

chetan.sarod...

All-Star

65719 Points

11133 Posts

Re: asp:Chart updatepanel timer flicker issue

Jun 14, 2012 03:20 AM|LINK

HI

MsCharts control which have been added to VS2008 and .net 3.5 framework has full fledge support for ajax functionality . Charts can act as triggers , can be nested within updatepanel etc . You can get to know more about MsCharts through the following article :- http://code.msdn.microsoft.com/mschart

You can set UpdatePanel UpdateMode property to Conditional. If your parent update panel's update mode is not conditional, then even if your child update panel is conditional, child update panel's content will update. So you'll see if your parent update panel can be set conditional in your application.

</div>

Chetan Sarode
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.

Reply

Horizon

Member

155 Points

79 Posts

Re: asp:Chart updatepanel timer flicker issue

Jun 14, 2012 02:04 PM|LINK

I did follow the example and my chart still blinks. I did remove the update mode off the parent and it still flickers, is it the way I am doing the data from the database on each tick count?

Reply

shimonbh

Member

8 Points

4 Posts

Re: asp:Chart updatepanel timer flicker issue

Dec 08, 2012 07:30 PM|LINK

Hi

I am facing the same problem,

Did you find a solution to this issue?

Regarding

asp:Chart updatepanel timer flicker issue RSS

3 replies

Horizon

asp:Chart updatepanel timer flicker issue

chetan.sarod...

Re: asp:Chart updatepanel timer flicker issue

Horizon

Re: asp:Chart updatepanel timer flicker issue

shimonbh

Re: asp:Chart updatepanel timer flicker issue

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft