
Chart.js - open source HTML5 charting library - nnnnnick
http://www.chartjs.org
======
nicpottier
A bit of the shame on the interactivity:

"If you are looking to add interaction as a layer to charts, Chart.js is not
the library for you. A better option would be using SVG, as this will let you
attach event listeners to any of the elements in the chart, as these are all
DOM nodes."

Most charts are far more useful with rollovers to let the user interpret the
data. I'd say this is a must have for most anything where you really are
trying to give the user insight into the dataset.

Also seems to be a bit of a punt by saying this just isn't possible in Canvas.
We know where the cursor is no? And we know where the points are. So can't we
react to the cursor hovering over a point? What am I missing?

~~~
Hovertruck
We actually have our own in-house charting library at Chartbeat that uses
Canvas that does exactly that (roll over the main chart):

<http://chartbeat.com/publishing/demo/>

~~~
nicpottier
Nice! FYI, those charts are VERY fuzzy on my retina display. :(

~~~
Hovertruck
Yeah. We're actually in the process of moving to D3 partly because of this. :\

------
lukeholder
Well done nick. This is the perfect example of a _unicorn_ project - the
perfect mix a technical solution, but with immaculate design sense. Even the
documentation is beautiful.

Would love to see this MIT licensed.

I would love to see you rewarded for this project. Donations or a commercial
support licence?

~~~
nnnnnick
Just updated the online docs and readme on Github with an MIT license, so feel
free to use!

------
sanderjd
One thing I _love_ about Highcharts is that the documentation is heavily
linked to examples on jsfiddle. Your documentation looks really nice and you
have lots of nice examples, but I can't _play_ with them.

edit: I meant to say that I can't play with them as far as I can tell. Is
there a way that I'm missing?

~~~
sandGorgon
+1 on this - jsfiddle documentation would be killer !

------
paduc
Good job, your charts look really good. Too bad they aren't interactive, it
makes the legend+values mandatory to understand the data. Unless you just want
to use them as art.

Also, the pie chart and doughnut charts seem odd. The general rule is to order
the values clockwise (biggest piece starts in top middle and extends to the
right). It really helps readability and is a convention.

Keep up the good work!

~~~
jschuur
Indeed. I was looking at this hoping to find a way to label pie charts or even
have the inner circle of the doughnut chart display the part of the chart I'm
hovering over.

A great start! Definitely room to grow.

------
nicklovescode
I've been making a ton of d3/html5 charts lately, and I've been terribly
dissappointed by the open source offerings of graphs that are both
beautiful(tons on dribbble, few even in html) and functional. Was going to
work on one, but this actually looks really good!

edit: any reason you decided not to use D3 for this?

~~~
udfalkso
Found this in the docs:

"Chart.js uses the canvas element, which is a single DOM node, similar in
characteristics to a static image. This does mean that it has a wider scope
for compatibility, and less memory implications than SVG based charting
solutions. The canvas element also allows for saving the contents as a base 64
string, allowing saving the chart as an image.

In SVG, all of the lines, data points and everything you see is a DOM node. As
a result of this, complex charts with a lot of intricacies, or many charts on
the page will often see dips in performance when scrolling or generating the
chart, especially when there are multiple on the page. SVG also has relatively
poor mobile support, with Android not supporting SVG at all before version
3.0, and iOS before 5.0. (caniuse.com/svg-html5)."

~~~
ssrubin
But on the other hand, SVG is infinitely more useful if you want to extract
chart data from the page.

~~~
olefoo
How is that more useful than a link to the source data in a format appropriate
to the data?

~~~
ssrubin
It's not, but how often do you see a news source link to the raw data?

------
nwenzel
People seem to be really put off by the lack of interactivity. Interactivity
might be fun, but it mostly gets in the way and can be an impediment to
telling a story because it let's developers pass the buck to the end user.

Interactivity is just a feature. What's the real benefit and purpose? So users
can navigate the data? OK, then what? So they can find meaning hidden in the
data? Code capable of multidimensional analysis is going to be more effective
than eyeballing a 2 dimensional representation of the data.

Don't force your users to move the mouse around, hover, click, and search
around for meaning.

For all charts, figure out what story you want to tell, then tell that story.
Don't force your user to search for meaning.

------
daviddaviddavid
Regarding "object oriented" vs "object orientated", the former is the standard
variation while the latter is what linguists call a backformation.

<http://en.wikipedia.org/wiki/Back-formation>

Basically, someone interprets "orientation" as having a stem of "orientate"
analogous to how "contemplation" has a stem of "contemplate". Of course, the
real stem is "orient".

------
kmfrk
This is by far the best chart library of the easy offerings - outside d3.js.

I would love support for a vertical and horizontal stacked bar chart for
things like budget break-downs and general side-by-side comparisons.

Your Y axis has too many values in my opinion. I know it can be hard to code,
but I think the example charts can do without the *5 values.

Great job!

------
tzaman
This seems to be exactly the library I was waiting for, because it meets
several requirements: It is framework agnostic and lightweight. We are using
Rickshaw at the moment, which has d3 as a dependency and that alone results in
bloated javascript just to write some basic graphs. Well done and thank you!

------
youngtaff
Beautiful looking charts but what's the obsession with animation - they
distract rather than aid understanding.

------
born2web
"An apology to open source" "At midnight on the 18th March 2013 I posted
Chart.js online. On the morning of the 19th March, I've had to take it down
due to IP concerns with my current employer."

It has been taken down. Looks like the project ran into some trouble.

------
rtexal
Just curious as it seems pretty static; inputting values and outputting
charts. Any capabilities to add interaction like selecting data points and
analysing a particular point with it's other attributes that are not plotted?

------
baal80spam
Maybe I'm missing something but how to use it? I put Chart.js and an example
html file (I just copied all relevant html from pie.html file) in a folder but
when I open it all I can see is a blank page. What gives?

------
robotmay
Finally a charting library with a decent radar chart implementation. I've had
numerous uses for these over the years and the only popular use of them I've
seen any time recently was in a few Pokémon games.

------
jpalomaki
There's no mention about the license. This has been raised on the issue
tracker: <https://github.com/nnnick/Chart.js/issues/1>

~~~
nnnnnick
Just updated and closed this with an MIT license added to the docs and readme
on Github.

------
n8agrin
@nnnnnick this looks great. I work with d3 on a daily basis and while I think
that it's a great toolchain, the need for something small, fast and canvas
based was absolutely needed. Well done.

------
mhmtmhmt
Fantastic! No dependency, no external libs, lightweight and to-the-point. We
need more like this. Thank you very much.

I haven't played with it yet and there seems no labels and/or legend support
in pie charts.

------
kmfrk
Just tried printing the site to see if the charts work in print, and
unfortunately, they don't. An image fall-back apparently needs to be
implemented.

I really wanted to use this for my blog.

------
aymeric
Thanks I will use this instead of highcharts in my <http://weekplan.net>
application, it will save me a few kb.

------
eknkc
I've been working on a reporting interface and was planning to take a look at
possible charting solutions. This has been a great timing!

Looks great btw.

------
xsace
The tree colors at the top just looks like Pocket: Read me later

Otherwise, good job. Like other said, interactivity is lacking though

------
ummjackson
Just out of curiosity, what did you use to put together that amazing
documentation?

~~~
nnnnnick
Didn't use any particular software or tools as such, but used Google prettify
(<https://code.google.com/p/google-code-prettify/>) for coloured syntax
highlighting.

Wrote the content in plain HTML, and used jQuery to build the nav on left hand
side from the headings on the page.

~~~
ummjackson
Great job, some of the best docs I've seen in a while.

------
Kiro
How does this compare to Flot?

------
frankblizzard
This is the most beautiful chart library I've come across so far. Good job!

------
shenedu
Good job! Thanks for doing this. Will use it in my next project.

------
jiangth
This is beautiful. Well done, looking forward to using it.

------
wib
Really cool, looking forward to giving this a try.

------
the_economist
Really nice work! Where can we see more examples?

------
ummjackson
So glad someone made this, fantastic work!

------
Sami_Lehtinen
Superb, just what I were looking for.

------
rorrr
Why would you call it a HTML5 library?

This is a canvas JS library.

