ChartistJS with times not displaying quite right

153 views Asked by At

I'm trying to use chartist and I'm getting very close to what I want, but not quite there and I can't figure out from the docs how to cross the finish line.

I am trying to create a dynamic graph with a Y axis of numbers and the X axis is times in 4-digit, military format. I want a set low and high on both axes that gets determined in the JS dynamically.

The closest I've gotten so far is a perfect Y axis, with the data laying out exactly where it should in the graph but the issue is that the X axis only starts from slightly before the first data point instead of where I want it to start, as well as it made up its own labels for the X axis.

So, for example, I would want labels going from 0900 to 2200 marked every twenty minutes but the data points might be at 1125 or 1743, etc.

I've been able to get the correct X axis labels, or the correct data points, but not both at the same time.

In my current best situation, (correct data points, not axis) my code looks as follows

            axisX: {
            type: Chartist.AutoScaleAxis,
            labelInterpolationFnc: function(value) {
              return moment(value).format('HHmm');
            },
            showLabel: true,
            showGrid: true,
            stretch: true
        },

and later, I set the remaining pieces like so:

        vm.chartOptions.axisX.ticks = tickArray;
        vm.chartOptions.axisX.divisor = totalTicks;
        vm.chartData.series = vm.chartSeries;

where tickArray is the [0900, 0920, 0940, ...] that I mentioned above and vm.chartSeries is an array of objects that follow the following format:

0: {x: Fri Aug 06 2021 14:03:00 GMT-0500 (Central Daylight Time), y: 15}
1: {x: Fri Aug 06 2021 18:00:00 GMT-0500 (Central Daylight Time), y: 35}
2: {x: Fri Aug 06 2021 22:30:00 GMT-0500 (Central Daylight Time), y: 42}

Again, in this scenario, the data points line up where they should but the X axis not only doesn't start at 0900 but it starts at 1357 and increments itself in alternating values of 10/11 (i.e.: 1357, 1407, 1418, 1428, 1439, ..., 2228 and then a little extra to accommodate the 2230 point above, but not all the way out to a new line at 2238)

I honestly don't even care if the chart sees these as dates, or just straight up numbers. I might even be able to handle dropping the leading zero on early times if that makes the difference (I tried treating everything as straight up numbers, but that didn't work, either.)

I've tried all kinds of manipulations and even some guy's custom plugin that looked like it should work, but to no avail.

EDIT: I've got it to the point where the times on the X axis show the way I want them to, but not the right range. They only go from a little before the first data point to just a bit after the last data point. It doesn't span the entire range that I told it to span. Basically, in this example, it's ignoring 0900 until 1340. It then starts the X-axis at 1400. It also ends just a tad after my final data point, not actually all the way to the final, declared "tick"

EDIT 2: I got it - sort of. I got all the data and full range of the x axis all showing - except: it's all squished together in the middle of the graph! Like so: Squished Chart!

EDIT 3: Figured it out. The low and high were being set wrong. I have more chartist questions, but that's another post's story!

0

There are 0 answers