9 ms·
Show HN: JavaScript Graphing Library Comparison
- deleted 11y ago[deleted]
- MayMuncher 11y agoWhoops thanks!
- ohitsdom 11y agoGood stuff! What about D3? http://d3js.org/ http://d3js.org/
- ne8il 11y agohttp://dimplejs.org/ http://dimplejs.org/ is another D3 based charting library.
- johnatwork 11y agoI've just looked at dimple. It looks quite a bit simpler than implementing d3, I will have to play around with it, but from your experience how would you rate it in terms of ease of use, learning curve, performance, etc.?
- aw3c2 11y agoIf you want to make graphs like those on their page, it's fun. But once you want more it can be super annoying and hard to understand.
- bshimmin 11y agoYeah, my experience exactly. It's a great start if you're prototyping and your initial use-cases map well to their demo pages. Once your designer gets excited, you'll have to write a lot of code on top of it and may well consider ditching it entirely.
- ne8il 11y ago- It is a lot simpler than D3 - It works best when your use case fits into the explicit examples given here : http://dimplejs.org/examples_index.html http://dimplejs.org/examples_index.html - If you are wanting something from the advanced examples, you should be proficient in javascript and understand d3 already - If you want something not in the examples at all, you should really understand d3. It's pretty quick to get up and running with it, you can always get access to the underlying d3 selections to do more complicated operations, and the main developer is fairly accessible through stackoverflow questions or github questions. There are some gotchas I've run into but nothing that has made me consider switching. We evaluated a few different libraries before choosing it. I can't speak for performance really because we don't have huge datasets. For ordinary business data (not looking at 1000s of points on a chart), it's fine.
- rco8786 11y agoSure wish there were some performance comparisons
- kodablah 11y agoI think http://nvd3.org/ http://nvd3.org/ should be added. It is the only free/OSS that was able to do the complex combined graphs I needed for a recent project.
- MayMuncher 11y agoThanks! Adding soon
- wheaties 11y agoI wish they would open source the rest of the charts. When I worked there we had some amazing visualizations that weren't included in the open source portion.
- kodablah 11y agoIt seemed like the project went a bit dormant and Novus was not supporting it that well so a community fork [1] was made that was just recently merged back in [2]. I have seen the support uptick (though a tiny issue I made was closed while still wrong before I made a PR [3]). 1 - https://github.com/nvd3-community/nvd3 https://github.com/nvd3-community/nvd3 2 - https://github.com/novus/nvd3/releases/tag/v1.7.1 https://github.com/novus/nvd3/releases/tag/v1.7.1 3 - https://github.com/novus/nvd3/issues/1033 https://github.com/novus/nvd3/issues/1033
- Demiurge 11y agoI've been looking for a chart library to display timeseries graphs and integrate well with react. The best one I found so far is react-d3. Unfortunately, it's still somewhat awkward.
- andreaferretti 11y agoShameless plug: you may want to have a look at my library https://github.com/andreaferretti/paths-js https://github.com/andreaferretti/paths-js which is made for exactly this purpose. My frustration was that D3 wants to have control over the DOM, but most frameworks let you write components in a declarative style using templates or databinding. So I started paths-js , which takes the data as input and provides an abstract description of the graph as output, that you can then use in your framework to provide rendering. One of the demos that you find on the page I linked is actually made with React
- Demiurge 11y agono shame, it could really help, thanks :)
- codesuki 11y agoHey, shameless plug but in case you need react integration maybe have a look at my project. https://github.com/codesuki/react-d3-components https://github.com/codesuki/react-d3-components I am using that for a dashboard and fixing the problems as they come. I'll push a new version soon that incorporates some of the issues mentioned on github and animations. Anyway good luck with your project!
- marxdeveloper 11y agoWhat would be the most lightweight library if I only need a line graph compatible with most desktop and mobile browsers without any dependencies?
- johnatwork 11y agoI would say d3.js (http://d3js.org/ http://d3js.org/).
- angersock 11y agoWrite it yourself with the HTML5 canvas? That's also the easiest way to get good performance for realtime, high-volume graphing.
- Mahn 11y agoDygraphs (http://dygraphs.com/ http://dygraphs.com/) has treated me well in the past. No dependencies, tiny library, handles millions of points, and it's html5 canvas based.
- jonahx 11y agoThis is a fantastic idea. I've done these comparisons myself and it's overwhelming and time-consuming. Btw, I love the animations for the filtering, the way the items contract and rearrange themselves. What did you use for this?
- gschrader 11y agoI see none of them have the option "Large Data Set", I would think dc.js supports that with it's crossfilter support.
- nawitus 11y agoThe typical solution is to map the data into a smaller data set in the backend, so you don't need to send 100k points to the browser.
- capkutay 11y agoThis. I've seen developers try to do all these crazy client-side optimizations hoping it will make the graph drawing faster, when all they have to do is sample the data in the server. You don't need an array of 1 million data points to visualize the general sample.
- aw3c2 11y agoGive http://ecomfe.github.io/echarts/index-en.html http://ecomfe.github.io/echarts/index-en.html a try. Sounds capable of more data than DC.
- 13years 11y agoActually it seems their selector is bugged. If you hover over them individually, two of them are tagged with "Large Data Set" Sigma and Dygraphs
- sycamorex 11y agoWhile we're on the topic, I'm beginning with js with a goal to create some materials for maths classes. Which library would let me do, for example, graphs of quadratic, cubic functions AND possibly drag/move the line to see how the equation translates? Thank you
- ciriarte 11y agoI don't have a lot of experience with it, but Bret Victor's http://worrydream.com/Tangle/ http://worrydream.com/Tangle/ come to mind. Hope it helps!
- btbuildem 11y agoIf you want to create class material, have a look at http://challengeu.com http://challengeu.com - they've built an entire service around providing a platform for teachers to share content. It's pretty cool! (Disclaimer: I used to work with them)
- jostylr 11y agoCheck out jsxgraph: http://jsxgraph.uni-bayreuth.de/wp/ http://jsxgraph.uni-bayreuth.de/wp/ I wrote up a Newton's Method example a few years ago and it still holds up well: http://www.programmingmath.com/ http://www.programmingmath.com/
- sycamorex 11y agoThank you everyone. I'll check the suggested options.
- vegabook 11y ago31 libraries, zero for "Large Data Set". That tells you everything you need to know about Javascript/browser graphics for data science. A. The DOM cannot handle as many nodes as are needed for large datasets and/or B. even with Canvas/webgl etc the browser platform itself chokes on dataset sizes much bigger than 1/2 gig (ie, "small" data). So Javascript is fantastic for explanatory graphics, but forget about exploration.
- nawitus 11y agoHumans typically can't comprehend 500 MiB of data in a chart well, so the large data set is mapped into a smaller data set for visualization.
- vegabook 11y agoCompletely agreed. Problem is while you're exploring to find the correct dimensional reduction / chuckout strategy, you're typically rapidly scanning through lots of scatter plots / density plots / whatever in grids and my experience is that the browser and javascript don't cut it here for reasons of throughput. If it's not the DOM that's blocking things, it's the commmunication channel to the browser that is too slow, and you can't dump all your data into the browser to avoid the communication slowness, because it then chokes. Chrome will barely allow a JS object a mere gig in size. Firefox dies well before that. This is not to say that we're not moving in the right direction on javascript/browser-based exploration, just that for now it's premature. BTW I'm succesfully using Jupyter (ipython notebook) as a hybrid solution. Bit of a best of both worlds. But then we're no longer talking JS for the graphics.
- lmeyerov 11y agoOur JS lib (not listed here) outperforms best-of-class native. We basically connect your browser's GPU to a GPU cluster in the cloud, but the data analyst doesn't care. We focus on real-time interactions with big graphs (e.g., connecting to your spark cluster) and include intensive visual computations like real-time edge bundling. We previously applied the same techniques to big time series (horizon) and treemaps. Happy to chat more if relevant. You can see a bit at graphistry.com .
- aw3c2 11y agoThis should really include http://ecomfe.github.io/echarts/index-en.html http://ecomfe.github.io/echarts/index-en.html
- Cyph0n 11y agoBaidu huh. Those plots looks really slick. IE6+ support is quite the accomplishment.
- lalwanivikas 11y agoI agree with you. But why do you think IE6+ support is an accomplishment? Both FusionCharts and HighCharts also support IE 6+
- taf2 11y agoRaphaelJS also supports IE6+
- arpit-ispirato 11y agoI can vouch for that. I have been using FusionCharts[1] for some years now and I have never faced any browser compatibility issues. But I can understand Cyph0n sentiment here. It's amazing that they still support IE6+. [1] http://www.fusioncharts.com/ http://www.fusioncharts.com/
- rip747 11y agoconstantly forget about this library. its so impressive with the amount of charts and features that it has. they really did an awesome job with it.
- MayMuncher 11y agoThanks! I'll be adding that shortly!
- castell 11y agoWhat's the license? Is it closed source or under an free open software license? https://github.com/ecomfe/echarts https://github.com/ecomfe/echarts ?
- AaronNewcomer 11y agoFusionCharts would be a good one to add. But then you will have to add like 40 more graph types as well http://www.fusioncharts.com/charts/ http://www.fusioncharts.com/charts/
- lalwanivikas 11y ago+1 Here are some business dashboards examples from FusionCharts: http://www.fusioncharts.com/dashboards/ http://www.fusioncharts.com/dashboards/
- buovjaga 11y agoSeems to be missing http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/
- gt565k 11y agoyou've got a typo in the title for one of them :) XChats -> XCharts
- h1fra 11y agoI always rely on Highcharts, probably the biggest library presented here. Fit all the case (except map maybe) and flexible enough to let you change everything if you or your designer want something very specific !
- kaolinite 11y agoSame. Before I found Highcharts, I'd switch between a few different graphing libraries, based on the needs of the project. I'd always find that each graphing library had its own set of limitations - there'd always be something it couldn't do (besides D3, where you can do basically anything - it's just quite complicated). Highcharts was the first library I found where, even when I assumed what I wanted to do would be impossible, it could do anything I threw at it. The number of settings and formatting options is incredible. Such a fantastic library. (By the way, for maps, there's Highmaps. It's an additional license fee but it integrates nicely and provides a bunch of cool choropleth map features, etc).
- danielvinson 11y agoHighCharts is great, but it is prohibitively expensive for a startup to use in their product.
- manigandham 11y agoHow so? It's less than $400 for an unlimited use single developer license without support. That doesn't seem very expensive for a good product that saves time and helps productivity. I'm sure they might offer discounts if you contact them about the startup situation.
- elliott34 11y agoIt's 90$ for a single web page that's not considered a web application, which has a dubious definition "A web application is a website that has customer specific data or charges for its use."
- brianpgordon 11y ago
- vitaut 11y agoIt would be great if it was specified whether each library works offline for comparison. For example, Google Charts don't work offline.
- ppoint 11y agoGreat stuff! Would be great if similar comparison existed for data grids (tables).
- lalwanivikas 11y agoHere you go: http://www.fusioncharts.com/javascript-charting-comparison/ http://www.fusioncharts.com/javascript-charting-comparison/
- nirkalimi 11y agoInterestingly enough, I had a problem with ChartJS that no one seemed to be able to remedy. It was quite bizarre and at first seemed to be a cross browser issue, but after further investigation it seemed to just be some type of strange cross-machine issue. See it here http://stackoverflow.com/questions/30063762/side-effects-from-chartjs-for-only-some-clients http://stackoverflow.com/questions/30063762/side-effects-fro... Given that, I had to do some hacky stuff upon every refresh. Instead of using destroy() on the canvas, I had to remove the Canvas DOM object itself, building it back up, and inserting it again. Because of this I am a bit skeptical about using ChartJS again, which is unfortunate because I do love their Charts. I feel like maybe SVG might be the better way to go for analytics.
- etimberg 11y agohey nirkalimi, I'm one of the maintainers of Chart.js. I know of a previous issue where the behaviour you described occurred on devices with window.devicePixelRatio greater than 1. Your JS fiddle didn't reproduce on my machine and it appears to use v1.0.1 which was the version that fixed the bug with devicePixelRatio. Calling destroy() on the chart object should be enough to reset the canvas to it's original state. If you'd like, file an issue on github and I can have a more detailed look.
- thom 11y agoDoes anyone have any recommendations for nice boxes-and-lines JS library? Drag-drop, constraints, force-directed layout, that sort of thing?
- bluesmoon 11y agoThere are D3 examples for all of these.
- hiamnew 11y agoIt would be great if you split into free of cost and free software, at least out-of-control vs self-hosted.
- probdist 11y agoI find it wildly perplexing that there are so many frameworks and libraries for javascript graphics and data visualization. Wikipedia has a comparison matrix of 37 different libraries. http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti... Here is a list describing briefly at least 50 libraries: http://techslides.com/50-javascript-charting-and-graphics-libraries http://techslides.com/50-javascript-charting-and-graphics-li...
- edem 11y agoYet they have so few dealing with graph data structures.
- slg 11y agoYeah, it is ridiculous. We need to develop one universal graphic and data visualization library that covers everyone's use cases.
- andrepd 11y agoI get the sarcasm, but do you really need 37 friggin libraries to cover everyone's use cases in the relatively small field of JS graphing libraries?
- pgwhalen 11y agoWhy do say it's a relatively small field? Outside of mobile, the desktop web is the front end target in all of computing these days, and JS is the only reasonable way to write for it.
- coldtea 11y agoSarcasm aside that would be great. And we already do that in other domains, e.g. NumPy covers most people Python number crunching use cases, Cocoa covers 95% of OS X people UI use cases, etc, MySQL and PostgreSQL cover 80% of the web app db use cases, Rails covers 90% of Ruby's webapp uses cases, Django and Flask do the same for Python, etc...
- edem 11y agoYou might want to rephrase it to "Graph drawing" because there is the graph data structure and I thought that this link was about graphs. It might be just me but I can imagine people getting confused by the title.
- jonsen 11y agoBe careful not to waste money on buying a graphing calculator then.
- thoman23 11y agoWait, what?
- ygra 11y agoAs someone who works in that field, to me "graph drawing" relates even more to drawing and arranging mathematical graphs of nodes and edges (called networks on that site); the conference on that is called Graph Drawing, too. It's also a frequent confusion of potential customers who ask us whether our library handles line and bar "graphs" ...
- distantsounds 11y agoAre any of these charting solutions being actively used in a cacti-like application? I feel like with how old the RRD technology is, something would have replaced it by now.
- deleted 11y ago[deleted]
- tylerpachal 11y agoCan you add a `None` filter in the Dependancies section? After a quick look it seems like there a few that would fall into this option.
- MayMuncher 11y agoI like that idea, thanks!
- Flenser 11y agonegative filters might be useful too. i.e. non-jQuery non-d3, or at least make selecting multiple dependencies show the union of both sets, rather than the empty intersection.
- rubiquity 11y agoThanks! It would also be nice if the license types of each library were included as well. Graphing libraries for the web can be surprisingly restrictive!
- MayMuncher 11y agoGood thinking, adding soon!
- zemanel 11y agoas someone that soon enough hopes to need evaluating graphing libraries for a side project (implement the types of charts cachegrind [and similar] provide) this post came at a great time.
- nsrivast 11y agoI came here to post exactly the same thing! Teaching a data viz course shortly and have to decide which library to use.
- andrepd 11y agoNothing beats the power and flexibility of GNUPLOT. Still going strong after almost 30 years, with excellent documentation and loads of support on the web, too.
- fiatjaf 11y agoOr, if you don't want to integrate any of them, http://chartspree.io/ http://chartspree.io/
- welder 11y agoGreat list! I personally use http://c3js.org http://c3js.org for all charts on https://wakatime.com/ https://wakatime.com/ because it's easy to use like highcharts, but comes with an open license. It's basically a wrapper around d3.js for all the common reusable charts, which makes it very easy to style and customize.
- welder 11y agoAlso, could you add "spline" chart type to the Graph Types filter? That chart type is one of the reasons I chose c3.js over others. http://c3js.org/samples/chart_spline.html http://c3js.org/samples/chart_spline.html
- rayshan 11y agoMissing Plottable.js by Palantir, a solid modular charting library based on d3: https://github.com/palantir/plottable https://github.com/palantir/plottable
- sergiotapia 11y agoAwesome site! I would love to see which ones are for Android, JS, of iOS. For example, I'm actually looking for a charting library for iOS but can't seem to filter for that. Here's another site I use to sort of see a lay-of-the-land view of charting libraries: http://stackshare.io/charting-libraries http://stackshare.io/charting-libraries
- thoman23 11y agoVery nicely done! I am just about to choose a charting library and this will be a great help. Have you considered adding some sort of user rating system? I find myself kind of just wanting to know which one is most popular or highest rated (i.e. take some of the work out of choosing between 30+ libraries myself).
- lalwanivikas 11y agoIMO rating would be a difficult thing to do as there are many factors[1] to consider. What best for one use case, might be the worst choice for another. A more qualitative comparison would be more useful: http://www.fusioncharts.com/javascript-charting-comparison/ http://www.fusioncharts.com/javascript-charting-comparison/ [1] http://davidwalsh.name/13-factors-choosing-javascript-charting-library http://davidwalsh.name/13-factors-choosing-javascript-charti...
- anc84 11y agoThe things that people would most likely vote on are not really relevant. "I successfully made a simple chart based on the examples with this library" -> 5/5. If you need more than the examples, most people will have different backgrounds and requirements. What library they can best use depends on that.
- lalwanivikas 11y agoYou'll find this article helpful if you are wondering what all factors to consider while choosing a JavaScript charting library: http://davidwalsh.name/13-factors-choosing-javascript-charting-library http://davidwalsh.name/13-factors-choosing-javascript-charti...
- nitrogen 11y agoIt would be fantastic if this comparison included average render times for graphs of various dimensions and number of data points, and/or maximum number of data points that can maintain a render time faster than 1/60s. Especially on Firefox for Linux, which doesn't have Direct2D available.
- castell 11y agoWhat are the advantages of SVG or Canvas in that use case? Which one (SVG, Canvas) is principle faster on current browser with thousands of data points?
- 1_player 11y agoCanvas is faster, as it basically is just a bitmap, while an SVG chart with a million points would correspond to at least a million DOM elements.
- castell 11y ago3 years ago, I benchmarks it with thousands of lines: SVG was faster than Canvas in Internet Explorer 10, probably due their extensive long history with their VML legacy rendering. But SVG was a lot slower in Chrome and Firefox than Canvas probably due graphic card accelerated Canvas implementation. SVG wasn't supported in Android 2.3.x. From my experience back then working directly with raw-SVG in HTML5 wasn't a great experience SVG is based on XML after all. Working with raw-Canvas meant implementing a basic render loop myself which refreshes the area and the Text related API is a bit complicated and slow.
- ygra 11y agoSVG performance in IE (since IE9) has really been and is stellar, indeed. Chrome caught up mostly by now and at least at work the difference between Chrome and IE for certain tasks is that Chrome spends more time rendering and IE spends more time JavaScripting. Firefox SVG performance has been disappointing, mostly and mobile browsers are often better off with canvas as well since performance is generally constrained there. SVG performance in IE doesn't date back to VML, though. They just made hardware-accelerated rendering a major feature of their browser back then, while no one else was doing it properly. Similar to how Chrome started with JITting JavaScript to make it fast and everyone else caught up on that afterwards.
- ygra 11y agoYou don't necessarily need a million DOM elements. Data points could mean points of a single plot, in which case you have a single path element with lots of points. Generally you can almost always bunch things together in a single path to reduce the number of DOM elements (with other tradeoffs, of course).
- rcarmo 11y agoNeat. I've been maintaining a list of my own here: http://taoofmac.com/space/infoviz http://taoofmac.com/space/infoviz (no fancy graphics, but a fair amount of notes)
- declnz 11y agoGreat work! Just what I needed (a while ago, but again soon I'm sure). There are so many options with JS graphing now, it can be a bit overwhelming just assessing the options and their capabilities.
- vengaishiva 11y agoIt's no doubt a great work, but I kind of like this qualitative comparison more: http://www.fusioncharts.com/javascript-charting-comparison/ http://www.fusioncharts.com/javascript-charting-comparison/
- m_mueller 11y agoVery nice work. How about a graph type "arrow diagram" as a subtype of "drawing"? One thing I'm missing a bit in the list is GraphViz style diagrams.
- ygra 11y agoThose are usually called "graphs" ;-) They are listed under "network" (of course there are lots of types or styles here, too).
- kzuberi 11y agoIf you are interested in network visualization you might consider Cytoscape.js. It's being used e.g. in bioinformatics (visualizing networks of interacting genes, interactively inspecting & manipulating their layout etc). Open-source license, and seems to be becoming quite featureful: http://js.cytoscape.org/ http://js.cytoscape.org/
- FanaHOVA 11y agoI was just about to start looking for a graphing library for a dashboard I'm building, thank you!
- mtmacdonald 11y agoPeek - http://mtmacdonald.github.io/peek/index.html http://mtmacdonald.github.io/peek/index.html is also based on D3.
- vengaishiva 11y agoNon-developers on HN might find tools mentioned in this article useful: http://thenextweb.com/dd/2015/04/21/the-14-best-data-visualization-tools/ http://thenextweb.com/dd/2015/04/21/the-14-best-data-visuali...