HTML Chart not changing after postback in dock

5 posts, 0 answers
  1. William Higgins
    William Higgins avatar
    8 posts
    Member since:
    Jul 2009

    Posted 12 Oct 2012 Link to this post

    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>
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    1 posts
    Member since:
    Jul 2011

    Posted 25 Oct 2012 Link to this post

    did this get sorted. I have a similar problem

    thanks
  5. William Higgins
    William Higgins avatar
    8 posts
    Member since:
    Jul 2009

    Posted 25 Oct 2012 Link to this post

    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.
  6. William Higgins
    William Higgins avatar
    8 posts
    Member since:
    Jul 2009

    Posted 31 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017