Chartist-js: Time intervals

[avilaj]

I have a doubt, how can i use time intervals with chartist?
I have some series that runs across months, days, hours and years.

[gionkunz]

Can you elaborate a bit more? Maybe provide an example on what you'd like to do?

[avilaj]

Let's say that i have the following data in pseudo-code

var values = [1, 2, 3, 5]
var dates = ["Jan 1 2014", "Jan 2 2014", "Jan 3 2014", "Jan 5 2014"]

What i want is that in the bar chart prints also the missing day (Jan 4 2014).
This situation is also for intervals of hours, minutes, years, months

Any tip on this case?
Thanks in advance,

[gionkunz]

Hey there. Timeframes are not supported currently but Ive also thought about this as its quite a common use case. Lets leave the issue open and track any further demand

[gionkunz]

In the meanwhile you could always have your own transformation function that generates the data object for chartist.

[KoltonG]

+1 for this feature!

[rogatty]

+1 this would be great to have

[SpaceK33z]

+1 for this!

[LCid]

In a similar vein, I'm trying to use time as my y axis data. Right now it seems to automatically convert it to total milliseconds, is there any way to convert it to a formatted string? I.e. "2:57" or "15:24"?
Thanks!

[baks]

Hi,

I'm working on DateAxis/LineXY feature (https://github.com/baks/chartist-js)
I asked Gion Kunz about this features to make a pull request.

Simple example here:
http://jsbin.com/yevewanuya/3/edit?js,output

[gionkunz]

Hi @baks ! Wow you were really fast with this :-) I'll do a new push this weekend where the Axes code is further stabilizing. Maybe you need to update your code based on that.

[blysik]

How's this going? Would love this feature.

[gionkunz]

@blysik I'm working on a code restructuring right now. We should simplify the code once more and then introduce more flexibility to the existing line chart so that the axis can be configured freely. Let's see whats the progress but I hope to have something soon.

[optikfluffel]

:+1:

[zol]

+1

[gionkunz]

Hi guys. The groundwork for this is here in 0.9.0 but I didn't have time to implement the new dynamic axes for the bar chart. I have some stuff that needs testing and some fixes in my stash so I'll probably very soon publish 0.9.1 with this update so that bar chart can also use axes dynamically. For line charts you can use this feature and check the documentation here: http://gionkunz.github.io/chartist-js/getting-started.html#switching-axis-type

[bartveneman]

:tada:

[kossel]

Hi, I using 0.9.1 has the time interval feature done yet? thanks

[gionkunz]

Hi, you can already use x / y data and a timestamp to plot a chart, however, there is some manual effort involved in creating the ticks for you chart. This will be solved once we have a full fledged TimeAxis implemented.

Check this example with Dates and a FixedScaleAxis: http://jsbin.com/lokozu/edit?html,css,js,output

[khanhhaduc]

:+1: great! Thanks a lot :dancers:

[dhruvbhatia]

+1 - this would be very handy

[dreamyguy]

+1, it would be a game changer if it was supported natively :)

[HopefulLlama]

+1: Almost all my current use cases involve time axes

[versality]

+1 Fully agree, I might decide against using chartist due to lack of timeframes, otherwise brilliant chart.

[frances-brussee]

How is the TimeAxis coming along? Chartist is looking really good, but I really need this feature as well. I am aware of the workaround but it would be great if it was supported out of the box.

[miguelfc]

+1 This would be great to have!

[jsnmoon]

+1 Looking forward to the TimeAxis feature!

[viaScully]

+1 for this, too

[arseneoaa]

+1, thanks

[LinusEkstrom]

+1

[ghost]

+1

[jkusa]

+1

[ttygde]

+1

[nicholasjb89]

+1

[alienatix]

+1

[noahmanger]

+1

[dumconstantin]

+1

[noahmanger]

For anyone needing an interim solution, I was able to use the timeseries options with http://c3js.org/ pretty easily. Not as pretty as Chartist, but it worked 😄

[dumconstantin]

@noahmanger yeah, it would be nice to have a Chartist API for timeseries...

So far I managed to get a timeseries with Chartist like so:

import moment from 'moment'
import Chartist from 'chartist'

let chart = new Chartist.Line('.ct-chart', {
  series: [{
    name: 'ticks',
    data: []
  }]
}, {
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 5,
    labelInterpolationFnc: function(value) {
      return moment(value).format('HH:mm');
    }
  },
  axisY: {
    position: 'right'
  },
})

Then when you get data:

chart.data.series[0].data.push({ x: 1461862387541, y: 23.55 })

[gabrielcsapo]

@dumconstantin awesome workaround, this helped me with my project, I think this is the way it should be documented it works well and doesn't have any speed deficiencies to its use. PLUS NO CODE CHANGE TO THE LIBRARY! love chartist, thanks for you awesome open source contribution @gionkunz

[dumconstantin]

wow, you're welcome! I'm very happy it helped, thank you for the feedback :)

[jmesserer]

Awesome. Thanks @dumconstantin!

[luisfmsouza]

Is there a way to force the last label to appear using @dumconstantin suggestion?

[Arinerron]

+1

[alperensahin]

+1

[chantebryana]

+1

[harrymessenger]

@dumconstantin's solution appears on example in docs
https://gionkunz.github.io/chartist-js/examples.html -> TIME SERIES WITH MOMENT.JS

[ferninphilly]

+1

[phpmydev]

@dumconstantin
If I might add one thing I found about moment - it returns milliseconds since the epoch
just add moment.unix(value) for seconds

[Shawnxkwang]

it's been 4 years

[sasori7]

I've tried the new x y using AutoScaleAxis. using this, _labels_ is dropped. Is there a way to use '2/28', '3/20', etc instead of 1,2,3,4,6, etc for the x-axis?
Essentially, I'm trying to show results from the last six weeks, using mondays as intervals.

[dagostinelli]

Would love to see this "just work" eventually