Hacker News Reader

Comment by nicklovescode | Hacker News Reader

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?

View on HN

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)."

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

or display the same chart somewhere other than a web page, eg: a PDF or IOS app.

well, it's pretty easy to go from canvas to png, which I think is more portable than svg + css

How do you do that? I right-clicked on some graph, but there is not "Save Image As" option in Chrome

It's a canvas API function. So the author has to add this function (which is trivial).

On the docs page, in Chrome, hit ctrl+shift+J (option+cmd+J on OSX) to open the console, and paste this in:

$('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.

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

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

But this also a the advantage when it comes to tooltips or clickable elements. In a canvas based chart there is no easy way to have to do this.

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.

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 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!

Reply on news.ycombinator.com