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

Adding ScatterSeriesItem with date-time values

6 Answers 120 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 13 Sep 2013, 05:55 PM
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

6 Answers, 1 is accepted

Sort by
0
Christian
Top achievements
Rank 1
answered on 14 Sep 2013, 08:11 AM
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
0
Accepted
Danail Vasilev
Telerik team
answered on 18 Sep 2013, 05:25 PM
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.
0
Tassilo
Top achievements
Rank 1
answered on 20 Sep 2016, 05:30 AM

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

 

    

0
Danail Vasilev
Telerik team
answered on 26 Sep 2016, 08:09 AM
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.
0
Ryan
Top achievements
Rank 1
answered on 14 Mar 2018, 11:12 PM

As Tassilo pointed out...

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

is not appropriate because it ends up adjusting the date based on the local time zone and display the wrong date or time.

It's frustrating that Telerik forums regularly have posts that indicate that that is the correct way to display a date in a tooltip or label. 

Tassilo was on the right track when he suggested something like "new Date(value.x) - offset", but that still doesn't work in all cases, because the offset is not a constant (if you're in a timezone that uses Daylight Savings Time). In my case, all of my tooltips are off by 5 or 6 hours (using Danail's solution). 

After many hours of frustration, I finally settled on this, which seems to be working:

ClientTemplate = "#= kendo.format(\"{0:g}\", new Date(new Date(value.x).toUTCString().substr(0, 25))) #<br />#=kendo.format(\"{0}\",value.y)#";

I wish there was a simpler way (built into the HtmlChart control), but until there is, maybe this will help someone else that is having the same problem.

0
Ryan
Top achievements
Rank 1
answered on 14 Mar 2018, 11:41 PM

Correction:

ClientTemplate = "#= kendo.format(\"{0:g}\", new Date(new Date(value.x).toUTCString().substr(0, 25))) #"

My other example included the date/time and Y value. This one is just the date/time.

Tags
Chart (HTML5)
Asked by
Christian
Top achievements
Rank 1
Answers by
Christian
Top achievements
Rank 1
Danail Vasilev
Telerik team
Tassilo
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Share this question
or