10 ms·
Plottable.js – Flexible, interactive charts for the web
- insulanian 10y agoThis 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 10y agohttps://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 10y agoI use Charts.js for a project and it's pretty great.
- helb 10y agoThanks for the list! I spent most of today's work hours looking for a suitable library to use in a project we are starting.
- mauriyouth 10y agoI use http://recharts.org 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 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.
- uitgewis 10y agoI would honestly say that D3.js is the most flexible and powerful charting library I've ever used.
- anc84 10y agoD3 is a framework rather, it requires tremendous amounts of work to be able to create interactive charts.
- willyk 10y agoAgreed that it's a framework, but it's not necessarily that much work, it really depends on what you're trying to do. Sometimes its easier just to use a library if it offers what you needs, other times its easier to use D3 directly -- knowing when to make that call is important. There a good O'Reilly book on D3 by Scott Murray, the ebook version of which is free that's a great primer: http://chimera.labs.oreilly.com/books/1230000000345/index.html http://chimera.labs.oreilly.com/books/1230000000345/index.ht...
- ci5er 10y agoIn my use-cases, it doesn't take much work at all. That said, it took me a fair amount of time learning enough about it (D3) for that to be true. I think we'd probably both agree what if someone just wanted to build one (simple) interactive chart and then be done, D3 is probably not a good first choice.
- wongarsu 10y agoI 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). 1: https://dc-js.github.io/dc.js/ https://dc-js.github.io/dc.js/
- jarnix 10y agoWe are using Chartjs http://www.chartjs.org/ http://www.chartjs.org/ and HighCharts http://www.highcharts.com/ http://www.highcharts.com/ for our projects
- welder 10y agohttp://c3js.org/ http://c3js.org/ is the free version of HighCharts, and combined with D3.js you get a powerful and flexible charting library.
- acomjean 10y agoI use C3. Used to use HighCharts at last job. Both are really good. 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.
- eperfa 10y agoWe use Plot.ly (https://plot.ly/javascript/ https://plot.ly/javascript/), which is also built on top of D3.js 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.
- phonon 10y agoUnless 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.
- eperfa 10y agoThat used to be the case until the end of last year, but it has been open-sourced and you can render a plot entirely on the client side, without a roundtrip to Plot.ly's servers (no rate limits anymore, custom integrations to your existing stuff, etc.), for free. https://plot.ly/javascript/open-source-announcement/ https://plot.ly/javascript/open-source-announcement/
- phonon 10y agoWe looked into it after they open sourced it; AFAIK, it is still designed to connect to their streaming servers with an API key (or run locally in an ipython notebook or similar "offline"). If you want to make your own private dashboards for your own system you still need https://plot.ly/product/enterprise/#plotly-on-premise https://plot.ly/product/enterprise/#plotly-on-premise See https://github.com/plotly/plotly.js/issues/16 https://github.com/plotly/plotly.js/issues/16 Maybe there is a way of rolling your own, but there isn't any documentation... We ended up using (Django-)NVD3 instead, which worked fine.
- deleted 10y ago[deleted]
- deleted 10y ago
- ngrilly 10y agoWe use http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/, built on top of D3, by engineers working at Mozilla.
- xdanger 10y agohttp://dygraphs.com/ http://dygraphs.com/ was a pleasant surprise. It handled a lot of datapoints with ease.
- manigandham 10y agoThis was on HN before: http://www.jsgraphs.com/ http://www.jsgraphs.com/ (comparison of all popular charting libraries)
- buckhx 10y agoI recently left Palantir of my own accord and didn't sense that any layoffs were in motion.
- sethammons 10y agoIt 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?
- have_faith 10y agoProviding 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.
- deleted 10y ago[deleted]
- mauriyouth 10y agoyou don't need npm, node, grunt....just a build for the browser of the lib, i think it's called a umd build, and include it in your html file.
- codegeek 10y agoThey do have a cdn url for the js and css. You can directly link to those: https://cdnjs.com/libraries/plottable.js 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/plottable.css https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/pl... https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/plottable.js https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/pl...
- sotojuan 10y agohttps://unpkg.com/plottable@2.2.0 https://unpkg.com/plottable@2.2.0
- rdoherty 10y agoI would look at Flot, it's just 1 file (plugins are additional files) and very simple to use. http://www.flotcharts.org/ http://www.flotcharts.org/
- slig 10y agoCan 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/waterfallPlot.ts#L31 https://github.com/palantir/plottable/blob/develop/src/plots...
- uitgewis 10y agoPossibly method overloading in the type signature. If `enabled` is supplied the return is `this`, otherwise `any`.
- talldan 10y agoMy 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. edit - see also line 24, for the declaration of the usage without an argument: https://github.com/palantir/plottable/blob/develop/src/plots/waterfallPlot.ts#L24 https://github.com/palantir/plottable/blob/develop/src/plots...
- chrismorgan 10y agox.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.
- jwcrux 10y agoHow well does this handle large datasets (thousands of datapoints)? That's a problem that, having worked mainly with Chartist, I have struggled with.
- nabla9 10y agoWhat 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.
- jwcrux 10y agoLooking further into the examples, it looks like they offer time scale zooming, which is sufficient for what I'm looking for. Thanks!
- wongarsu 10y agoDisplaying 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 10y agoIf 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.
- sologoub 10y agoThe 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?
- pablobaz 10y agoComparing 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 10y agoAgree. Highcharts is well worth the license fee to me.
- olavgg 10y agoI 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 10y agoSurely 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 10y ago> 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 10y agoD3 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 10y agoWhatever. 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)
- Scirra_Tom 10y agoCan someone give some reasons why I might choose to use this or any other JS charting library over Google charts?
- peterbsmith 10y agoI 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.
- parenthephobia 10y agoThis looks good. It's the nearest thing I've seen to an implementation of lattice/ggplot2-style graphing (from R) for Javascript.
- SimeVidas 10y agoI’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.
- verbify 10y agoHmm, seems similar to http://nvd3.org/ http://nvd3.org/, which is also built from D3.
- socmag 10y agoJust 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 10y agoHighcharts 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
- hakcermani 10y agohttp://www.jsgraphs.com http://www.jsgraphs.com has a good comparison of the plethora of charting libs.
- tbarbugli 10y agoWhen 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, ...)
- bigger_cheese 10y agoDoes 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-scales-on-a-single-axis/35543469#35543469 https://stackoverflow.com/questions/35262796/plot-multiple-s...
- consolelog 10y agoHave you tried ZingChart? It supports multiple scales: https://www.zingchart.com/docs/basic-elements/configure-chart-scales/#additional-scales-secondary-scales https://www.zingchart.com/docs/basic-elements/configure-char...
- bigger_cheese 10y agoThank 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.
- supercoder 10y agoJust what the web needs, more js and chart frameworks