Update Radchart on timer postback not working

Thread is closed for posting
3 posts, 0 answers
  1. James
    James avatar
    10 posts
    Member since:
    Apr 2013

    Posted 06 May 2013 Link to this post

    I am writing an application that creates potentially multiple dynamic charts on a page from parameters saved in a database.  When the page initially loads the charts are created after getting information from the database.  There is a timer on the page that executes a postback and I have code in the "IsPostback" block on page load that calls the function used to create the chart with the same parameters being passed as well as a call to the database to get the new values to update the chart.

    I can see that the new values are present when the code is run from the timer postback to create the chart and I can see through fiddler that the image never gets created because "chartimage.axd" never gets called again after the initial non-postback load on the server to be sent back to the browser.  What am I missing to make this work properly?

    Thanks for any help that can be provided.


    Code block run the initial time that chart is successfully created as well as each time after that when the timer fires.
    ChartSubpanelsTimer.Enabled = true;
    if (ConfigurationManager.AppSettings["ChartUpdateFrequency"] != "")
        ChartSubpanelsTimer.Interval = Convert.ToInt32(ConfigurationManager.AppSettings["ChartUpdateFrequency"])*1000;
    WpfChartSubpanelProperties chartProps = (WpfChartSubpanelProperties)subPanelProps;
    ViewState.Add("__Chart__" + subpanelCount, chartProps);
    if (chartProps.StreamId.ToString() != Guid.Empty.ToString())
        initScript += GetNewDataStreamIdScript(chartProps.StreamId.ToString(), chartProps.DataMappingFilter);
    initScript += string.Format("subpanels[{0}].dataStreams[0] = new dataStreamInfo(); ", subpanelCount);
    initScript += string.Format("subpanels[{0}].dataStreams[0].id = '{1}'; ", subpanelCount, chartProps.StreamId.ToString());
    initScript += string.Format("subpanels[{0}].dataStreams[0].keyField = '{1}'; ", subpanelCount, chartProps.KeyField);
    initScript += string.Format("subpanels[{0}].dataStreams[0].dataMappingFilter = \"{1}\"; ", subpanelCount, chartProps.DataMappingFilter);
    string strChartName = "";
    int iChartWidth = chartProps.Width;
    int iChartHeight = chartProps.Height;
    int iChartTopPadding = 0;
    int iChartLeftPadding = 0;
    int iChartTop = chartProps.Top;
    int iChartLeft = chartProps.Left;
    keyField = chartProps.KeyField;
    //Set up all common chart properties
    RadChart newChart = new RadChart();
    //Give chart ID
    newChart.ID = chartProps.Name;
    //set the background color
    newChart.BackColor = chartProps.BackColor;
    //set the chart size
    newChart.Width = iChartWidth;
    newChart.Height = iChartHeight;
    //set the border size and color
    newChart.Appearance.Border.Width = chartProps.BorderWidth;
    newChart.Appearance.Border.Color = chartProps.BorderColor;
    //Set the Chart Title and Appearance
    newChart.ChartTitle.Appearance.Position.AlignedPosition = AlignedPositions.Top;
    newChart.ChartTitle.Appearance.Dimensions.AutoSize = false;
    newChart.ChartTitle.Appearance.Dimensions.Width = iChartWidth - (chartProps.BorderWidth * 2);
    newChart.ChartTitle.Appearance.Dimensions.Height = 30;
    newChart.ChartTitle.Appearance.FillStyle.FillType = FillType.Solid;
    newChart.ChartTitle.Appearance.FillStyle.MainColor = Color.SaddleBrown;
    //Set the Chart Title Textblock Properties
    newChart.ChartTitle.TextBlock.Text = chartProps.Title;
    newChart.ChartTitle.TextBlock.Appearance.TextProperties.Font = new Font(chartProps.TitleFont.Name, chartProps.TitleFont.Size, chartProps.TitleFont.Style);
    newChart.ChartTitle.TextBlock.Appearance.TextProperties.Color = Color.White;
    newChart.ChartTitle.TextBlock.Appearance.Position.AlignedPosition = AlignedPositions.Top;
    //Charts don't allow autonscaling so cut it off
    newChart.PlotArea.YAxis.AutoScale = false;
    newChart.PlotArea.XAxis.AutoScale = false;
    //Setup the legend
    newChart.Legend.Appearance.Location = LabelLocation.OutsidePlotArea;
    switch (chartProps.LegendPosition)
        case ChartLegendLocation.Right:
            newChart.Legend.Appearance.Position.AlignedPosition = AlignedPositions.Right;       
        case ChartLegendLocation.Left:
            newChart.Legend.Appearance.Position.AlignedPosition = AlignedPositions.Left;
        case ChartLegendLocation.Top:
            newChart.Legend.Appearance.Position.AlignedPosition = AlignedPositions.Top;
        case ChartLegendLocation.Bottom:
            newChart.Legend.Appearance.Position.AlignedPosition = AlignedPositions.Bottom;
        case ChartLegendLocation.None:
            newChart.Legend.Visible = false;
    //retrieve data
    DataTable data = GetDataStream(chartProps.StreamId, chartProps.DataMappingFilter) ?? new DataTable();
    var view = new DataView(data);
    if (chartProps.PlotType == ChartPlotType.Graph)
        //Set the chart scale MIN and MAX values
        newChart.PlotArea.YAxis.MinValue = chartProps.MinChartValue;
        newChart.PlotArea.YAxis.MaxValue = chartProps.MaxChartValue;
        //Loop through and add each series in chart
        foreach (TDS.QuickCOM.ImageProfile.ChartSeriesProperties chartField in chartProps.ChartFields)
            ChartSeries chartSeries = new ChartSeries();
            chartSeries.Appearance.LabelAppearance.Visible = true;
            chartSeries.Name = chartField.Text;
            switch (chartField.SeriesType)
                case GridSeriesType.Area:
                    chartSeries.Type = ChartSeriesType.Area;
                case GridSeriesType.Bar:
                    //if horizontal bar then
                    chartSeries.Type = ChartSeriesType.Bar;
                    newChart.SeriesOrientation = ChartSeriesOrientation.Vertical;
                    //set the X Axis
                    foreach (DataRow dr in data.Rows)
                    //configure the tick settings for chart
                    ConfigureChartTickSettings(chartProps.TickRatio, newChart);
                    //set the Y axis
                case GridSeriesType.HorizontalBar:
                    chartSeries.Type = ChartSeriesType.Bar;
                    newChart.SeriesOrientation = ChartSeriesOrientation.Horizontal;
                case GridSeriesType.Line:
                    chartSeries.Type = ChartSeriesType.Line;
                    chartSeries.Appearance.LineSeriesAppearance.Color = Color.FromName(chartField.SeriesColor.ToString());
                case GridSeriesType.Spline:
                    chartSeries.Type = ChartSeriesType.Spline;
                    chartSeries.Appearance.LineSeriesAppearance.Color = Color.FromName(chartField.SeriesColor.ToString());
                case GridSeriesType.SplineArea:
                    chartSeries.Type = ChartSeriesType.SplineArea;
            //add series to chart
    else if (chartProps.PlotType == ChartPlotType.Doughnut)
    else if (chartProps.PlotType == ChartPlotType.Pie)
    else if (chartProps.PlotType == ChartPlotType.TimeSeries)
    System.Web.UI.WebControls.Panel ChartPanel = new System.Web.UI.WebControls.Panel();
    RadAjaxManager1.AjaxSettings.AddAjaxSetting(ChartSubpanelsTimer, newChart);
    //Add RadialGauge object to the div wrapper
    ChartPanel.ID = string.Format("StylePanel_{0}", chartProps.Name);
    ChartPanel.Height = iChartHeight;
    ChartPanel.Width = iChartWidth;
    //set style and background image for panel
    ChartPanel.Attributes.Add("style", string.Format("background-repeat:no-repeat; position: fixed; top: {0}px; left: {1}px; width: {2}px; height: {3}px; padding-left: {4}px; padding-top: {5}px;", iChartTop, iChartLeft, iChartWidth, iChartHeight, iChartLeftPadding, iChartTopPadding));
    RadAjaxPanel gaugeAjaxPanel = new RadAjaxPanel();
    gaugeAjaxPanel.ID = string.Format("UpdatePanel_{0}", chartProps.Name);


    My HttpHandler sections.
        <add verb="*" path="Dart.PowerWEB.LiveControls.GetResource.aspx" type="Dart.PowerWEB.LiveControls.ResourceHttpHandler,Dart.PowerWEB.LiveControls" />
        <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
        <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false" />
        <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />
        <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
        <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />
      <validation validateIntegratedModeConfiguration="false" />
      <modules runAllManagedModulesForAllRequests="true" />
        <remove name="ChartImage_axd" />
        <remove name="Telerik_Web_UI_SpellCheckHandler_axd" />
        <remove name="Telerik_Web_UI_DialogHandler_aspx" />
        <remove name="Telerik_RadUploadProgressHandler_ashx" />
        <remove name="Telerik_Web_UI_WebResource_axd" /><add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode" />
        <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode" />
        <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode" />
        <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode" />
        <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode" />
  2. James
    James avatar
    10 posts
    Member since:
    Apr 2013

    Posted 07 May 2013 Link to this post

    Okay, I now have the chartimage.axd being called on ever timer tick now, but the image never changes even though the data point values are changed when the chart is recreated.  Does anyone have any idea why this is occurring?  The image does get saved in session and its almost like the same image from session is being displayed every time.  I am quite sure that new values are being set for the chart data points.

    Please help if anyone has any idea what I am doing wrong here.


  3. Ves
    Ves avatar
    2916 posts

    Posted 09 May 2013 Link to this post

    Hi James,

    I examined your code and I found that you configure the control and add it to the page afterwards. Adding it this way, the entire control configuration is lost due to the viewstate being loaded. You must first add the control to the page and then configure it.

    Best regards,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top