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
Here is the markup
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
>