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:
Regards,
John.
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.