4 ms·
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
by udfalkso 14y ago
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 14y agoBut on the other hand, SVG is infinitely more useful if you want to extract chart data from the page.
- ra 14y agoor display the same chart somewhere other than a web page, eg: a PDF or IOS app.
- hogu 14y agowell, it's pretty easy to go from canvas to png, which I think is more portable than svg + css
- shared4you 14y agoHow do you do that? I right-clicked on some graph, but there is not "Save Image As" option in Chrome
- johnyzee 14y agoIt's a canvas API function. So the author has to add this function (which is trivial).
- nickporter 14y agoOn 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.
- olefoo 14y agoHow is that more useful than a link to the source data in a format appropriate to the data?
- ssrubin 14y agoIt's not, but how often do you see a news source link to the raw data?
- akoeberle 14y agoBut 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.
- caw 14y agoI 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 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.