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.
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.
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.
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.
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.
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.
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)
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!
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.
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.
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.
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.
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 :)
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.
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".
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.
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.
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.
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?
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.
> 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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>
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.
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...
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!
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.