First of all, I would like to appreciate Telerik Team for supporting our critical requirement development.
OK Coming to point.
I have to display some XY axis radchart to the user.
X-Axis values varies between -400 and +400 Or -1 and +1 (depends on data coming this X-axis value might varies)
Y-Axis values varies between 1 and +1000 (depends on data coming this X-axis value might varies)
Once user click on btnGetChartResult then I would like to show overview of the chart as attached (chart view issue due to number of x-axis scale points.png), In this chart let assume I have X-axis points from -400 to +400 (critical scenario)
If the User wants to see each and every X-axis point with their Y-axis aligned data, Then I would like to give a Zoom in option to see, Then the screen should looks like as attached(chart view issue due to number of x-axis scale points1.png).
Issue we are having with below code, If the user click on btnGetChartResult then the results are as attached(Chart display for on one 1Xaxis point.png).
Issue 1.If the chart has only 1 x-axis for whole chart, its showing zoomed view with scroll option.
Issue 2.Even If the chart has the points between -400 and +400, firstly I would like to show the chart without zoom, if the user wants, he can zoom-in the chart.
Issue 3.Even If am working with below code, sometimes it is showing various behavior in showing the data on chart, to get perfect results some times we are refreshing the chart by clicking on btnGetChartResult,
Please let me know, Where am making mistakes.
Your Help is greatly appreciated!
Thank You Very Much Telerik Team.
Satish
Chart.Aspx
<telerik:RadPageView ID="rpvCapacityTimeliness" runat="server">
<div style="padding: 5px; text-align: left;">
<asp:UpdatePanel ID="updCapacityTimeliness" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<p>
<telerik:RadChart AutoLayout="True" Height="450px" ID="CapacityRadChart" runat="server" Skin="WebBlue" Width="935px">
<ClientSettings EnableZoom="True" ScrollMode="Both" XScale="10" />
<Appearance>
<FillStyle MainColor="249, 250, 251">
</FillStyle>
<Border Color="160, 170, 182" />
</Appearance>
<Legend Visible="False">
<Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px" Dimensions-Paddings="2px, 8px, 6px, 3px"
Position-AlignedPosition="TopRight" Visible="False">
<ItemTextAppearance TextProperties-Color="102, 102, 102">
</ItemTextAppearance>
<FillStyle MainColor="216, 222, 227">
</FillStyle>
<Border Color="160, 170, 182" />
</Appearance>
</Legend>
<PlotArea>
<YAxis AutoScale="True" AxisMode="Extended">
<Appearance Color="160, 160, 160">
<MajorGridLines Color="227, 227, 227" />
<MinorGridLines Color="227, 227, 227" />
<TextAppearance AutoTextWrap="False" />
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="140, 140, 140">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<EmptySeriesMessage Visible="True">
<Appearance Visible="True">
</Appearance>
</EmptySeriesMessage>
<XAxis AutoScale="True" >
<Appearance Color="160, 160, 160">
<MajorGridLines Color="227, 227, 227" Width="0" />
<TextAppearance AutoTextWrap="True" TextProperties-Color="140, 140, 140" />
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="140, 140, 140">
</Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<Appearance Dimensions-Margins="18%, 24%, 12%, 10%">
<FillStyle FillType="Solid" MainColor="">
</FillStyle>
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock Text="Capacity Timeliness">
<Appearance TextProperties-Color="102, 102, 102" TextProperties-Font="Arial, 14pt">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</telerik:RadPageView>
Chart.Aspx.Vb
Private Sub ChartLoad(ByRef ds As DataSet, ByRef radchartcontrole As RadChart, ByRef monthlyradchartcontrole As RadChart, ByRef dataXColumnName As String, ByRef dataYColumnName As String,
ByRef xaxislableName As String, ByRef yaxislableName As String, ByRef monthlyXaxislableName As String, ByRef monthlyYaxislableName As String,
ByRef monthlyYaxisDataColumn As String, ByRef monthlyXaxisDataColumn As String, ByRef avgDataColumn As String, ByRef charttableValue As Int32,
ByRef monthlytableValue As Int32, ByRef avgTableValue As Int32, ByRef chartTitle As String, ByRef updatePaneltoHide As UpdatePanel, ByRef timeLinesAvgLabel As String)
Dim dt As DataTable = New DataTable()
dt = ds.Tables.Item(0)
If Not ds.Tables(0).Rows.Count > 0 Then
updatePaneltoHide.Visible = False
lblAvgDisplay.Text = "No Data Found for the " + chartTitle
lblAvgDisplay.ForeColor = System.Drawing.Color.Red
lblAvgDisplay.Font.Bold = True
lblAvgDisplay.Width = 300
Else
dt = ds.Tables.Item(0)
Dim list As New List(Of StressClass)
For Each dr As DataRow In dt.Rows
Dim sc As New StressClass()
sc.Count = Convert.ToInt32(dr(dataYColumnName))
sc.CapacityTimeliness = Convert.ToInt32(dr(dataXColumnName))
list.Add(sc)
Next
Dim series As New ChartSeries()
series.Type = ChartSeriesType.Bar
series.DataXColumn = dataXColumnName
series.DataYColumn = dataYColumnName
radchartcontrole.Clear()
radchartcontrole.Series.Add(series)
radchartcontrole.DataSource = list
radchartcontrole.DataBind()
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Text = xaxislableName
radchartcontrole.PlotArea.XAxis.AxisLabel.Visible = True
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
radchartcontrole.PlotArea.YAxis.AxisLabel.Visible = True
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Text = yaxislableName
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
radchartcontrole.Series(0).Appearance.BarWidthPercent = CType("10", Decimal)
Dim metricsAvg As String
metricsAvg = CType(ds.Tables(avgTableValue).Rows(0).Item(avgDataColumn), String)
radchartcontrole.ChartTitle.TextBlock.Visible = False
radchartcontrole.Legend.Visible = false
'Metrics Avg label display
lblAvgDisplay.Text = timeLinesAvgLabel + metricsAvg + "days"
lblAvgDisplay.Visible = true
lblAvgDisplay.Font.Bold = True
lblAvgDisplay.ForeColor = System.Drawing.Color.Red
'Binding the monthly chart data
monthlyradchartcontrole.Clear()
monthlyradchartcontrole.DataSource = ds.Tables.Item(monthlytableValue)
monthlyradchartcontrole.DataBind()
monthlyradchartcontrole.Series(0).DataXColumn = monthlyYaxisDataColumn
monthlyradchartcontrole.Series(0).DataYColumn = monthlyXaxisDataColumn
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Text = monthlyXaxislableName
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.Visible = True
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.Visible = True
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Text = monthlyYaxislableName
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
monthlyradchartcontrole.Legend.Visible = false
End If
End Sub
Public Class StressClass
Private _count As Integer
Public Property Count() As Integer
Get
Return _count
End Get
Set(ByVal value As Integer)
_count = value
End Set
End Property
Private _capacityTimeliness As Integer
Public Property CapacityTimeliness() As Integer
Get
Return _capacityTimeliness
End Get
Set(ByVal value As Integer)
_capacityTimeliness = value
End Set
End Property
End Class
OK Coming to point.
I have to display some XY axis radchart to the user.
X-Axis values varies between -400 and +400 Or -1 and +1 (depends on data coming this X-axis value might varies)
Y-Axis values varies between 1 and +1000 (depends on data coming this X-axis value might varies)
Once user click on btnGetChartResult then I would like to show overview of the chart as attached (chart view issue due to number of x-axis scale points.png), In this chart let assume I have X-axis points from -400 to +400 (critical scenario)
If the User wants to see each and every X-axis point with their Y-axis aligned data, Then I would like to give a Zoom in option to see, Then the screen should looks like as attached(chart view issue due to number of x-axis scale points1.png).
Issue we are having with below code, If the user click on btnGetChartResult then the results are as attached(Chart display for on one 1Xaxis point.png).
Issue 1.If the chart has only 1 x-axis for whole chart, its showing zoomed view with scroll option.
Issue 2.Even If the chart has the points between -400 and +400, firstly I would like to show the chart without zoom, if the user wants, he can zoom-in the chart.
Issue 3.Even If am working with below code, sometimes it is showing various behavior in showing the data on chart, to get perfect results some times we are refreshing the chart by clicking on btnGetChartResult,
Please let me know, Where am making mistakes.
Your Help is greatly appreciated!
Thank You Very Much Telerik Team.
Satish
Chart.Aspx
<telerik:RadPageView ID="rpvCapacityTimeliness" runat="server">
<div style="padding: 5px; text-align: left;">
<asp:UpdatePanel ID="updCapacityTimeliness" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<p>
<telerik:RadChart AutoLayout="True" Height="450px" ID="CapacityRadChart" runat="server" Skin="WebBlue" Width="935px">
<ClientSettings EnableZoom="True" ScrollMode="Both" XScale="10" />
<Appearance>
<FillStyle MainColor="249, 250, 251">
</FillStyle>
<Border Color="160, 170, 182" />
</Appearance>
<Legend Visible="False">
<Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px" Dimensions-Paddings="2px, 8px, 6px, 3px"
Position-AlignedPosition="TopRight" Visible="False">
<ItemTextAppearance TextProperties-Color="102, 102, 102">
</ItemTextAppearance>
<FillStyle MainColor="216, 222, 227">
</FillStyle>
<Border Color="160, 170, 182" />
</Appearance>
</Legend>
<PlotArea>
<YAxis AutoScale="True" AxisMode="Extended">
<Appearance Color="160, 160, 160">
<MajorGridLines Color="227, 227, 227" />
<MinorGridLines Color="227, 227, 227" />
<TextAppearance AutoTextWrap="False" />
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="140, 140, 140">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<EmptySeriesMessage Visible="True">
<Appearance Visible="True">
</Appearance>
</EmptySeriesMessage>
<XAxis AutoScale="True" >
<Appearance Color="160, 160, 160">
<MajorGridLines Color="227, 227, 227" Width="0" />
<TextAppearance AutoTextWrap="True" TextProperties-Color="140, 140, 140" />
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="140, 140, 140">
</Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<Appearance Dimensions-Margins="18%, 24%, 12%, 10%">
<FillStyle FillType="Solid" MainColor="">
</FillStyle>
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock Text="Capacity Timeliness">
<Appearance TextProperties-Color="102, 102, 102" TextProperties-Font="Arial, 14pt">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</telerik:RadPageView>
Chart.Aspx.Vb
Private Sub ChartLoad(ByRef ds As DataSet, ByRef radchartcontrole As RadChart, ByRef monthlyradchartcontrole As RadChart, ByRef dataXColumnName As String, ByRef dataYColumnName As String,
ByRef xaxislableName As String, ByRef yaxislableName As String, ByRef monthlyXaxislableName As String, ByRef monthlyYaxislableName As String,
ByRef monthlyYaxisDataColumn As String, ByRef monthlyXaxisDataColumn As String, ByRef avgDataColumn As String, ByRef charttableValue As Int32,
ByRef monthlytableValue As Int32, ByRef avgTableValue As Int32, ByRef chartTitle As String, ByRef updatePaneltoHide As UpdatePanel, ByRef timeLinesAvgLabel As String)
Dim dt As DataTable = New DataTable()
dt = ds.Tables.Item(0)
If Not ds.Tables(0).Rows.Count > 0 Then
updatePaneltoHide.Visible = False
lblAvgDisplay.Text = "No Data Found for the " + chartTitle
lblAvgDisplay.ForeColor = System.Drawing.Color.Red
lblAvgDisplay.Font.Bold = True
lblAvgDisplay.Width = 300
Else
dt = ds.Tables.Item(0)
Dim list As New List(Of StressClass)
For Each dr As DataRow In dt.Rows
Dim sc As New StressClass()
sc.Count = Convert.ToInt32(dr(dataYColumnName))
sc.CapacityTimeliness = Convert.ToInt32(dr(dataXColumnName))
list.Add(sc)
Next
Dim series As New ChartSeries()
series.Type = ChartSeriesType.Bar
series.DataXColumn = dataXColumnName
series.DataYColumn = dataYColumnName
radchartcontrole.Clear()
radchartcontrole.Series.Add(series)
radchartcontrole.DataSource = list
radchartcontrole.DataBind()
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Text = xaxislableName
radchartcontrole.PlotArea.XAxis.AxisLabel.Visible = True
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
radchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
radchartcontrole.PlotArea.YAxis.AxisLabel.Visible = True
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Text = yaxislableName
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
radchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
radchartcontrole.Series(0).Appearance.BarWidthPercent = CType("10", Decimal)
Dim metricsAvg As String
metricsAvg = CType(ds.Tables(avgTableValue).Rows(0).Item(avgDataColumn), String)
radchartcontrole.ChartTitle.TextBlock.Visible = False
radchartcontrole.Legend.Visible = false
'Metrics Avg label display
lblAvgDisplay.Text = timeLinesAvgLabel + metricsAvg + "days"
lblAvgDisplay.Visible = true
lblAvgDisplay.Font.Bold = True
lblAvgDisplay.ForeColor = System.Drawing.Color.Red
'Binding the monthly chart data
monthlyradchartcontrole.Clear()
monthlyradchartcontrole.DataSource = ds.Tables.Item(monthlytableValue)
monthlyradchartcontrole.DataBind()
monthlyradchartcontrole.Series(0).DataXColumn = monthlyYaxisDataColumn
monthlyradchartcontrole.Series(0).DataYColumn = monthlyXaxisDataColumn
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Text = monthlyXaxislableName
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.Visible = True
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
monthlyradchartcontrole.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.Visible = True
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Text = monthlyYaxislableName
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red
monthlyradchartcontrole.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True
monthlyradchartcontrole.Legend.Visible = false
End If
End Sub
Public Class StressClass
Private _count As Integer
Public Property Count() As Integer
Get
Return _count
End Get
Set(ByVal value As Integer)
_count = value
End Set
End Property
Private _capacityTimeliness As Integer
Public Property CapacityTimeliness() As Integer
Get
Return _capacityTimeliness
End Get
Set(ByVal value As Integer)
_capacityTimeliness = value
End Set
End Property
End Class