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

[Solved] Issue with displaying date (from x axis) in tooltip

3 Answers 264 Views

Chart (HTML5)

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

hjd asked on 11 Aug 2014, 10:13 AM

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:

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

3 Answers, 1 is accepted

Accepted

answered on 14 Aug 2014, 09:55 AM

RadHtmlChart-BaseUnitDays.zip

Hi,

The baseUnit of the x-axis is dynamic, so that when you change the data source for the particular dates, the baseUnit changes from "days" to "weeks". Therefore values for particular units are aggregated.

What I can suggest is that you hardcode the baseUnit value to "days". For example:

<XAxis DataLabelsField="date" Type="Date" MajorTickType="None" MinorTickType="None" BaseUnit="Days">

...

</XAxis>

You can also find the full runnable VS example in the attached archive.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.