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.
> 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.
Seriously... I was just reading the examples and thinking to myself "why would I use this over vanilla D3"? The syntax isn't more concise and offers less control, and introduces a whole new api to learn. To me this is like writing a DOM manipulation framework on top of jQuery...
It has been around for a long while, has superb connectors to many different languages (we mostly interact with it from Python), and has been recently open-sourced. Free, but they also provide hosting for your charts for a very modest fee. Highly recommended.
Unless this has changed, you need the $9,950/year plan to serve it "behind your own firewall". I.e. otherwise plots on done on their systems by uploading data.
I have some very good experiences with dc-js [1]. It's a charting library for the purpose of interactive charts on managable datasets (tenthousands of records).
I use http://recharts.org, and i'm very happy using it since. Integrates well with react, other nice library that works well with react is https://formidable.com/open-source/victory, but less opinated and lower level. For alternative outside the react world, you have many wrapper around d3.js, that are higher level enough like nvd3.js, that let you throw quickly on the screen a chart.
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?
Providing they give you a download to the compiled script, there's no reason you can't just point a script tag at the source file. You would only need node and the rest to modify the source code I assume as they would have setup build tasks with grunt etc.
I wouldn't. While it still works (and I use it in a project of mine), the last commit is two years old and there are more and more open issues. It's a dead project.
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.
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.
My guess is that if you call it with a boolean argument, it returns `this` for chaining purposes. Otherwise it returns the current value of `_connectorsEnabled`. There are two declarations for the different usages, and then the actual implementation can return `any`. It is a bit strange.
public connectorsEnabled(enabled: boolean): this;
public connectorsEnabled(): boolean;
public connectorsEnabled(enabled?: boolean): any {
if (enabled == null) {
return this._connectorsEnabled;
}
this._connectorsEnabled = enabled;
return this;
}
In that way, typescript will use the most specific overload to do type checking, so you'll get an actual boolean when doing connectorsEnabled(); instead of any.
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.
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.
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.
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.
Readit News
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.
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.
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.
Deleted Comment
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.
I personally love: http://metricsgraphicsjs.org/ and http://www.chartjs.org/
BTW I created the list, comments are appreciated
It has been around for a long while, has superb connectors to many different languages (we mostly interact with it from Python), and has been recently open-sourced. Free, but they also provide hosting for your charts for a very modest fee. Highly recommended.
1: https://dc-js.github.io/dc.js/
C3 builds on top of D3 (D3 is a requirement). The documentation is ok, but I like the way it builds the more simple charts I'm creating now.
HighCharts is full featured and heavier. Its amazing what it can do. It falls back to older browsers fairly easily. It wasn't free though.
https://cdnjs.com/libraries/plottable.js
The page above actually links to the following:
https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/pl...
https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/pl...
Deleted Comment
[0]: https://github.com/palantir/plottable#quick-start
Check out any web dev project on github. Web developers are fucking insane.
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.
edit - see also line 24, for the declaration of the usage without an argument: https://github.com/palantir/plottable/blob/develop/src/plots...
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/ [2] http://www.highcharts.com/stock/demo/compare
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...
I've been looking for something with support for this a long time - cheers very much appreciated.
For me, I can use plottable and then make the charts my own with raw D3.
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.