CODEWITHSUNDEEP
c#datetimehighcharts
Triet Doan
Triet Doan

Reputation: 12085

HighChart xAxis Datetime value

I'm trying to draw an arearange type in HighChart. Here is the link. When I look at the data, it has the following format [1230771600000, -5.8, 0.1]. The first one represented datetime, the second one is min value, and the third one is max value.

So, my question is, how does they get that number to represent a day? In that tuple, 1230771600000 means Jan 1st 2009. If I'm using C# in server side, how can I convert DateTime object to that number? In short, how to turn Jan 1st 2009 to 1230771600000? Thanks for your help.

Upvotes: 3

Views: 3921

Answers (4)

Victor LG
Victor LG

Reputation: 646

If you are only taking into account the date part (not considering time). This was my approach as an extension method:

public static double ToEpochDateHighCharts(this DateTime date)
        {
            TimeSpan t = new DateTime(date.Year, date.Month, date.Day, 0, 0, 0, DateTimeKind.Utc) - new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);

            return t.TotalMilliseconds;
        }

Upvotes: 1

davaus
davaus

Reputation: 1155

I prefer to keep my JSON processing to a minimum. I would suggest formatting your series datetime data to epoch milliseconds on the server. This seems to be acceptable to highcharts when the xAxis type is set to datetime. You can use this function:

 private long EpochTime(DateTime dt)
        {
           //long form code to be clear
            TimeSpan t = dt - new DateTime(1970, 1, 1);
            long millisecondsSinceEpoch = (long)t.TotalSeconds * 1000;
            return millisecondsSinceEpoch  ;
        }

There are other, more modern options in the posts above this by stovroz and wergeld. Use this in the object that will be converted into JSON for the client. You need to return an array of date/value points. I use this class:

public class TimePointData
    {
        public long date { get; set; }
        public decimal value { get; set; }

    }

I use it like this inside a SqlDataReader loop:

while (reader2.Read())
{
    DateTime dTest = Convert.ToDateTime(reader2["XData"]);
    TimePointData newPoint = new TimePointData()
        {
        date = EpochTime(dTest) ,
        value = Convert.ToDecimal(reader2["YData"])
        };
    Series.data.Add(newPoint);
}

In the javascript set the options thus:

 xAxis: {
          type: 'datetime',
          labels: {
                   formatter: function () {
                      return moment(this.value).format("YYYY-MM-DD"); //format as you need to
                   }
           },
           title: {
                text: 'Date'
           }
      },
      series: [{
              data: $scope.data.TimeSeriesData[0].data  //whatever is correct for your data structure
             }]

This working for me in an MVC project using a webapi data call and angularjs code to create the highcharts graphic in a zoomable area chart. Also don't forget to hold you tongue in the right position while you do it :)

Upvotes: 1

stovroz
stovroz

Reputation: 7065

They are using milliseconds since the Unix epoch i.e. since 1970-01-01 UTC, so convert with something like: 

var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
var data = myDates.Select(x => (x - epoch).TotalMilliseconds);

However, the times in their example data are all at 1am UTC for some reason (probably because of Highsoft's location), so they're all 1000 * 60 * 60 higher than you'd get applying the above to rounded UTC dates. You should be fine just using the UTC midnight values, but should you wish to match their figures exactly, just AddHours(1) or similar in your conversion.

Upvotes: 3

wergeld
wergeld

Reputation: 14442

You will need to do some pre=processing. What we did in VB.NET is loop through our data array to build up our highcharts series.data and do the following:

    Private Function ToEpoch(value As Date) As Double
        Dim span As TimeSpan = (value.ToUniversalTime -
                                    New System.DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc))
        Return span.TotalMilliseconds
    End Function

So we send in our SQL value parsed as MM/DD/YYYY into this function and it spits out the javascript time.

Upvotes: 0

Related Questions