Adding ScatterSeriesItem with date-time values

5 posts, 1 answers
  1. Christian Pardun
    Christian Pardun avatar
    112 posts
    Member since:
    May 2010

    Posted 13 Sep 2013 Link to this post

    Dear telerik-Team

    I try to add ScatterSeriesItem programaticlly but I can't find a constructor or a method to add an item with date-time values.
    The only option is by decimal? x and decimal? y. Where is the constructor for datetime? x and decimal? y?

    How can I add those ScatterSeriesItem with date-time values without using a data source.

    Kind regards,
    Chrisitan
  2. Christian Pardun
    Christian Pardun avatar
    112 posts
    Member since:
    May 2010

    Posted 14 Sep 2013 Link to this post

    Hi again,

    I found the solution! :D I must convert the c# datetime to milliseconds and set the xaxis type to date to show the values in a date time scale. Then the javascript date contructor can convert it!

    Here my small DateTime Extension:
    private static readonly Int64 _DateTimeMinTimeTicks = (new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).Ticks;
       
    public static Int64 ToJavaScriptMilliseconds(this DateTime dateTime)
    {
        return ((dateTime.ToUniversalTime().Ticks - DateTimeExtention._DateTimeMinTimeTicks) / 10000);
    }


    Kind regards,
    Christian
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 18 Sep 2013 Link to this post

    Hello Christian,

    In order to create programmatically series items with dates you can adjust the milliseconds in the C# datetime object, so that they equals to the amount of the milliseconds in a JavaScript datetime object. After that the modified value can be passed as a value for the series item. For example:
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
     
        DateTime date1 = (new DateTime(2011, 06, 12, 0, 0, 0, DateTimeKind.Utc));
        DateTime date2 = (new DateTime(2011, 12, 12, 0, 0, 0, DateTimeKind.Utc));
     
        ScatterSeriesItem ssi1 = new ScatterSeriesItem();
        ssi1.Y = 2;
        ssi1.X = (decimal)date1.Subtract(new DateTime(1970, 1,1)).TotalMilliseconds;
     
        ScatterSeriesItem ssi2 = new ScatterSeriesItem();
        ssi2.Y = 5;
        ssi2.X = (decimal)date2.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
     
        (RadHtmlChart2.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1);
        (RadHtmlChart2.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2);
    }

    the type of the XAxis must be set to "date".

    If you want, however, to format the dates in the series labels and tooltips, ClientTemplates must be used along with kendo.format. For example:

    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
        <PlotArea>
            <Series>
                <telerik:ScatterLineSeries>
                    <LabelsAppearance ClientTemplate="#= kendo.format(\'{0:d}\', new Date(value.x)) #">
                    </LabelsAppearance>
                    <TooltipsAppearance Color="White" ClientTemplate="#= kendo.format(\'{0:d}\', new Date(value.x)) #" />
                </telerik:ScatterLineSeries>
            </Series>
            <XAxis BaseUnit="days" Type="date">
                <TitleAppearance Text="Sell Date">
                </TitleAppearance>
                <LabelsAppearance DataFormatString="d">
                </LabelsAppearance>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>



    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
  5. Tassilo
    Tassilo avatar
    1 posts
    Member since:
    Nov 2014

    Posted 20 Sep in reply to Danail Vasilev Link to this post

    Hi Danail,

    I tried implementing your solution.  The chart comes up fine but the datetime value has an offset while creating new date(value.x) depending on the browser timezone. For example in my case the data shows 20-09-2016 11:40:04 instead of 20-09-2016 06:10:04 for the tooltip. There is an offset of 5:30 hours. How to override the timezone dependency ? is there a possibility to subtract the offset from the client template of the tooltip like 

    ClientTemplate="#= kendo.format(\'{0:d}\', new Date(value.x) - offset ) #" />

     

    Regards,

    Tassilo

     

        

  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 26 Sep Link to this post

    Hello Tassilo,

    You can use the approach shown in the following article - Use UTC on Both Client and Server. It is for ASP.NET MVC but can be used for webforms as well.

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017