Highcharts.js DateTime on x axis coming from JSON only displays number

Question

I'm struggling with a simple line graph with highcharts.js. I have some json data coming in from an asp.net mvc controller:

public JsonResult GetSensorLineData(string SensorName)
    {
        List<SensorMeasurement> result= this.SQLSensorMeasuresRepository.FindAllMeasurements(SensorName).ToList();

        List<string> days = new List<string>();
        List<decimal> values = new List<decimal>();

        foreach (var item in result)
        {
            values.Add(item.Value);
            days.Add(item.DateTime.ToString());
        }

        dynamic data = new
        {
            Categories=days,
            Values = values
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

In my cshtml file I'm doing this:

 homeDataService.init('@this.BaseUrl()');

        homeDataService.getTemperatureLineData("Roomtemperature", function myfunction(data) {
            var dataCategories=[];

            for (var i = 0; i < data.Categories.length; i++) {
                var strVal = data.Categories[i];
                var dateTimeParts = strVal.split(" ");
                var datePart = dateTimeParts[0];
                var timePart = dateTimeParts[1];

                var dateParts = datePart.split(".");
                var timeParts = timePart.split(":"); //german DateTime String coming from ASP.NET


                var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0], timeParts[0], timeParts[1]);
                data.Categories[i]=(date.getTime());

            }
            var chart;
            $('#temperature-line').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime',
                    categories:data.Categories,
                    minorTickInterval: 10,
                    minTickInterval:10,

                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Temperature'
                    }
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Temperature',
                    data: data.Values
                }]
            });

        });

As you can see I'm transforming the german datetime so that highcharts can interpret it. However it doesn't. I only get this output:

UPDATE: Ok now I'm returning from the Controller:

and I changed the chart code to (see below) but when I run this the browser just hangs. What am I doing wrong?

var chart;
            $('#temperature-line').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime'

                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Temperature'
                    }
                },

                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Temperature',
                    data: data
                }]
            });

        });

Answer 1

Use this code

Datetime.TimeOfDay.TotalMilliseconds

 var StatusOK = from u in counters
     where u.StatusID == 1
     select new { x = LogDate.Value.TimeOfDay.TotalMilliseconds, y = u.CountOK };

return jScript.Serialize(counters.ToArray());

or

(DateTime.Now-new DateTime(1970,1,1)).TotalMilliseconds

and set in Highcharts for compatible with .NET Datetime Type:

  Highcharts.setOptions({
        global: { useUTC: true } });

and set xAxis in Highcharts :

 xAxis: {
        type: 'datetime',
        tickPixelInterval: 100, 
        maxZoom:  60 
    },

Answer 2

You can't use a datetime axis and categories together - it's strictly one or the other for axis type.

You will need to either remove the categories, and send your timestamps as your data x values, or format the dates the way you want them displayed and use them as categories.

If you are displaying time series data, it always makes more sense to use the datetime values instead of categories.