Chart.js is back online | Hacker News Reader

Chart.js is back online

chartjs.org

341 pointskarterk119 comments

Congrats on being able to open source this and thank you for doing so.

Honest question: Is animation really a needed feature for this? The opening animation adds no information value and has the negative effect of making the user think the graphics are actually interactive. I'm sure the animation itself isn't memory/processor intensive but it seems like a really unnecessary feature for a charting library that creates very beautiful, static graphs.

edit: OK everyone, I'm not an idiot: of course you should use animated graphs when showing things to the suits...that's the number one rule of graphic design, I believe :).

I only questioned it here because the OP's focus seems to be on a fairly clean and minimalist library, and the one-time startup animations seems to go against that aesthetic. But no doubt, they do liven up the page.

(Not having played with chart.js)

If the values change at any point and the display is updated, animation is much, much more than eye-candy. It's cognitive reassurance and an affordance that allows the user to more readily understand what is changing and how it's changing.

(source: I did the work equivalent to a master's thesis in grad school on building a tool for visualizing qualitative data)

I'm considering using this library on a project that involves a number of donut charts that start out all one color and gradually have a second sice added as the user changes settings. Beyond showing changes, I'm thinking an initial animation might help to show the user that they can change.

I think subtle animation for transitions and changes make for a much more pleasant user experience than when there are no animations, but animations for the sake of animation should, IMHO, be avoided. For example, I find the animated fade-in effect on the chart.js site to be distracting.

The animations on the graph on initial render was one of the reasons we chose a graphing solution. Clients love it.

Executives love animations. It looks like you can turn them off but trust me, after years of doing presentations in front of "the suits", it'll be worth leaving it in.

I agree with both sides: animated charts and graphs can add some welcome eye candy to an otherwise-dull presentation, potentially clarifying how quantities change relative to each other.

But they can also be distracting and annoying when used in a context where they add gratuitous motion in random areas. The chart.js homepage is itself an example of how not to use animated graphs. As soon as one graph captures your attention, you're distracted by another one animating in the corner of your eye, so you're discouraged from looking too closely at either.

The page as a whole suffers due to its lack of respect for the reader's attention.

Here's a good paper about animated transitions in stats graphs and their effectiveness. http://vis.stanford.edu/files/2007-AnimatedTransitions-InfoV...

The referenced Heer & Robertson paper discusses chained animated transitions that take you from one type of visualization to another in a way that explains the relationship between the two visualizations. The usefulness of chained transitions is debatable, but it is important to note that Chart.js's implementation seems to starts from nothing and animate to the final position of a single type of chart. This is not really adding: "empty" is not an interesting state, so the transition is frivolous. Moreover, because it forces pixel movements on the page, the users are left with looking for meaning, and are distraction so I'd contend this impedes with overall usability. And yes, it is great eye candy, and the corporate powerpoint junkies will probably love it, but remember: they also love those 3D pie charts.

I couldn't agree with you more, that's why I linked the paper.

Animations on graphs have come too far. But i can agree with you on some part that at a few places animations are not needed. If you look at the documentation (http://www.chartjs.org/docs/) then you can choose in the configurations to switch it off for all the graphs.

Total power !

I agree. While animation is nice in some ways, it really isn't necessary. Animations nowdays are far too long. Fortunately, it is possible to disable or speed up.

The library has a switch to turn the animation on/off

  //Boolean - Whether to animate the chart
  animation : true,

I think I understand your question.

It's not so much animation of data into it's final state (which is purely eye candy) but rather animation between states. I.e. you want to show how something changes over time, the suddenly it becomes very useful.

Then again I don't know if it's possible to animate between states. (i.e. from 1990-2010)

May be there is a way to switch it off? There seems to be the following option

//Boolean - Whether we animate the rotation of the Doughnut

animateRotate : true,

Ok, is this the best marketing campaign for an open-source project or what?!? I starred it yesterday but my guess is you've got a lot more people on board now!

Ok, is this the best marketing campaign for an open-source project or what?

Don't think so:

@_nnnick This is all just one big marketing ploy, isn’t it? ;P

@DanHarper7 wouldn't that have been amazing? I'm not that smart though unfortunately.

https://twitter.com/_nnnick/status/314049798502248448

Edit: Apologies, I initially took your comment as cynical towards Nick :(

Nope, was really just making a joke ;)

Oh, great! Now I'm suspicious!

best marketing campaign? I guess I am not seeing what you're seeing. To what are you referring to?

It would've been just-another-chart-library without the "my company made me take it down" angle.

Released -> Taken Down/Died -> Re-released.

Not to mention a few HN posts and hacker outrage / discussion stirring things up.

That said, it's probably the internet attention to the takedown that has made it come back up so quickly.

It's New Coke for open source projects!

It's like jesus resurrection, he got all the fame for that.

I think it was tongue-in-cheek saying that the publicity from taking it down right after release is giving it better visibility than they could've otherwise.

Welcome back. Nick, if you want it to be really successful, add a little bit of interactivity, at least labels to pie/doughnut charts and hover values on line charts. Then it's perfect.

The project mentions that this was an intentional design decision. The graph's are written to a canvas element, which means a low memory footprint and the ability to save graphs as images. I believe they'd need to switch over to using SVG elements for graphs if there are plans to add DOM events to chart elements.

Canvas can be used for labels and interactivity too: http://chartbeat.com/publishing/demo/

Clicks and hovers can be done on canvas, using hack that renders on second (invisible) canvas each object with its own, constant color and then checking color of the pixel at coordinates of cursor. It would probably need some kind of scene abstraction though.

Alternatively, just put some invisible DOM elements on top of the canvas and put your click handlers on those. It's imagemaps all over again ;)

This is how flot works. The base chart is drawn on canvas. All labels including axes, legends and mouseovers are DOM elements that are absolutely positioned over the canvas.

The canvas itself is always inside a canvascontainer div that also contains all the other dom elements.

"some kind of scene abstraction":

http://simianzombie.com/files/javascript/canvasui4.html

... and then he'd just be re-implementing (highcharts)[http://highcharts.com]

A freely available charting library with the same capabilities as highcharts would be a welcome thing for many people.

Looks like http://www.expert-24.com/ had a change of heart :)

Source: https://workfu.com/nick

Nice work! The JS breaks on magnification, but I submitted a pull request to fix that right up: https://github.com/nnnick/Chart.js/pull/27

No labels/legend support for the pie charts? I haven't checked it out too closely but it seems like it would be good to have the percentage labels and what they represent out of the gate.

"Pie charts are great at comparing proportions within a single data set."

No they're not.

Most people don't know/care about the statistical reality of pie charts and their lack of clarity. Maybe they are statistically proven to be bad at conveying differences in comparison to a bar graph, but if all you care about is the adoption of your charting API then you'd be a fool to not include pie charts. Sometimes being correct isn't the most important thing :)

Is this something to do with the area of circle sectors?

Yes they are.

For comparing two portions they’re okay. For larger data sets it can be difficult to compare the sectors: http://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Pie...

Exactly, they're great for binary groups: <facet> yes/no

Proof: http://chart.apis.google.com/chart?chtt=Pie+charts+are+great...

Tufte wept.

My #1 feature request is a fall-back that allows people to print the charts. This currently won't work for articles, unfortunately.

I am able to print all the charts that appear on the home page there with Chrome. At least I can print to PDF, though I don't see why printing to paper wouldn't work just as easily.

Interesting. It's only a problem on Opera, so I suppose it has to do with the Presto rendering engine.

So this should fix itself, when Opera switch to WebKit.

EDIT: Having said that, there needs to be a print.css for the charts. Things like #000 for labels, axes and such.

So what's the story?

Apparently, it was a misunderstanding on his part.

"I misunderstood some issues I wrote about earlier today. Chart.js is now back online and available under MIT. http://www.chartjs.org ." - https://twitter.com/_nnnick/status/314049798502248448

Looks like maybe the employer agreed to let him release chart.js as long as he didn't make the employer look bad? Maybe "I misunderstood some issues" really means "I spoke with my employer and they've changed their minds but I'm going to be polite about it".

Just an idea.

Let me present another side to this, as I am sometimes the guy sitting on the opposite side from the developer :)

(I have no idea what happened in this specific case).

Usually, when someone does something mildly serious (we are just wrist-slappy about the minor stuff, unless you do it multiple times, or intentionally) without following the process, first I verify they actually did it without any accusation at all. This often takes the form "It looks like you did X. Is this right or am I misunderstanding?".

If they did in fact, do it, I then say "Hey, just so you know, this could be an issue. I need to talk with some folks, and then we should talk and figure out together what to do about this. You <do/don't> need to do anything in the meanwhile" . Whether they need to do anything depends on the issue, but I am explicit about whether anything needs to be done.

At this point, the reactions vary from "oh shit, sorry, i didn't realize i was supposed to something different" to "fuck the police".

In any case, despite me explicitly telling them they did not need to do anything, there are still cases where someone will do something like take the project down (sometimes intentionally believing it will force my hand, sometimes not), and claim we told them to.

I go and talk with various folks like I said I would, then the person involved, we all decide we don't care (or do), and then it gets put back (or not), or whatever modifications needed are made. Usually if it's put back, this is accompanied by text like you see, stating that they misunderstood some issues. In most cases i've dealt with, this is actually an accurate statement of what occurred, and not us trying to save face. After all, I told them they did not need to do anything!

Of course, I won't deny there are times i've told folks to hide/take down projects. But in those cases, we don't later try to save face. I could completely see other companies not knowing what they are doing, and telling folks to take stuff down as a knee jerk. It definitely happens. But without more facts here, I wouldn't jump to the conclusion that this is what occurred.

Or maybe "I misunderstood some issues" really means "I misunderstood some issues". Just saying...

Definitely, it's just speculation on my part. However, it would surprise me if he actually misunderstood what his employer said.

Indeed, but I guess, like people have said there is other information we are not privy too. Glad to see it back though. Personally speaking it was not clear to me why it was taken down in the first place.

EDIT: typo

Either way, good on them for doing the right thing.

I really don't see how someone can misunderstand this. You either can do it or you can't.

I gather the author is UK based and working for a UK company. I imagine 'misunderstand' might be a polite way of saying 'we realised that our decision has caused a lot of negative publicity and we are changing our mind'. That is how it works in organisations I have worked for in the past. Or then again, the author could literally have mistaken what the manager said.

http://www.anglotopia.net/wp-content/uploads/2012/01/Anglo-v...

I read that might as dripping with sarcasm... it's highly unlikely he would have taken it down if they hadn't flipped the bitch switch and now that the internet militia is tracking them down they flipped it all the way to nice.

That seems less of a polite way of saying, and more like a butt-covering lie. Am I supposed to understand from 'misunderstand' that the company might be climbing down from a stupid mistake it made, or actually be misled?

It's not necessarily any of your business. The code is back, why do you need to know the full and whole truth about his dealings with his employer? And what's wrong with letting someone save a bit of face when they came out on the right end of something after all?

Thank you.

It is nobody's business here but Nick's what happened. Take his words at face value and assume he misunderstood his boss unless you have reason to believe otherwise and it actually matters.

> It's not necessarily any of your business

I think this is wrong, Nick initally posted to the Internet - without caveat's - I think it's perfectly reasonable to ask question's and intrigue.

> Am I supposed to understand from 'misunderstand' that the company might be climbing down from a stupid mistake it made, or actually be misled?

No, and you are not supposed to be able to understand. Otherwise being polite and claiming to have misunderstood something wouldn’t make any sense, as it would be equivalent to blaming the company directly.

I have no idea about this specific case at all.

Could be either a genuine case of the author hearing one thing and the company meaning another, or a change of mind by the company, possibly involving higher ups.

In some societies, a "butt-covering lie" is politeness.

The employer probably wanted to talk to him about it, to decide whether there really was enough similar tech (or even shared code) that it might harm the company. That's basic due diligence.

Probably after going over it, they determined that it would present no harm. Notice that this was not a legal process, just an employer and developer communicating.

It wouldn't always be that clear cut. His employer's policy might be something like "outside projects are allowed as long as you don't use knowledge that you gained from working there".

That could easily be interpreted more broadly than it was intended. He could interpret it as "I learned Javascript while working there, so I can't release a project in Javascript" or something like that, when they really intended it to prevent use of non-publicly available information related to their business.

Well, what it means is he thought that he couldn't, but then he found out that his understanding was wrong, and he actually could.

Probably that it's already out in the wild and might as well take credit for it, and associate positively with it instead of negatively?

Or just really clever drama marketing! Kidding.

Really happy that Chart.js is back because if it didn't come back, I would have been able to use only xCharts (http://tenxer.github.com/xcharts) which I find less versatile.

Apart from this, I don't get the comments at the top! Is this what HN users think of open source projects which spring up from time to time! If a project is taken down due to IP rights and then comes back to life after a day, is that all a marketing campaign? Don't you think of it as an accomplishment for the community? And this is not the first time that HN users just go about destroying someone's project in a second. Shouldn't we help in giving the person a direction and helping him out.

Why someone would design a charting library and design the dataTable without reusing someone else's format is completely beyond me.

This one is specially bad because it mixes format with content, I thought we learned it was bad idea when we came up with CSS.

Why not use the same data format as Google Chart Tools and make it dead simple to switch from one library to the other or to integrate with several data sources available for Google Chart Tools?

And if you are still mad about Reader and feel rebel just use the same format as highcharts or <insert here random charting library here>.

Don't get me wrong, I think this is beautiful, and other than this small design rant I appreciate your work a lot and the effort to bring it to the world open source. Thanks a lot.

It's open source, fork it and make these changes yourself.

This is great. I started to stub out Highcharts for Script# and was wondering how this library compares to it? I did a lot of research and decided to use Highcharts. Can you please list the pros/cons between Chart.js and Highcharts? Thanks!

They look quite nice. But I would prefer that the default way of initializing the dataset is by loading a HTML table. This way content would always be accessible, even without Javscript and also by crawlers like Google.

There's nothing stopping you from doing that with a pinch of javascript.

Of course :) I just think that doing it from a HTML table is best practice and it's always nice when a library promotes these. Most developers simply go: 1) I want chart 2) Chart needs JSON 3) I give chart JSON

It didn't say anything about why it is so special?? There are tons of HTML5 client side charts already in existence such as jqplot, highchart, fusionchart..so please let me what makes it so special please.

It's so awesome that it is a key competitive advantage for the author's company.

"This little charting library will make us MILLIONS!" </dr. evil>

At a glance I think it beats those by being better looking, open source, simple data structure, simple setup. This seems to me to be the quickest way to get a beautiful and interactive line chart onto your webpage.

Not interactive though.

Not interactive.... yet?

I think he left it non-interactive intentionally for memory reasons.

Beucase an evil boss take down this one, so we must love it.

You needn't love the project to consider this a win.

Apart from the earlier takedown, this one actually seemed to run at a decent frame rate on Firefox for Linux.

I'm really happy to see this project resurface, I had already added it to my "must check out" projects. Glad Nick pulled it off.

I don't care about the how and why it's back, I'm just happy that it is.

Small mention in the repo: https://github.com/nnnick/Chart.js#license

Looks like it's (now?) under an MIT license.

It was already under MIT license: https://github.com/nnnick/Chart.js/commit/26962ce2b6ffa2e1f0...

That was a pretty fast turnaround.

Just a heads up. I'm having trouble with the docs page navigation on my 13" macbook in Safari. The navigation is taller than the screen, which shouldn't be a problem, but when I try to scroll while hovered over the navigation it is scrolling the page instead of the navigation most of the time. I'm having to find certain spots that will allow me to scroll the navigation instead so I can reach the bottom options.

the ?apo and ?back links will do some nice statistics on click generation, and the numbers regarding user participation after first and second launch in an open source project will be good too.

might we see a paper coming in the future about this stunt? maybe an internal memo with a proper TPS report on how to maximize open source participation. of course release to the unnamed company internally only, let's call it Initech.

So, was this all just a big marketing ploy?

I think its completely crazy that hardly any of the charting tools in javascript support error bars! Only Highcharts 3.0 beta supports error bars, as far as I know. Data are absolutely meaningless without error bars and its not very smart to use that data without appropriate estimates of uncertainty.

Really? Most folks just want to chart signups, lead submissions or similar in a time period. No uncertainty at all.

Yay! Nick: glad your employer changed their tune. Long live open source :)

The article I wrote for infoq is up now: http://www.infoq.com/news/2013/03/chartjs-v.0.1-released

Does Chart.JS provide any labeling solution for pie charts like Highcharts does?

What I'm talking about: http://jsfiddle.net/mgbNb/3/embedded/result/

I'm currently a Highcharts advocate, but this looks quite promising. Would love to see a comparison between the two (not sure if I have bandwidth to do it myself).

First thing that comes to mind is that Chart.js has less restrictive licencing. Chart.js available under the MIT licence, while Highcharts has a paid commercial licence and CC licence for non-profit projects.

congrats on being on HN front page for the third time on such a short timeframe! This project must be really loved by the community ;)

I was asleep while this happened, can someone post a copy of the message or whatever it was? There's absolutely no context any more.

I dont have the original post, but the author wrote earlier today that due to copyright/licensing issues with his previous employer he had to take down the project he had released as open source.

Also, just wanted to say hi--remember me? You gave me karmawhores years ago, just wanted to say thanks again!

The web is evolving and it is just beautiful

http://www.oesmith.co.uk/morris.js/ is better anyway

This is all under the heading on their docs page on "Getting Started"...

  Getting started
  Add morris.js and its dependencies (jQuery & Raphaël) to your page.
  <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.1.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

Um. No, don't think so. Too much over-head

So why would I use this instead of D3.js?

This is a significantly higher abstraction than D3. Charts.js is comparable to NVD3, dc.js, xCharts, all of which are built on top of D3.

Thanks for mentioning these. I didn't know about them. Do you know if there is any good charting higher abstractions for "node" graphs (http://en.wikipedia.org/wiki/Graph_(abstract_data_type))? I only know about the force layout ones in d3.

Nevermind, I found this: http://stackoverflow.com/questions/7034/graph-visualization-...

(Although I'm still lokking for a good tool for visualizing path algorithms (TSP, A* etc))

D3 uses SVG which doesn't run on older Android and iOS devices at all, and uses a bunch more memory and CPU than a single Canvas element.

or something built on d3 - like http://nvd3.org/

hn.txt

Good to hear!

Thank you.

From the developers at http://toptestprep.com

This is all what I need for my next (little) project, no need to search anymore.

Would be great if they added support for tooltip style labels on datapoints!

awesome congrats!

This looks like a solid library, I like widgets that are initialized and configured with JSON. I've used highcharts in the past, I'll check it out next time I need to do some charting...

woot! grats on getting it back up somehow. what happened?

And now I see why people were so excited about this! This is very impressive, I only hope that I remember it or can find it by Googling "charts javascript library" when I find a time to use it!

Reply on news.ycombinator.com