I'm struggling with a simple line graph with highcharts.js. I have some json data ing in from an asp 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 ing 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
}]
});
});
I'm struggling with a simple line graph with highcharts.js. I have some json data ing in from an asp 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 ing 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
}]
});
});
2 Answers
Reset to default 3You 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.
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 patible with .NET Datetime Type:
Highcharts.setOptions({
global: { useUTC: true } });
and set xAxis in Highcharts :
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
maxZoom: 60
},