add canvas render 0.4.8 version of c3.js

[cnatale]

For the html5 application my company is working on, we needed to draw more data points than C3 was capable of, but liked the overall functionality of the library and usage of D3 as a model. The major bottleneck was SVG rendering. This fork contains a reimplementation of a subset of C3's rendering using a Canvas element.

Capabilities include:
-canvas rendering nearly identically to SVG version
-hover color highlighting
-massive increase in the number of data points that can be drawn to a graph

Animation is not implemented in this version.

In the tests I ran, the maximum number of data points displayed increased my more than a factor of 10 (possibly closer to 50-100, still running tests). This is possible because by doing procedural rendering to a Canvas element, the large memory overhead of storing individual SVG DOM elements for every graph shape element is eliminated. Mouse position detection is also performed algorithmically instead of by tiny SVG strips, again cutting down on memory footprint for graphs with lots of x-axis points.

Changes are localized to between lines 695 and 1197. As mentioned in the commit title, this is actually a branch of the 0.4.8 version of c3.js. I tried copying in the changes into the head version, but it looks like rendering has changed too much for a straight copy/paste to work. If this seems like a worthwhile piece of functionality, I'd be happy to work with other devs on the project to integrate Canvas graphs into the latest version, perhaps to be activated with an alternate parameter as an alternative to SVG rendering when users need more speed and can make do with the subset of functionality provided.

Note that only the c3.js file of this fork features the canvas graphs implementation.

Known issues:
-for graph redraws triggered by user callbacks, an extra chart.defocus() call is necessary to trigger the canvas redraw by C3

[buremba]

You should reverse chmod of c3.js to 644 and remove angular references. See https://github.com/cnatale/c3/blob/master/c3.js#L531 and https://github.com/cnatale/c3/blob/master/c3.js#L6577

[cnatale]

Ah, looks like some other devs were making changes to the file that I wasn't aware of. I'll take a look. Thanks.

[z]

@cnatale this sounds like a great improvement for larger datasets. What's the status on this? Have you tried updating it to the latest version?

[aendra-rininsland]

@cnatale I would love (LOVE) to implement this, but there's absolutely no way we can do so as-is.

First off, you've put everything in c3.js, which is a built file — for this to be at all feasible, it would need to be separated into the individual files that make up the src/ directory. It would also need to be rebased against master, which is now four full versions ahead of this.

I'd also really need at least a few unit tests to make sure everything is working properly. GitHub won't even display the diff properly it's so big, so I have no idea if any of this breaks anything else (Travis doesn't seem too optimistic in this regard...).

Again, this is totally a feature I want to see in the library; please consider updating your PR! If you need any help, I'm on Gitter.

[kt3k]

@cnatale
Sorry. Canvas support is so out of scope of c3.js. Please consider trying chart.js, for example. That library renders charts in canvas.