Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

HTML Chart not changing after postback in dock

4 Answers 129 Views
Dock
This is a migrated thread and some comments may be shown as answers.
William Higgins
Top achievements
Rank 2
William Higgins asked on 12 Oct 2012, 12:43 PM
Hello,  I have dynamically created rad docks loading a user control with two rad combo box's and a rad html chart control.  The combo box's do a post back which in turn changes the parameters on the rad html chart but the chart never gets rendered again.  The html chart continues to show the initial data that was present on the first load.  I have attached the user control.  I have tried it without the ajax manager and the below code has the ajax manager included.  Niether approach will cause the html chart to render with the changed data.

Here is the code behind
Imports System.Drawing
Imports Telerik.Web.UI
Imports DevExpress.Web.ASPxGauges
Imports DevExpress.Web.ASPxGauges.Base
Imports DevExpress.XtraGauges.Base
Imports DevExpress.XtraGauges.Core.Drawing
Imports DevExpress.XtraGauges.Core.Model
Imports DevExpress.XtraGauges.Core.Base
Imports DevExpress.Web.ASPxGauges.Gauges.Circular
 
Public Class uChart
    Inherits System.Web.UI.UserControl
    Private _userName As String = ""
 
#Region "Page Init"
    Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        'TODO: Remove when security get's set up
        _userName = "wahiggi"
    End Sub
#End Region
 
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        Dim lbl As System.Web.UI.WebControls.Label = CType(Me.Controls(1), System.Web.UI.WebControls.Label)
        Dim pArray() As String = Split(lbl.Text, "|")
        lblServiceKey.Text = Trim(pArray(0))
        lblMetricKey.Text = Trim(pArray(1))
        lblType.Text = Trim(pArray(3))
 
        BuildRadChart()
    End Sub
 
#Region "Building Rad Html Chart"
    Private Sub BuildRadChart()
        RadHtmlChart1.Visible = True
        ASPxGaugeControl1.Visible = False
 
        Dim mm As String = lblMetricKey.Text
        Dim sKey As String = lblServiceKey.Text
        Dim dsh As New DashHelper()
        Dim startDate As String = ""
        Dim endDate As String = ""
 
        Dim dAr As Array = Split(dsh.GetDates(rcbFreq.SelectedValue), "|")
        startDate = dAr(0)
        endDate = dAr(1)
 
        Dim dt As DataTable = dsh.GetGraphValues(sKey, mm, startDate, endDate, rcbFreq.SelectedValue, "False", "Capacity")
 
        If RadHtmlChart1.PlotArea.Series.Count <> 0 Then
            RadHtmlChart1.PlotArea.Series.RemoveAt(0)
        End If
 
        If dt.Rows.Count > 0 Then
            Dim chartTitle As String = ""
            chartTitle = dt.Rows(0).Item(6).ToString()
            chartTitle = chartTitle & " By Geography"
 
            RadHtmlChart1.ID = "rHTMLChart7"
            RadHtmlChart1.Height = Unit.Pixel(250)
            RadHtmlChart1.ChartTitle.Text = chartTitle
            RadHtmlChart1.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Right
 
            Select Case lblType.Text
                Case "bar"
                    Dim chartData As BarSeries = RadBarSeries(dt)
                    RadHtmlChart1.PlotArea.Series.Add(chartData)
                Case "line"
                    Dim chartData As LineSeries = RadLineSeries(dt)
                    RadHtmlChart1.PlotArea.Series.Add(chartData)
            End Select
 
            RadHtmlChart1.PlotArea.XAxis.LabelsAppearance.RotationAngle = -45
            RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "DateKey"
            RadHtmlChart1.DataSource = dt
            RadHtmlChart1.DataBind()
        End If
    End Sub
#End Region
 
#Region "Building Gauge Chart"
    Private Sub BuildDevXChart()
        RadHtmlChart1.Visible = False
        ASPxGaugeControl1.Visible = True
 
        Dim mm As String = lblMetricKey.Text
        Dim sKey As String = lblServiceKey.Text
        Dim dsh As New DashHelper()
        Dim startDate As String = ""
        Dim endDate As String = ""
 
        Dim dAr As Array = Split(dsh.GetDates(rcbFreq.SelectedValue), "|")
        startDate = dAr(0)
        endDate = dAr(1)
 
        Dim dt As DataTable = dsh.GetGraphValues(sKey, mm, startDate, endDate, rcbFreq.SelectedValue, "False", "Capacity")
 
        If dt.Rows.Count > 0 Then
            Dim unit As String = ""
            unit = dt.Rows(0).Item(7).ToString()
            unit = FormatUit(unit)
 
            Dim minVal As Decimal = CDec(dt.Rows(0).Item(2).ToString())
            Dim maxVal As Decimal = CDec(dt.Rows(0).Item(2).ToString())
            Dim tot As Decimal = 0
            Dim valCount As Integer = dt.Rows.Count
 
            For Each row As DataRow In dt.Rows
                Dim val As Decimal = CDec(row.Item(2).ToString())
                If val < minVal Then minVal = val
                If val > maxVal Then maxVal = val
                tot += val
            Next
 
            If maxVal - minVal < 7 Then
                minVal = maxVal - 7
                If minVal < 0 Then
                    minVal = 0
                    maxVal = 7
                End If
            End If
 
            Dim avg As Decimal = tot / valCount
            avg = Math.Round(avg, 2)
 
            avg = Math.Round(avg, 2)
            minVal = Math.Round(minVal, 2)
            maxVal = Math.Round(maxVal, 2)
 
            ASPxGaugeControl1.Gauges.Clear()
 
            Dim circularGauge As CircularGauge = ASPxGaugeControl1.AddGauge(GaugeType.Circular)
            circularGauge.AddDefaultElements()
 
            Dim scale As ArcScaleComponent = circularGauge.Scales(0)
            Dim sCenter As PointF2D
            sCenter.X = 125
            sCenter.Y = 165
            scale.Center = sCenter
            scale.RadiusX = 107
            scale.RadiusY = 107
            scale.StartAngle = -180
            scale.EndAngle = 0
 
            scale.MinValue = minVal
            scale.MaxValue = maxVal
            scale.Value = avg
 
            scale.MajorTickCount = 7
            scale.MajorTickmark.FormatString = "{0:F0}"
            scale.MajorTickmark.ShapeType = TickmarkShapeType.Circular_Style11_4
            scale.MajorTickmark.ShapeOffset = -5
            scale.MajorTickmark.AllowTickOverlap = True
            Dim sMajorScale As FactorF2D
            sMajorScale.XFactor = 0.6
            sMajorScale.YFactor = 0.8
            scale.MajorTickmark.ShapeScale = sMajorScale
            scale.MajorTickmark.TextOffset = -17
            scale.MajorTickmark.TextOrientation = LabelOrientation.LeftToRight
 
            scale.MinorTickCount = 4
            scale.MinorTickmark.ShapeOffset = -2.5
            scale.MinorTickmark.ShapeType = TickmarkShapeType.Circular_Style11_3
            Dim sMinorScale As FactorF2D
            sMinorScale.XFactor = 0.6
            sMinorScale.YFactor = 1
            scale.MinorTickmark.ShapeScale = sMinorScale
            scale.AppearanceTickmarkText.TextBrush = New SolidBrushObject(Color.Black)
 
            Dim sLabel As ScaleLabel = New ScaleLabel
            sLabel.AllowHTMLString = True
            sLabel.Position = New PointF2D(125, 215)
            sLabel.AppearanceText.TextBrush = New SolidBrushObject(Color.White)
            sLabel.Size = New Size(250, 60)
            sLabel.Text = "Source: " & dt.Rows(0).Item(8).ToString() & " Measure: " & unit & vbCrLf & "Min Value: " & _
                minVal.ToString() & " Max Value " & maxVal.ToString() & vbCrLf & "Value: "
            scale.Labels.Add(sLabel)
 
            Dim needle As ArcScaleNeedleComponent = circularGauge.Needles(0)
            needle.ShapeType = NeedleShapeType.CircularFull_Style11
 
            Dim background As ArcScaleBackgroundLayer = circularGauge.BackgroundLayers(0)
            background.ShapeType = BackgroundLayerShapeType.CircularHalf_Style11
            background.ArcScale = scale
            Dim sCenterPos As PointF2D
            sCenterPos.X = 0.5
            sCenterPos.Y = 0.815
            background.ScaleCenterPos = sCenterPos
            Dim sSize As FactorF2D
            sSize.XFactor = 250
            sSize.YFactor = 154
            background.Size = sSize
 
 
            ASPxGaugeControl1.BackColor = Color.Transparent
            ASPxGaugeControl1.AutoLayout = True
        Else
            ASPxGaugeControl1.Gauges.Clear()
            ASPxGaugeControl1.Visible = False
        End If
    End Sub
#End Region
 
#Region "Supporting Functions"
    Private Function FormatUit(ByVal unit As String) As String
        Select Case unit
            Case "sec"
                unit = "Seconds"
            Case "days"
                unit = "Days"
            Case "Gb"
                unit = "GB"
            Case "hours"
                unit = "Hours"
            Case "Kb"
                unit = "KB"
            Case "Mb"
                unit = "MB"
            Case "percent"
                unit = "Percent"
            Case "total"
                unit = "Total"
        End Select
 
        Return unit
    End Function
    Private Function RadBarSeries(ByVal dt As DataTable) As BarSeries
        Dim chartData As New BarSeries()
        Dim unit As String = ""
        Dim cName As String = dt.Rows(0).Item(6).ToString()
        unit = dt.Rows(0).Item(7).ToString()
 
        chartData.Name = cName
        chartData.LabelsAppearance.Visible = False
        chartData.TooltipsAppearance.DataFormatString = "{0} " & unit
        chartData.DataField = "avValue"
        Return chartData
    End Function
    Private Function RadLineSeries(ByVal dt As DataTable) As LineSeries
        Dim chartData As New LineSeries()
        Dim unit As String = ""
        Dim cName As String = dt.Rows(0).Item(6).ToString()
        unit = dt.Rows(0).Item(7).ToString()
 
        chartData.Name = cName
        chartData.LabelsAppearance.Visible = False
        chartData.TooltipsAppearance.DataFormatString = "{0} " & unit
        chartData.DataField = "avValue"
        Return chartData
    End Function
    Private Sub RcbFreq_SelectedIndexChanged(sender As Object, e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles rcbFreq.SelectedIndexChanged
        If lblType.Text = "Bar" Or lblType.Text = "Line" Then
            BuildRadChart()
        Else
            BuildDevXChart()
        End If
    End Sub
    Private Sub RcbType_SelectedIndexChanged(sender As Object, e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles rcbType.SelectedIndexChanged
        lblType.Text = rcbType.SelectedValue
 
        If lblType.Text = "Bar" Or lblType.Text = "Line" Then
            BuildRadChart()
        Else
            BuildDevXChart()
        End If
    End Sub
#End Region
 
End Class

Here is the markup
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="uChart.ascx.vb" Inherits="USDashboard.uChart" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges.Gauges" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges.Gauges.Linear" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges.Gauges.Circular" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges.Gauges.State" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.ASPxGauges.v12.1, Version=12.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxGauges.Gauges.Digital" TagPrefix="dx" %>
 
<link href="../CSS/uchart.css" rel="stylesheet" type="text/css" />
 
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rcbFreq">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                <telerik:AjaxUpdatedControl ControlID="ASPxGaugeControl1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="rcbType">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadHtmlChart1" />
                <telerik:AjaxUpdatedControl ControlID="ASPxGaugeControl1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<div>
    <div>
        <table class="style1">
            <tr>
                <td>
                    <asp:Label ID="Label2" runat="server" ForeColor="White"
                        Text="Frequency" Font-Size="Small"></asp:Label>
                    <telerik:RadComboBox ID="rcbFreq" Runat="server" Skin="Office2010Black" AutoPostBack="True" Width="100px">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="Daily" Value="Daily" />
                            <telerik:RadComboBoxItem runat="server" Text="Weekly" Value="Weekly"
                                Selected="True" />
                            <telerik:RadComboBoxItem runat="server" Text="Monthly" Value="Monthly" />
                            <telerik:RadComboBoxItem runat="server" Text="Yearly" Value="Yearly" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server" ForeColor="White"
                        Text="Chart Type" Font-Size="Small"></asp:Label>
                    <telerik:RadComboBox ID="rcbType" runat="server" Skin="Office2010Black" AutoPostBack="True" Width="100px">
                        <Items>
                            <telerik:RadComboBoxItem runat="server" Text="Bar Chart" Value="Bar" />
                            <telerik:RadComboBoxItem runat="server" Text="Line Chart" Value="Line" />
                            <telerik:RadComboBoxItem runat="server" Text="Gauge Chart" Value="Gauge" />
                        </Items>
                    </telerik:RadComboBox>
                </td>
            </tr>
        </table>
    </div>
    <telerik:radhtmlchart runat="server" ID="RadHtmlChart1" Height="280px"></telerik:radhtmlchart>
    <dx:ASPxGaugeControl ID="ASPxGaugeControl1" runat="server" Height="260px"
        Width="260px" BackColor="White" Value="20" Visible="False">
        <gauges>
            <dx:CircularGauge Bounds="0, 0, 260, 260" Name="cGauge1">
                <scales>
                    <dx:ArcScaleComponent AppearanceTickmarkText-Font="Tahoma, 12pt"
                        AppearanceTickmarkText-TextBrush="<BrushObject Type="Solid" Data="Color:Black"/>"
                        Center="125, 165" EndAngle="0" MajorTickCount="7"
                        MajorTickmark-FormatString="{0:F0}" MajorTickmark-ShapeOffset="-5"
                        MajorTickmark-ShapeScale="0.6, 0.8"
                        MajorTickmark-ShapeType="Circular_Style11_4" MajorTickmark-TextOffset="-17"
                        MajorTickmark-TextOrientation="LeftToRight" MaxValue="80" MinorTickCount="4"
                        MinorTickmark-ShapeOffset="-2.5" MinorTickmark-ShapeScale="0.6, 1"
                        MinorTickmark-ShapeType="Circular_Style11_3" MinValue="20" Name="scale1"
                        RadiusX="107" RadiusY="107" StartAngle="-180" Value="20">
                    </dx:ArcScaleComponent>
                    <dx:ArcScaleComponent AppearanceTickmarkText-Font="Microsoft Sans Serif, 8pt, style=Bold"
                        AppearanceTickmarkText-TextBrush="<BrushObject Type="Solid" Data="Color:Black"/>"
                        Center="125, 165" EndAngle="-30" MajorTickCount="6"
                        MajorTickmark-FormatString="{0:F0}"
                        MajorTickmark-ShapeType="Circular_Style11_2" MajorTickmark-TextOffset="-15"
                        MajorTickmark-TextOrientation="LeftToRight" MaxValue="700" MinorTickCount="4"
                        MinorTickmark-ShapeType="Circular_Style11_1" MinValue="200" Name="scale2"
                        RadiusX="70" RadiusY="70" StartAngle="-180" Value="200" ZOrder="-1">
                    </dx:ArcScaleComponent>
                </scales>
                <backgroundlayers>
                    <dx:ArcScaleBackgroundLayerComponent Name="bg1" ScaleCenterPos="0.5, 0.815"
                        ScaleID="scale1" ShapeType="CircularHalf_Style11" Size="250, 154"
                        ZOrder="1000" />
                </backgroundlayers>
                <needles>
                    <dx:ArcScaleNeedleComponent EndOffset="5" Name="needle1" ScaleID="scale1"
                        ShapeType="CircularFull_Style11" StartOffset="-9.5" ZOrder="-50" />
                </needles>
            </dx:CircularGauge>
        </gauges>
        <LayoutPadding All="0" Left="0" Top="0" Right="0" Bottom="0"></LayoutPadding>
    </dx:ASPxGaugeControl>
</div>
<div style="visibility: hidden">
    <asp:Label ID="lblMan" runat="server" Text=""></asp:Label>
    <asp:Label ID="lblType" runat="server" Text=""></asp:Label>
    <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label>
    <asp:Label ID="lblServiceKey" runat="server" Text=""></asp:Label>
    <asp:Label ID="lblMetricKey" runat="server" Text=""></asp:Label>
</div>

4 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 15 Oct 2012, 01:13 PM
Hello William,

Most probably the RadHtmlChart is not updated because you change its ID from the code-behind and it is no longer referenced by the RadAjaxManager. You can try removing the following line and checking if the problem persists:
RadHtmlChart1.ID = "rHTMLChart7"

I noticed that you have opened a support ticket about the same problem. Please use a separate ticket/thread for reporting problems with the RadControls in the future. This way the information about the scenario will be easier to track. Let us continue our discussion in the support ticket on the matter.

All the best,
Slav
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.
0
Support
Top achievements
Rank 1
answered on 25 Oct 2012, 09:51 PM
did this get sorted. I have a similar problem

thanks
0
William Higgins
Top achievements
Rank 2
answered on 25 Oct 2012, 10:04 PM
No not yet.  I am working on another issue and will be revisiting this issue in the next few days.
Keep monitoring this post and I will reply with the solution.
0
William Higgins
Top achievements
Rank 2
answered on 31 Oct 2012, 08:33 PM
Chris, I ended up creating a standard aspx page from the content I had in my user control.  With some css styling you can fit the page within the dock's content area and the postback problems should go away.  Mine did.
Tags
Dock
Asked by
William Higgins
Top achievements
Rank 2
Answers by
Slav
Telerik team
Support
Top achievements
Rank 1
William Higgins
Top achievements
Rank 2
Share this question
or