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

Chart issue with time values in X axis

5 Answers 283 Views

Chart (Obsolete)

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

john asked on 19 Dec 2011, 02:56 PM

Hello,

I'm experiencing some issues with RadChart when using time values in X axis.

I'm trying to develop a sample web for displaying measures that are periodically registered from a source. These measures are displayed using both a grid and a chart. I read the measures from the last minute and I show its values in the grid (date/time of the measure and its value), and in the chart (x axis show the time and y axis shows the value of the measures).

For example, supposing that every 5 seconds we have a new measure, we will show 13 measures in a full minute. with a timer, I'm reading the measures and updating the grid and the chart with the values of the last minute. The problem is that, sometimes, the chart is not displaying all the measures (only displays 11 values, while the grid displays 13 values).
The measures list object is the same for the grid and the chart (I use DataSource and DataBind() for both), and the chart sometimes doesn't work fine.

What is happening with this? Do you know if there is a known issue for causing this situation?

Here's the code from a similar app that reproduces the issue using random values:

public class Measure

{

private DateTime mtime; //time of measurement

public DateTime Mtime

{

get { return mtime; }

set { mtime = value; }

}

private double numericMtime; //for chart representation

public double NumericMtime

{

get { return numericMtime; }

set { numericMtime = value; }

}

private double value; //value of measurement

public double Value

{

get { return this.value; }

set { this.value = value; }

}

public Measure(DateTime dt, double v)

{

mtime = dt;

numericMtime = dt.ToOADate();

value = v;

}

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

GenerateMeasures();

myTimer.Interval = 10 * 1000;

myTimer.Enabled = true;

startBtn.Enabled = false;

stopBtn.Enabled = true;

}

protected void myTimer_Tick(object sender, EventArgs e)

{

GenerateMeasures();

}

private void GenerateMeasures()

{

DateTime start, end;

start = DateTime.Now;

end = start.AddSeconds(60); //full period

double interval = 5; //interval between measures

//generate new random measures list

Random r = new Random();

Measure m;

List<Measure> measureList = new List<Measure>();

DateTime tcont = start;

while (tcont <= end)

{

m = new Measure(tcont, r.Next(5, 95));

measureList.Add(m);

tcont = tcont.AddSeconds(interval);

}

//set data to grid

myGrid.DataSource = measureList;

myGrid.DataBind();

//config chart (x axis)

double tenSencondsStep = (1.0 / (24.0 * 60.0 * 60.0))*10.0;

myChart.PlotArea.XAxis.AutoScale = false;

myChart.PlotArea.XAxis.AddRange(measureList[0].NumericMtime, measureList[measureList.Count - 1].NumericMtime, tenSencondsStep);

//set data to chart

myChart.DataSource = measureList;

myChart.DataBind();

}

protected void startBtn_Click(object sender, EventArgs e)

{

myTimer.Enabled = true;

startBtn.Enabled = false;

stopBtn.Enabled = true;

}

protected void stopBtn_Click(object sender, EventArgs e)

{

myTimer.Enabled = false;

startBtn.Enabled = true;

stopBtn.Enabled = false;

}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<asp:Timer ID="myTimer" runat="server" Interval="5000" ontick="myTimer_Tick">

</asp:Timer>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<table style="width:100%;">

<tr>

<td style="width: 260px;">

<telerik:RadGrid ID="myGrid" runat="server"

AllowSorting="True" AutoGenerateColumns="False" Height="350px"

GridLines="None" Width="250px">

<ClientSettings>

<Scrolling AllowScroll="True" />

</ClientSettings>

<MasterTableView NoMasterRecordsText="No measures." GridLines="None"

TableLayout="Fixed">

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="Mtime"

DataFormatString="{0:dd/MM HH:mm:ss}" HeaderText="Date/Time"

UniqueName="Mtime">

<HeaderStyle HorizontalAlign="Left" Width="70px" Font-Size="7.9pt" Wrap="False" />

<ItemStyle HorizontalAlign="Left" Width="70px" Font-Size="7.9pt" Wrap="False" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Value"

DataFormatString="{0:0.#}" HeaderText="Value" UniqueName="Value">

<HeaderStyle HorizontalAlign="Center" Width="35px" Font-Size="7.9pt"/>

<ItemStyle HorizontalAlign="Center" Width="35px" Font-Size="7.9pt" ForeColor="80, 80, 80"/>

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"

EnableImageSprites="True">

</HeaderContextMenu>

</telerik:RadGrid>

</td>

<td>

<telerik:RadChart ID="myChart" runat="server" DefaultType="Line"

Skin="LightGreen" Width="650px" Height="450px">

<Appearance>

<FillStyle MainColor="Transparent">

</FillStyle>

<Border Color="DarkGreen" Visible="False" />

</Appearance>

<Series>

<telerik:ChartSeries DataXColumn="NumericMtime"

DataYColumn="Value" Name="Measure" Type="Line">

<Appearance>

<FillStyle FillType="Solid" MainColor="230,126,0">

<FillSettings>

<ComplexGradient>

<telerik:GradientElement Color="243, 206, 119" />

<telerik:GradientElement Color="236, 190, 82" Position="0.5" />

<telerik:GradientElement Color="210, 157, 44" Position="1" />

</ComplexGradient>

</FillSettings>

</FillStyle>

<LabelAppearance Visible="False">

</LabelAppearance>

<PointMark Visible="True" Dimensions-AutoSize="False" Dimensions-Height="5px" Dimensions-Width="5px">

<FillStyle MainColor="196,108,0" FillType="Solid">

</FillStyle>

</PointMark>

<TextAppearance TextProperties-Color="112, 93, 56">

</TextAppearance>

<Border Color="176, 100, 75" />

</Appearance>

</telerik:ChartSeries>

</Series>

<Legend Visible="False">

<Appearance Corners="Round, Round, Round, Round, 6" Overflow="Row"

Position-AlignedPosition="Top">

<ItemTextAppearance TextProperties-Color="113, 94, 57"

TextProperties-Font="Segoe UI, 8pt">

</ItemTextAppearance>

<Border Color="225, 217, 201" />

<Shadow Blur="50" />

</Appearance>

</Legend>

<PlotArea>

<EmptySeriesMessage>

<TextBlock Text="No measures.">

<Appearance TextProperties-Color="Gray"

TextProperties-Font="Segoe UI, 9pt">

</Appearance>

</TextBlock>

</EmptySeriesMessage>

<XAxis AutoScale="True" LayoutMode="Normal">

<Appearance Color="226, 218, 202" MajorTick-Color="88, 138, 77"

ValueFormat="ShortDate" CustomFormat="HH:mm:ss">

<MajorGridLines Color="177, 207, 170" />

<LabelAppearance RotationAngle="90" Dimensions-AutoSize="True" Dimensions-Height="100px" Dimensions-Width="100px">

</LabelAppearance>

<TextAppearance TextProperties-Color="57, 78, 38"

TextProperties-Font="Segoe UI, 8pt"

Dimensions-Margins="1px, 1px, 1px, 20px">

</TextAppearance>

</Appearance>

<AxisLabel Visible="False">

<TextBlock>

<Appearance TextProperties-Color="112, 93, 56">

</Appearance>

</TextBlock>

</AxisLabel>

</XAxis>

<YAxis IsZeroBased="False" AutoScale="True" >

<Appearance Color="226, 218, 202" MajorTick-Color="88, 138, 77"

MinorTick-Color="114, 100, 61">

<MajorGridLines Color="177, 207, 170" />

<MinorGridLines Color="231, 225, 212" />

<TextAppearance TextProperties-Color="57, 78, 38"

TextProperties-Font="Segoe UI, 8pt">

</TextAppearance>

</Appearance>

<AxisLabel Visible="True">

<Appearance Visible="True">

</Appearance>

<TextBlock Visible="False">

<Appearance TextProperties-Color="112, 93, 56">

</Appearance>

</TextBlock>

</AxisLabel>

</YAxis>

<Appearance>

<FillStyle MainColor="254, 255, 228" SecondColor="Transparent"></FillStyle>

<Border Color="226, 218, 202"></Border>

</Appearance>

</PlotArea>

<ChartTitle Visible="False">

<Appearance Visible="False">

<FillStyle MainColor=""></FillStyle>

</Appearance>

<TextBlock>

<Appearance TextProperties-Color="77, 153, 4"></Appearance>

</TextBlock>

</ChartTitle>

</telerik:RadChart>

</td>

</tr>

<tr>

<td style="width: 260px">

</td>

<td>

</td>

</tr>

<tr>

<td style="width: 260px">

<telerik:RadButton ID="startBtn" runat="server" onclick="startBtn_Click"

Text="Start">

</telerik:RadButton>

<telerik:RadButton ID="stopBtn" runat="server" onclick="stopBtn_Click" Text="Stop">

</telerik:RadButton>

</td>

<td>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Regards,
John.

5 Answers, 1 is accepted

answered on 23 Dec 2011, 03:53 PM

Hi John,

Please, accept my apologies for not providing the best possible answer. This seems to be a double precision issue. Sometimes the value of

measureList[0].NumericMtime + 6*tenSencondsStep // the value that should correspond to the last axis tick

is larger than

measureList[measureList.Count - 1].NumericMtime // the actual value used as range end

by a tiny little bit, which is alas enough for the chart not to create the last item. Please, use the former value as max value for X axis:

myChart.PlotArea.XAxis.AddRange(measureList[0].NumericMtime, measureList[0].NumericMtime + 6*tenSencondsStep, tenSencondsStep);

Best regards,
Ves
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