Skip to content
very fast & simple HTML5 canvas-based chart
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
chart.js
index.html
jquery.min.js
sample.png
test.js

README.md

Motiviation

It is amazing how badly just about every charting library fails when the number of points exceeds 10,000. My applications demand 50x that. This is the simplest, fastest way to render charts in JavaScript + HTML5 that can handle >500,000 points without barfing on non-mobile browsers and still add some basic decoration. It relies on HTML5 transforms rather than adding extra function calls in the middle of the render loop like I've seen in several other libraries. Native Array is also faster than objects to store x/y points (blows my mind that some libraries do this).

Sample

Notes

Like every other chart library, just pass the constructor a DIV DOM ID. Function addPoint([x, y]) does what it says. Function draw() also works as expected. There are a tiny # of properties: setProp('xlabel', 'Label'), etc. Documents coming.

Auto-frequency of tics favors the origin; if either axis' origin is visible in the view, tics start there and move left & right or top & bottom. If origin is not on the axis, tics start at the left hand or bottom. See sample image.

Tested on Win10 (at 1, 1.25 & 1.5 pixel ratios) on Firefox (51), Chrome (55) and Edge (who cares), and macOS Safari and Chrome (55) at 2.0 pixel ratio.

TODO

  1. auto-anti-scrunch tics based on font and plot size (what Gnuplot tried to fix back in the day)
  2. More Map() parameters
  3. Memory & execution profiling for more optimizations
  4. xrange/yrange
  5. custom tic ranges
You can’t perform that action at this time.