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

How to dynamically set plotbands for HTML Chart when xaxis are dates

3 Answers 246 Views

Chart (HTML5)

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

Peter asked on 11 Sep 2016, 12:01 AM

I have a HTML Chart that works great to plot Line Series data against hourly date/time values in the X axis. I want to shade weekend dates based on the selected date range. So this needs to be done dynamically in code. I suspect that I'm not setting the From/To values correctly. I found one reference that suggested that these should be in OADate format. But this doesn't seem to work. But there may be other issues that I'm not seeing. Here is my code. Any help is greatly appreciated.

Here's the relevant Markup

<telerik:RadHtmlChart runat="server" Width="1000px" Height="300px" BackColor="AntiqueWhite" PlotArea-XAxis-LabelsAppearance-TextStyle-FontSize="9pt"

ID="rhcLogsLast24hrs" BorderWidth="1" >

<PlotArea>

<Series>

<telerik:LineSeries DataFieldY="LogParserSuccess" Name="Log Parser" >

<TooltipsAppearance Color="White" DataFormatString="{0:n0}"/>

<LabelsAppearance Visible="False" DataFormatString="{0:n0}" />

<Appearance FillStyle-BackgroundColor="#5ab7de">

<FillStyle ></FillStyle>

</Appearance>

<LineAppearance Width="1" />

<MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="8" BorderColor="#5ab7de"

BorderWidth="2"></MarkersAppearance>

<TooltipsAppearance Color="White">

<ClientTemplate>

#=dataItem.LogParserSuccess# Million Log Events Parsed on<br />#=dataItem.Hour#

</ClientTemplate>

</TooltipsAppearance>

</telerik:LineSeries

</Series>

<XAxis DataLabelsField="Hour" >

<LabelsAppearance RotationAngle="90" DataFormatString="{0:M/d h tt}">

</LabelsAppearance>

<TitleAppearance Text="Hour">

</TitleAppearance>

</XAxis>

<YAxis>

<LabelsAppearance DataFormatString="{0:n0}" >

</LabelsAppearance>

<TitleAppearance Text="Log Events" >

</TitleAppearance>

</YAxis>

</PlotArea>

<Legend >

<Appearance Visible="True" Position="Right">

</Appearance>

</Legend>

<ChartTitle Text="Log Events">

</ChartTitle>

</telerik:RadHtmlChart>

Here is the relevant Code Behind:

rhcLogsLast24hrs.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0:M/d h tt}"

rhcLogsLast24hrs.PlotArea.XAxis.TitleAppearance.Text = "Hour"

rhcLogsLast24hrs.PlotArea.YAxis.TitleAppearance.Text = "Log Events (Millions)"

If ts.TotalHours > 24 Then

rhcLogsLast24hrs.PlotArea.XAxis.LabelsAppearance.Step = ts.TotalHours / 20

End If

Dim I As Integer = 0

For Each dr As DataRow In dt.Rows

Dim thisdate As DateTime = dr("Hour")

If thisdate.DayOfWeek = DayOfWeek.Saturday Or thisdate.DayOfWeek = DayOfWeek.Sunday Then

Dim band As PlotBand = New PlotBand()

band.Color = System.Drawing.Color.Green

band.Alpha = 190

band.From = thisdate.ToOADate

band.To = thisdate.AddHours(1).ToOADate

rhcLogsLast24hrs.PlotArea.XAxis.PlotBands.Add(band)

End If

I += 1

Next

rhcLogsLast24hrs.DataSource = dt

rhcLogsLast24hrs.DataBind()

Thanks!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to dynamically set plotbands for HTML Chart when xaxis are dates

3 Answers, 1 is accepted