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
Rank 1
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
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
Rank 1
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
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
Rank 1
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.
Rank 1
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.