Hi everyone,
I am using a RadHtmlChart to display some data amount. I display the amount of
all items (as area series) and the new items per day (as column series) on one
timeline. Therefore I use a data table with a date column (type is
System.DateTime), an absolute value column (type is System.Int32) and a per day
value column (type is System.Int32). On page load all data is displayed. There
are two date time pickers (RadDatePicker) to change the displayed time range.
The change of the time range is done on client site. Therefore I take the
original dataset, store it (for later changing back to another time range) and
creating a new data source with all elements in the selected time range. After
the data source is build I bound it to the chart and repaint it. This
works perfectly, but I face a strange
issue with the tooltips. In the tooltips I want to display the date of the
hovered item (this seems to work. I´ve done this as shown in your demo).
Everything seems to work perfectly until I choose a time range containing only
two entries and there date values are not in the same month. The values are
shown correctly in the chart and the JSON string behind (gotten with
chart.get_dataSourceJSON ()) looks correct to me, but the displayed date in
the tooltip is not the correct one.
Could you give me a hint what’s going wrong with my tooltips? Any help would be
appreciated.
The error occurs if you select time range from 15.05.2014 to 10.06.2014 or
16.06.2014 to 05.07.2014.
If you choose another range where one more item is displayed the error
disappears. Also ther is no issue if
you select a time range containing just two elements but in the same month.
Here is the code I use for this lightweight version. If the project is needed i can send it to you
The aspx page:
The code behind:
Thank you
I am using a RadHtmlChart to display some data amount. I display the amount of
all items (as area series) and the new items per day (as column series) on one
timeline. Therefore I use a data table with a date column (type is
System.DateTime), an absolute value column (type is System.Int32) and a per day
value column (type is System.Int32). On page load all data is displayed. There
are two date time pickers (RadDatePicker) to change the displayed time range.
The change of the time range is done on client site. Therefore I take the
original dataset, store it (for later changing back to another time range) and
creating a new data source with all elements in the selected time range. After
the data source is build I bound it to the chart and repaint it. This
works perfectly, but I face a strange
issue with the tooltips. In the tooltips I want to display the date of the
hovered item (this seems to work. I´ve done this as shown in your demo).
Everything seems to work perfectly until I choose a time range containing only
two entries and there date values are not in the same month. The values are
shown correctly in the chart and the JSON string behind (gotten with
chart.get_dataSourceJSON ()) looks correct to me, but the displayed date in
the tooltip is not the correct one.
Could you give me a hint what’s going wrong with my tooltips? Any help would be
appreciated.
The error occurs if you select time range from 15.05.2014 to 10.06.2014 or
16.06.2014 to 05.07.2014.
If you choose another range where one more item is displayed the error
disappears. Also ther is no issue if
you select a time range containing just two elements but in the same month.
Here is the code I use for this lightweight version. If the project is needed i can send it to you
The aspx page:
001.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
002.
003.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
004.
005.
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
006.
<
head
runat
=
"server"
>
007.
<
title
></
title
>
008.
<
telerik:RadStyleSheetManager
id
=
"RadStyleSheetManager1"
runat
=
"server"
/>
009.
</
head
>
010.
<
body
>
011.
<
form
id
=
"form1"
runat
=
"server"
>
012.
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
013.
<
Scripts
>
014.
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
015.
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
016.
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI, Version=2014.2.708.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
017.
</
Scripts
>
018.
</
telerik:RadScriptManager
>
019.
<
script
type
=
"text/javascript"
>
020.
var fullAreaChartDataSource;
021.
var isFirstLoad = true;
022.
023.
function SaveFullAreaChartDataSource() {
024.
var areaChart = $find('<%=AreaChart.ClientID %>');
025.
fullAreaChartDataSource = eval(areaChart.get_dataSourceJSON());
026.
isFirstLoad = false;
027.
}
028.
029.
function SetSelectedTimSpanToAreaChart() {
030.
if (isFirstLoad) {
031.
SaveFullAreaChartDataSource();
032.
}
033.
var startDate = $find('<%=from.ClientID %>').get_selectedDate();
034.
var endDate = $find('<%=to.ClientID %>').get_selectedDate();
035.
036.
var filteredData = [];
037.
$(fullAreaChartDataSource).each(function () {
038.
if ((this.date >= startDate) && (this.date <= endDate)) filteredData.push(this);
039.
});
040.
041.
var areaChart = $find('<%=AreaChart.ClientID %>');
042.
043.
//Set the new datasource
044.
areaChart.set_dataSource(filteredData);
045.
046.
//Turning animation on before repainting the chart
047.
areaChart.set_transitions(true);
048.
049.
//Redrawing the chart
050.
areaChart.repaint();
051.
}
052.
053.
function UpdateDatePickerAllowedValues() {
054.
var startDate = $find('<%=from.ClientID %>').get_selectedDate();
055.
var endDate = $find('<%=to.ClientID %>').get_selectedDate();
056.
057.
var allowedMaxDateForStartDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 1);
058.
var allowedMinDateForEndDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 1);
059.
060.
$find('<%=from.ClientID %>').set_maxDate(allowedMaxDateForStartDate);
061.
$find('<%=to.ClientID %>').set_minDate(allowedMinDateForEndDate);
062.
SetSelectedTimSpanToAreaChart();
063.
}
064.
</
script
>
065.
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
066.
</
telerik:RadAjaxManager
>
067.
<
div
>
068.
<
table
>
069.
<
tr
>
070.
<
td
><
span
class
=
"riSingle RadInput RadInput_IBB riResizable"
><
label
class
=
"riLabel"
>Von:</
label
></
span
></
td
>
071.
<
td
>
072.
<
telerik:RadDatePicker
runat
=
"server"
ID
=
"from"
Skin
=
"MetroTouch"
DatePopupButton-ToolTip
=
"Wählen Sie das Startdatum für die anzuzeigenden Registrierungen"
Calendar-FirstDayOfWeek
=
"Monday"
Calendar-NavigationCaption
=
"Titel und Navigation"
Calendar-NavigationSummary
=
"Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können"
DateInput-ShortYearCenturyEnd
=
"2113"
DateInput-ToolTip
=
"Das Startdatum"
>
073.
<
DatePopupButton
/>
074.
<
Calendar
ID
=
"Calendar2"
runat
=
"server"
EnableMonthYearFastNavigation
=
"False"
>
075.
</
Calendar
>
076.
<
ClientEvents
OnDateSelected
=
"UpdateDatePickerAllowedValues"
/>
077.
</
telerik:RadDatePicker
>
078.
</
td
>
079.
<
td
><
span
class
=
"riSingle RadInput RadInput_IBB riResizable"
><
label
class
=
"riLabel"
>Bis:</
label
></
span
></
td
>
080.
<
td
>
081.
<
telerik:RadDatePicker
runat
=
"server"
ID
=
"to"
Skin
=
"MetroTouch"
DatePopupButton-ToolTip
=
"Wählen Sie das Enddatum für die anzuzeigenden Registrierungen"
Calendar-FirstDayOfWeek
=
"Monday"
Calendar-NavigationCaption
=
"Titel und Navigation"
Calendar-NavigationSummary
=
"Titel und Navigation die das aktuelle Jahr und den aktuellen Monat anzeigen können"
DateInput-ShortYearCenturyEnd
=
"2113"
DateInput-ToolTip
=
"Das Enddatum"
>
082.
<
DatePopupButton
/>
083.
<
Calendar
ID
=
"Calendar1"
runat
=
"server"
EnableMonthYearFastNavigation
=
"False"
>
084.
</
Calendar
>
085.
<
ClientEvents
OnDateSelected
=
"UpdateDatePickerAllowedValues"
/>
086.
</
telerik:RadDatePicker
></
td
>
087.
</
tr
>
088.
</
table
>
089.
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"AreaChart"
Skin
=
"MetroTouch"
>
090.
<
ChartTitle
Text
=
"Itemübersicht"
></
ChartTitle
>
091.
<
Legend
>
092.
<
Appearance
Position
=
"Bottom"
Visible
=
"True"
></
Appearance
>
093.
</
Legend
>
094.
<
PlotArea
>
095.
<
Series
>
096.
<
telerik:ColumnSeries
Name
=
"Items pro tag"
DataFieldY
=
"perDayValue"
>
097.
<
TooltipsAppearance
Color
=
"#FFFFFF"
>
098.
<
ClientTemplate
>
099.
#if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neue Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # neues Item #} #
100.
</
ClientTemplate
>
101.
</
TooltipsAppearance
>
102.
<
Appearance
FillStyle-BackgroundColor
=
"#007B9A"
></
Appearance
>
103.
<
LabelsAppearance
Visible
=
"false"
/>
104.
</
telerik:ColumnSeries
>
105.
106.
<
telerik:AreaSeries
Name
=
"Items insgesamt"
DataFieldY
=
"absoluteValue"
MissingValues
=
"Interpolate"
>
107.
<
TooltipsAppearance
Color
=
"#FFFFFF"
>
108.
<
ClientTemplate
>
109.
#if(value > 1) {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Items #} else {# #=kendo.format(\'{0:dd.MM.yyyy}\', category)#: #= value # Item #} #
110.
</
ClientTemplate
>
111.
</
TooltipsAppearance
>
112.
<
LineAppearance
LineStyle
=
"Normal"
Width
=
"2px"
/>
113.
<
Appearance
FillStyle-BackgroundColor
=
"#00ADCC"
></
Appearance
>
114.
<
LabelsAppearance
Visible
=
"false"
/>
115.
</
telerik:AreaSeries
>
116.
</
Series
>
117.
<
XAxis
DataLabelsField
=
"date"
Type
=
"Date"
MajorTickType
=
"None"
MinorTickType
=
"None"
>
118.
<
LabelsAppearance
Visible
=
"false"
></
LabelsAppearance
>
119.
<
MinorGridLines
Visible
=
"false"
/>
120.
<
MajorGridLines
Visible
=
"false"
/>
121.
</
XAxis
>
122.
<
YAxis
>
123.
<
MinorGridLines
Visible
=
"false"
/>
124.
<
MajorGridLines
Visible
=
"false"
/>
125.
<
TitleAppearance
Position
=
"Center"
RotationAngle
=
"0"
Text
=
"Items"
/>
126.
<
LabelsAppearance
DataFormatString
=
"{0}"
/>
127.
</
YAxis
>
128.
</
PlotArea
>
129.
</
telerik:RadHtmlChart
>
130.
</
div
>
131.
</
form
>
132.
</
body
>
133.
</
html
>
The code behind:
01.
using
System;
02.
using
System.Data;
03.
04.
public
partial
class
Default : System.Web.UI.Page
05.
{
06.
protected
void
Page_Load(
object
sender, EventArgs e)
07.
{
08.
this
.InitializeControls();
09.
}
10.
11.
/// <summary>
12.
/// Initializes the date pickers with min, max and selected value. Also
13.
/// creates connect the dummy dataset to the chart and bind it.
14.
/// </summary>
15.
private
void
InitializeControls()
16.
{
17.
this
.from.MinDate = DateTime.Parse(
"13.05.2014"
);
18.
this
.from.SelectedDate = DateTime.Parse(
"13.05.2014"
);
19.
this
.from.MaxDate = DateTime.Parse(
"04.07.2014"
);
20.
21.
this
.to.MinDate = DateTime.Parse(
"14.05.2014"
);
22.
this
.to.SelectedDate = DateTime.Parse(
"05.07.2014"
);
23.
this
.to.MaxDate = DateTime.Parse(
"05.07.2014"
);
24.
25.
this
.AreaChart.DataSource =
this
.GetDummyDataSource();
26.
this
.AreaChart.DataBind();
27.
}
28.
29.
/// <summary>
30.
/// Creates a dataset containing some dummy data.
31.
/// </summary>
32.
/// <returns><c>the dummy data dataset</c></returns>
33.
private
DataSet GetDummyDataSource()
34.
{
35.
DataTable table =
new
DataTable(
"itemData"
);
36.
37.
string
dateColumnName =
"date"
;
38.
string
absolutValueColumnName =
"absoluteValue"
;
39.
string
perDayValueColumnName =
"perDayValue"
;
40.
41.
DataColumn dateColumn =
new
DataColumn(dateColumnName, Type.GetType(
"System.DateTime"
));
42.
DataColumn absoluteValueColumn =
new
DataColumn(absolutValueColumnName, Type.GetType(
"System.Int32"
));
43.
DataColumn perDayValueColumn =
new
DataColumn(perDayValueColumnName, Type.GetType(
"System.Int32"
));
44.
45.
table.Columns.Add(dateColumn);
46.
table.Columns.Add(absoluteValueColumn);
47.
table.Columns.Add(perDayValueColumn);
48.
49.
DataRow firstTestEntry = table.Rows.Add();
50.
firstTestEntry[dateColumnName] = DateTime.Parse(
"13.05.2014"
);
51.
firstTestEntry[absoluteValueColumn] = 1;
52.
firstTestEntry[perDayValueColumn] = 1;
53.
54.
DataRow secondTestEntry = table.Rows.Add();
55.
secondTestEntry[dateColumnName] = DateTime.Parse(
"15.05.2014"
);
56.
secondTestEntry[absoluteValueColumn] = 2;
57.
secondTestEntry[perDayValueColumn] = 1;
58.
59.
DataRow thirdTestEntry = table.Rows.Add();
60.
thirdTestEntry[dateColumnName] = DateTime.Parse(
"10.06.2014"
);
61.
thirdTestEntry[absoluteValueColumn] = 5;
62.
thirdTestEntry[perDayValueColumn] = 3;
63.
64.
DataRow fourthTestEntry = table.Rows.Add();
65.
fourthTestEntry[dateColumnName] = DateTime.Parse(
"11.06.2014"
);
66.
fourthTestEntry[absoluteValueColumn] = 7;
67.
fourthTestEntry[perDayValueColumn] = 2;
68.
69.
DataRow fifthTestEntry = table.Rows.Add();
70.
fifthTestEntry[dateColumnName] = DateTime.Parse(
"16.06.2014"
);
71.
fifthTestEntry[absoluteValueColumn] = 8;
72.
fifthTestEntry[perDayValueColumn] = 1;
73.
74.
DataRow sixthTestEntry = table.Rows.Add();
75.
sixthTestEntry[dateColumnName] = DateTime.Parse(
"05.07.2014"
);
76.
sixthTestEntry[absoluteValueColumn] = 10;
77.
sixthTestEntry[perDayValueColumn] = 2;
78.
79.
DataSet ds =
new
DataSet();
80.
ds.Tables.Add(table);
81.
82.
return
ds;
83.
}
84.
}
Thank you