I have a .Net Core application in which I am drawing a graph showing values for some measurements during the time of the day.
My time object is in Unix time, with milliseconds (e.g. 1502258405000). I have managed to convert it to a time object manually as follows:
var datetimes = $.map(data, function (value, index) {
var datetime = new Date(value.timestamp);
var iso = datetime.toISOString().match(/(d{4}-d{2}-d{2})T(d{2}:d{2}:d{2})/);
return iso[2]; //Returns HH:MM:SS
});
However with this conversion my chart.js chart doesn't understand the time objects as time, which means (if there is a gap in the measurements) it won't show (and there is), as it will just put the measurements next to each other and handle them as strings.
I am not interested in showing the date as the data always will be collected within a known date. I changed my above implementation to:
var datetimes = $.map(gpsData, function (value, index) {
return new Date(value.timestamp);
});
However when I plot this on my chart.js line chart it makes my chart show AM/PM values which is not desired, as seen here above. I want to have a 24 hour clock. I used the chart.js time value for the xAxis as seen here below to plot the values as seen in the picture above:
options: {
scales: {
xAxes: [{
type: 'time',
time: {
format: HH:MM:SS,
min: minTime, //calculated above in my implementation
max: maxTime //same as above
}
}]
}
}
However the values are not formatted as my desired output. So I was wondering what the proper way of adding time of day to the x axis on my graph using chart.js is or even how to format it my desired values?
