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?
"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)."
I don't understand this. I've used jQuery.sparklines before, which I thought was HTML5, so I double checked that implementation, albeit with Chrome dev tools. It appears to be a canvas, but still has interactivity.
I found quite a few existing SVG based graphing libraries based off d3 or Raphael, and wanted to create something a bit more lightweight - canvas sacrifices interactivity for raw speed.
I wanted Chart.js to be dependency free, which has led to a footprint of only ~4.4kb when minified and gzipped, d3 is a lot more complex, and has a gzipped size of about 10x that.
It'll have to be up to you whether canvas is the right solution in your use case over SVG!
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?
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?
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?
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!
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.
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.
"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?
I completely agree, without user interaction these charts aren't all that useful for most cases. I make games using HTML5, and it is quite easy to interpret user input such as mouse over/out on the canvas.
I have a little application with charts. I was using jqplot but IMHO it was too heavy and I started googling for a lighter solution. I found flot. flot is based on canvas and has user interaction. I don't know how it is implemented (btw flot is mit licensed) but it works. it's a shame that this library doesn't support user interaction
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?
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.
62 comments
[ 4.3 ms ] story [ 132 ms ] threadedit: any reason you decided not to use D3 for this?
"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)."
$('canvas').click(function() { window.open( this.toDataURL("image/png") , 'Serialized Canvas' , 'height=' + this.height + 'width=' + this.width ); });
This will popup a png version of a canvas graph if you click it.
http://omnipotent.net/jquery.sparkline
Is that implementation compatible with your library? I'd love to be able to see exact datapoints.
Also, adding sparklines would make this a great all-in-one charting tool.
I wanted Chart.js to be dependency free, which has led to a footprint of only ~4.4kb when minified and gzipped, d3 is a lot more complex, and has a gzipped size of about 10x that.
It'll have to be up to you whether canvas is the right solution in your use case over SVG!
Would love to see this MIT licensed.
I would love to see you rewarded for this project. Donations or a commercial support licence?
Wrote the content in plain HTML, and used jQuery to build the nav on left hand side from the headings on the page.
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?
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!
A great start! Definitely room to grow.
"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?
Let's put a stop to shitty Easter-egg UI.
Edit: The answer is Android < version 3.0. The author claims that iOS < 5.0 doesn't support SVG but that's not true
http://chartbeat.com/publishing/demo/
http://people.iola.dk/olau/flot/examples/interacting.html
Otherwise, good job. Like other said, interactivity is lacking though
Looks great btw.
I haven't played with it yet and there seems no labels and/or legend support in pie charts.