Thursday, October 8, 2015

Making Time Based Graphs with Chartist

I have been implementing some custom charts with Chartist recently.  Overall things have gone very well with some simple tweaks and fiddling to get things exactly how I want.  It is very nice to be be able to easily adjust the charts with CSS right in the normal site code.

The only problem I had was using Date based charts that don't have fixed intervals.  If the Dates or Times are at a fixed interval you can just write the values directly to the labels variable and format them how you want very easily.  If you have a random or variable set of dates, say when inventory is logged which is done at a random, there is no easy way to graph this and keep the relative positions correct on the graph.  I don't want all the points one unit apart, as one could be two weeks and the next 2 months, but rather properly positioned based on the date provided.

Anyway, I got it to work and where is a brief example/sample code to try out.
As you can see in the sample here the items are positioned properly.

No comments: