
Plottable.js – Flexible, interactive charts for the web - insulanian
http://plottablejs.org/
======
olavgg
I really dislike these simple charting libraries, because I always have some
kind of issue that just wastes my time in the end. For example with plottable,
there is a hover event function that is extremely expensive that will trigger
for every pixel movement with your mouse. With just a few hundred datapoints
every chart we rendered ran horribly slow.

With D3.js you have instead full flexibility and the only performance issue is
that SVG's are slower than canvas, and that is mostly a problem when you have
tens of thousand data points.

~~~
andybak
Surely if it's a bug that affects everyone then file an issue?

If there's a bug in a library then that doesn't invalidate the entire concept
of 'simple charting libraries'. How many have you tried?

d3 is robust because it's great code that's widely used - not because of it's
other design choices.

~~~
ComputerGuru
> d3 is robust because it's great code that's widely used - not because of
> it's other design choices.

I disagree very much. On top of the facts you mentioned, the main reason why
d3 works where others don't is because it doesn't abstract away as much from
the end user. Leaky abstractions will always, always come back and bite you in
the you-know-where.

~~~
blowski
D3 is itself a leaky abstraction, since all frameworks, libraries and
languages are ultimately leaky abstractions of some lower level. What matters
is choosing the right level of abstraction based on what you're trying to do,
and the resources available to do it. In some cases, D3 will be at the right
level, and in other cases, something like Plottable will be right.

~~~
apathy
Whatever. This is a corporate vanity project (easy to spot because the logo is
better than the code) with 5-, 6-, and 11-month old PRs hanging around.

Clearly this library is setting the world on fire. Meanwhile if you want slow
pointy clicky chartjunk for your PHB you can probably use your company's
Tableau license, and if you want to push the envelope you use d3.

I've been using d3 on and off since 2011. It started from a spare, elegant
idea and progressed to the point that almost anything I might wish to
implement has at least _some_ pieces already written in some obscure
blocks.org block.

I find that pretty damned impressive given that many of my interests were
research projects abandoned in the 90s and only just now beginning to come
back. (yes, there were smart people back then, too; they all seemed to have
SGIs)

~~~
blowski
That's an entirely valid but different criticism. I haven't used Plottable,
but I have used Flot and Chart.js and was very happy with them both.

------
insulanian
This is definitely the best charting library I've worked with so far, mostly
because of its flexibility.

However, being afraid that I'm not aware of some other, maybe more powerful,
libraries out there, I'm asking here are there good alternatives?

Also, there were some rumors lately regarding the layoffs in Palantir, which
makes me worry about the future of the project.

~~~
fasouto
[https://github.com/fasouto/awesome-dataviz#javascript-
tools](https://github.com/fasouto/awesome-dataviz#javascript-tools)

I personally love:
[http://metricsgraphicsjs.org/](http://metricsgraphicsjs.org/) and
[http://www.chartjs.org/](http://www.chartjs.org/)

BTW I created the list, comments are appreciated

~~~
enraged_camel
I use Charts.js for a project and it's pretty great.

------
sethammons
It has been over a decade since I did any legitimate work in JavaScript. If I
wanted to use this to make some pretty data displays, do I really need to
install an ecosystem (npm, node, grunt, bower, more?) instead of just pointing
a script tag to something.js?

~~~
SimeVidas
Wait another year, and you’ll be able to just import the custom element, e.g.
<cool-chart> and configure it declaratively via content attributes :).

~~~
spankalee
Yes, this is where things are going, but you'll still likely need to install
<cool-chart> via npm or bower.

------
slig
Can someone enlighten me on why they're doing two declarations, one empty
returning `this` and the other, implemented, returning `any`?

    
    
        public connectorsEnabled(enabled: boolean): this;
        public connectorsEnabled(enabled?: boolean): any {
          if (enabled == null) {
            return this._connectorsEnabled;
          }
          this._connectorsEnabled = enabled;
          return this;
        }
    

[https://github.com/palantir/plottable/blob/develop/src/plots...](https://github.com/palantir/plottable/blob/develop/src/plots/waterfallPlot.ts#L31)

~~~
chrismorgan
x.connectorsEnabled() on line 24 is a getter, returning the boolean.

x.connectorsEnabled(boolean) on line 31 is a setter, return `this` for the
benefit of method chaining.

That then leaves the actual definition which goes through to the JavaScript:
it has an optional argument to satisfy both plausible signatures and starts on
line 32.

In short, the first two are basically hints for TypeScript (if the signature
is such-and-such, its return type is actually more restricted than `any`),
while the third has the actual implementation.

For something similar consider how the type of callback in
`addEventListener(type, callback)` depends on `type`: it’s always going to be
a function taking an Event, but for e.g. type 'mousedown' it’s actually more
than that, it’s a MouseEvent. So the TypeScript definitions in dom.d.ts or
whatever it is (I haven’t had opportunity to actively use TypeScript for a
while) has a whole lot of definitions: `addEventListener('mousedown', (event:
MouseEvent) => void)`, `addEventListener('focus', (event: FocusEvent) =>
void)`, &c. (And because it’s just definitions, not the implementation, there
is no actual implementation of `addEventListener(string, (event: Event) =>
void)`. This connectorsEnabled case _does_ have the actual implementation.) In
type system terms, think of it as a very restricted form of dependent typing.

~~~
talldan
It feels complicated due to not using separate getter and setter functions. By
splitting it into two functions the annotations could be reduced as well. I
wonder what the reason for not taking that approach was.

~~~
chrismorgan
It’s common in JavaScript to have method overloading for getters and setters
like this. jQuery is probably the best-known example; .css('property') is a
getter and .css('property', value) a setter.

------
pablobaz
Comparing their Finance demo [1] to the HighStocks equivalent [2]. It comes in
at nearly twice the lines of code for significantly less functionality.
Obviously there's a difference in approach here - HighStocks comes with lots
of sensible default options where as Plottable.js seems to require more
explicit configuration. And Highcharts is a commercial product whereas
Plottable is free.

For me though Highcharts/Highstocks is still easily worth its license fees. In
my experience >90% of charts I require are very simple to implement in
Highcharts and the sensible defaults make your life easy. For the other <10%
use D3/a custom solution.

[1]
[http://plottablejs.org/examples/finance/](http://plottablejs.org/examples/finance/)
[2]
[http://www.highcharts.com/stock/demo/compare](http://www.highcharts.com/stock/demo/compare)

~~~
nzjrs
Agree. Highcharts is well worth the license fee to me.

------
bigger_cheese
Does this library handle multiple scales per series on a single chart? This is
a pretty key requirement for me and a lot of the javascript libraries I've
found don't handle this user case very cleanly.

Ideally I want to plot common time series data with independent scales for
each yaxis variable. This is for plotting thermocouple traces.

Here is a stack overflow post from me a while ago:
[https://stackoverflow.com/questions/35262796/plot-
multiple-s...](https://stackoverflow.com/questions/35262796/plot-multiple-
scales-on-a-single-axis/35543469#35543469)

~~~
consolelog
Have you tried ZingChart? It supports multiple scales:
[https://www.zingchart.com/docs/basic-elements/configure-
char...](https://www.zingchart.com/docs/basic-elements/configure-chart-
scales/#additional-scales-secondary-scales)

~~~
bigger_cheese
Thank you that looks like exactly what I need.

I've been looking for something with support for this a long time - cheers
very much appreciated.

------
Scirra_Tom
Can someone give some reasons why I might choose to use this or any other JS
charting library over Google charts?

~~~
peterbsmith
I can say why I would use it, I don't know that I can answer why you might. I
would this because I love D3. I also don't have time to write a lot of it. D3
can be expensive for basic charts to the point where you'd be foolish to use
it. D3 is great for complex data visualizations where the expense is an
investment that will pay you back in higher performance and higher
flexibility.

For me, I can use plottable and then make the charts my own with raw D3.

------
socmag
Just curious...

Any recommendations for the easiest to drop-in pretty looking charting library
that supports dynamic streamed data from a WebSocket.

For instance, let's say I want to show an dynamic CPU usage graph of one of my
servers over time. I don't want a ton of dependencies, it should be
lightweight, easy to integrate, and quick!

I'm not an HTML guru, so I don't want 100's of files that I have to build with
bower/grunt jobs. Just a link to a script and a bit of JavaScript. That I can
manage,

Suggestions really appreciated. If this is it, that's fine too.

~~~
artificial
Highcharts has live data capabilities, I'm not affiliated with them btw.
[http://www.highcharts.com/docs/working-with-data/live-
data](http://www.highcharts.com/docs/working-with-data/live-data)

------
jwcrux
How well does this handle large datasets (thousands of datapoints)?

That's a problem that, having worked mainly with Chartist, I have struggled
with.

~~~
nabla9
What is the maximum number of datapoints that plotting library should be
excepted to handle at the same time?

I think 10,000 datapoints is the limit in 2d visualization but even 1000-2000
datapoints is often acceptable limit. It's usually reasonable to reasonable to
downsample and decimate data before presenting it. If user zooms into data, it
should be handled in some other ways than keeping all data.

~~~
wongarsu
Displaying up to 1000 datapoints at once seems like a reasonable limit.

But if the library supports zooming, I highly appreciate it if I can just put
my 10,000 to 100,000 datapoints into the library, specify a simple filter
function (avg, sum, min, max) and let the library pick the points it wants to
display at each zoom level.

Beyond ~100,000 datapoints any filtering is likely better done in the database
than on the client. For values below that, Javascript is more than capable.

~~~
MJSplot_author
If you are plotting using a canvas - not building a SVG or on the dom - then
even 50000 points is fine, no need to filter even on mobile devices.

A 100,000 data point file would be about 500kb transfered to the client. This
is still a tiny amount of data to play around with in JS. It is possible to
build an array of image tiles, and zoom around like google maps. But keeping
the image tiles in memory could be worse than just replotting if the plot
function is fast and optimized enough.

------
SimeVidas
I’d like to see more tools and tutorials for generating charts on the server-
side, so that the amount of JavaScript is kept at a minimum. You just can’t
afford to run hundreds of KB of JavaScript in the browser anymore… unless it
runs in a worker, I guess, but I haven’t seen tutorials on that either.

------
sologoub
The example charts appear to not resize with device orientation change from
portrate to landscape.

Is this something that is expected to be handled by the end-user developer?

------
hakcermani
[http://www.jsgraphs.com](http://www.jsgraphs.com) has a good comparison of
the plethora of charting libs.

------
verbify
Hmm, seems similar to [http://nvd3.org/](http://nvd3.org/), which is also
built from D3.

------
tbarbugli
When it comes to plotting stuff with JS HighCharts is the ugly thing that gets
the job done. I think at this point I tried at least 10 different libs and
always ended up wasting lot of time because some basic feature was missing
(eg. tooltips, zoom, some sort of chart, log scale, decent theme support, ...)

------
parenthephobia
This looks good.

It's the nearest thing I've seen to an implementation of lattice/ggplot2-style
graphing (from R) for Javascript.

------
supercoder
Just what the web needs, more js and chart frameworks

