New chart type: Time Series

[arnoutaertgeerts]

I think one of the main chart types that is missing in Chartjs is the Time Series chart. This chart type would allow for easy plotting of time series where the x-axis consists of an array of Date objects.

The main differences with the Line chart type are:

• Non-equidistant points for the x-axis.
• x-labels independent from the data-points.

The main features could then be:

• Use Date objects for the x-axis.
• Create a (linear) timeline based on the oldest and the newest Date.
• Automatically place the points on the x-axis at the right place on the time line.
• Choose a x-label format such as seconds, minutes or days.

The functionality would ideally mimic the highstock time series functionality.

I'm interested in developing this chart type but could use help. We could start from the same code that is used to create the Line chart type.

Could I get some input here on wether you guys think this is useful, how to approach this task and which other features could be included?

[dima117]

I has developed scatter chart plugin for the chart.js library. It supports datetime scale.
http://dima117.github.io/Chart.Scatter/
Maybe it will be interested for you.

[arnoutaertgeerts]

@dima117 That is very interesting and already solves some problems! Thanks for the tip!

[dima117]

@arnoutaertgeerts Feel free to contact me, if you will have any questions or suggestions.

[gnitnuj]

@arnoutaertgeerts, just wondering if you've had a chance to write a series line chart extension? It's something I've been considering doing as well.

[tannerlinsley]

Take a look at v2.0-dev. It has a new time scale that kicks butt

[gnitnuj]

oh man. thats awesome! i took a glance at the v2.0 milestone but must have overlooked the time scale stuff

[iroller]

@tannerlinsley could you share a working example of time scale using the latest alpha?

[tannerlinsley]

There should be a time-scale sample in the example directory
On Sat, Oct 17, 2015 at 10:23 PM Anton Koldaev [email protected]
wrote:

@tannerlinsley https://github.com/tannerlinsley could you share a
working example of time scale using the latest alpha?

—
Reply to this email directly or view it on GitHub
#1059 (comment).

[iroller]

I tried that, doesn't seem to be working here. It's just empty

[tannerlinsley]

Are you using the built alpha-4 release or the latest 2.0-dev branch? I would suggest pulling the latest changes from 2.0-dev branch, running gulp build, and then trying the line-time-scale.html file. Works great for me on both, but just to be sure...

[iroller]

Perfect, it works now. Thank you 👍

[tannerlinsley]

No problem! I'm going to close this issue unless there's anything else?

[AnniekJose]

Okey I'm totally new to this so maybe someone can explain how I can get this latest 2.0 dev branch? Cause I am also looking for some kind of time scale for in my charts.

[francisdb]

@AnniekJose download these 2 files
https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/Chart.min.js
https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/Chart.js

[AnniekJose]

@francisdb okey thanks! and then put them in my original Chart.js file? should they replace the old Chart.min.js and Chart.js files or should they co-excist in another folder (the v2.0-dev folder).

[francisdb]

You should replace them but likely the api will not be compatible so this will not be a simple drop in replacement. And since it's a development version things might change over time...

On the other hand I don't think it's a good idea to use dev versions if you are not used to playing with this kind of stuff.