Issue with displaying date (from x axis) in tooltip

4 posts, 1 answers
  1. hjd
    hjd avatar
    6 posts
    Member since:
    Jul 2014

    Posted 11 Aug 2014 Link to this post

    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
  2. hjd
    hjd avatar
    6 posts
    Member since:
    Jul 2014

    Posted 11 Aug 2014 Link to this post

    Hi everyone,

    i forgot to give you the main information about my environment.

    I use asp.net 4.5 and Telerik Version 2014.2.708.45.
    The error occured not just in one brows, it could be reproduced in Firefox 31, Microsoft Internet Explorer 11 and Chrome 29.0.1547.66.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 14 Aug 2014 Link to this post

    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.

     
  5. hjd
    hjd avatar
    6 posts
    Member since:
    Jul 2014

    Posted 15 Aug 2014 Link to this post

    Hi Danial,

    thanks for your suggestion. This works perfectly for me.


    Thanks
Back to Top