CODEWITHSUNDEEP
chartist.js
Dánjal Salberg Adlersson
Dánjal Salberg Adlersson

Reputation: 711

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

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?

Upvotes: 1

Views: 2098

Answers (1)

Dánjal Salberg Adlersson
Dánjal Salberg Adlersson

Reputation: 711

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');
        }
    }
});

Upvotes: 2

Related Questions