This is a migrated thread and some comments may be shown as answers.

HTML Chart not changing after postback in dock

4 Answers 171 Views

Dock

This is a migrated thread and some comments may be shown as answers.

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

Dim avg As Decimal = tot / valCount

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>

<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

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.