How to use time-stamped data in chartist.js? - chartist.js

Question

I have a data-set where the x-values are time-stamps.
The time-stamps are irregular - so one would be 2016-12-13T00:01:02Z and an other 2016-12-13T02:13:05Z.
I would like to draw this data into a line-chart where a whole day is displayed, meaning the X-axis would show 00 01 02 ... 22 23 24.
How would I do that in chartist.js?

Answer 1

I figured it out myself.
I use two data-sets. One that contains my data. The other one (baseData) will contain two time-stamps: begining of day and end of day. This will force the chart to draw the X-axis with 00 01 02 ... 21 22.
I do not want to show the "baseData" in the chart - so I hide it via css:
.ct-series-a .ct-line {
/* Set the color for seriesDataTemperatures */
stroke: green;
/* Control the thickness of seriesDataTemperatures */
stroke-width: 1px;
}
.ct-series-b .ct-line {
/* Set the color for baseData */
stroke: grey;
/* Control the thickness of baseData */
stroke-width: 0px;
}
Then I draw my chart like this:
// My time-stamped series go here
var seriesDataTemperatures = [];
// This data-set will have two values, begin of day and end of day.
// E.g. [{ x: new Date("2016-12-16T00:01:00.000Z").valueOf(), y: 0 }, { x: new Date("2016-12-16T23:59:00.000Z").valueOf(), y: 0}]
var baseData = [];
chartTemperatures = new Chartist.Line('.ct-chart-temperatures', {
series: [
{
name: 'temperatures',
data: seriesDataTemperatures
},
{
name: 'base',
data: baseData
}
]
}, {
showPoint: false,
lineSmooth: false,
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 23,
labelInterpolationFnc: function (value) {
return moment(value).format('HH');
}
}
});