Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
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.
                Updated the question, now I think the data is OK but the browser crashes when I run the page.
– hoetz
                Apr 19, 2013 at 6:29
                It works now, thank you for the info! Now I need to find a way that the chart does not show every tooltip point on the line, too many values!
– hoetz
                Apr 19, 2013 at 6:57
 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());
(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 
                I don't see how this will ever work for more than charting a single day, you are stripping of the Date part by calling TimeOfDay property...
– John C
                Jun 12, 2014 at 1:56
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.