Show HN: JavaScript Graphing Library Comparison | Hacker News Reader

Show HN: JavaScript Graphing Library Comparison

jsgraphs.com

328 pointsMayMuncher114 comments

This should really include http://ecomfe.github.io/echarts/index-en.html

Baidu huh. Those plots looks really slick. IE6+ support is quite the accomplishment.

I agree with you. But why do you think IE6+ support is an accomplishment? Both FusionCharts and HighCharts also support IE 6+

RaphaelJS also supports IE6+

I 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/

constantly 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.

Thanks! I'll be adding that shortly!

What's the license? Is it closed source or under an free open software license? https://github.com/ecomfe/echarts ?

I 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 !

Same. 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).

HighCharts is great, but it is prohibitively expensive for a startup to use in their product.

How 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.

It'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."

Most tech startups probably aren't going to meet that definition. It looks like a 1-developer license for a typical SaaS offering is going to run you $390. Five developers is $1500.

Highcharts is beautiful but it's quite expensive for a startup in my country (VN). While the budget for a nascent webapp is around $1000. I choose Flot as the replacement. It's flexible and nice enough with responsive layout, compound charts, clearly script.

I used flot too, as a replacement for Highcharts.

The only downside I dislike about flot is that it depends on JQuery. As I otherwise don't rely on JQuery at all, it means another ~80kb of additional JS code. Beside that, flot seem to be a very good free alternative.

I started out with flot after noticing the high cost of Highcharts. But now have been switching out flot with dimple.js and d3.js. The charts are much better with dimple/d3.

Interesting. I considered graph libs based on-top of D3. But D3 is equally big in JS file size to JQuery. And SVG wasn't supported in older Android (2.3) and slower in Firefox and Chrome 3 years ago. So flot with its Canvas rendering "won" in the end.

I tend to always go with FusionCharts[1]. And AFAIK, it offers way more charts and maps than any other library out there. 90+ chart types and 965 maps last time I checked.

It's extremely customisable and has tons of readymade fiddles[2] and business dashboards[3] for inspiration(ready copy). I recently used full code of one of their dashboards for my project. I've never failed to convert my designer's or PM's concept into exact same working code with FusionCharts. Highly recommended.

[1] http://www.fusioncharts.com/

[2] http://www.fusioncharts.com/javascript-chart-fiddles/

[3] http://www.fusioncharts.com/dashboards/

I think 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.

Thanks! Adding soon

I 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.

It 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 2 - https://github.com/novus/nvd3/releases/tag/v1.7.1 3 - https://github.com/novus/nvd3/issues/1033

I 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_charti...

Here is a list describing briefly at least 50 libraries: http://techslides.com/50-javascript-charting-and-graphics-li...

Yet they have so few dealing with graph data structures.

Yeah, it is ridiculous. We need to develop one universal graphic and data visualization library that covers everyone's use cases.

I 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?

Why 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.

Sarcasm 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...

> We need to develop one universal graphic and data visualization library

<xkcd>There are now 38 different libraries</xkcd>

Palantir tried to solve this with Plottable. See their presentation from JsConf 2014 about this http://2014.jsconf.eu/speakers/dan-mane-why-are-there-so-man...

Missing Plottable.js by Palantir, a solid modular charting library based on d3: https://github.com/palantir/plottable

Good stuff! What about D3?

http://d3js.org/

I would consider D3 not to be a graph making library, but more a Data Frame & Document Object Model data binding library with a collection of stats functions.

Yeah. I consider D3 a good starting point to build a charting library on top of.

Great list! I personally use http://c3js.org for all charts on 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.

Also, 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

FusionCharts 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/

+1 Here are some business dashboards examples from FusionCharts:

http://www.fusioncharts.com/dashboards/

I see none of them have the option "Large Data Set", I would think dc.js supports that with it's crossfilter support.

Give http://ecomfe.github.io/echarts/index-en.html a try. Sounds capable of more data than DC.

Actually it seems their selector is bugged. If you hover over them individually, two of them are tagged with "Large Data Set"

Sigma and Dygraphs

The 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.

This. 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.

You 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.

Be careful not to waste money on buying a graphing calculator then.

Wait, what?

As 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" ...

Seems to be missing http://metricsgraphicsjs.org/

Can 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.

I like that idea, thanks!

negative 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.

Interestingly 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-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.

hey 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.

Very 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).

IMO 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/

[1] http://davidwalsh.name/13-factors-choosing-javascript-charti...

The 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.

Non-developers on HN might find tools mentioned in this article useful:

http://thenextweb.com/dd/2015/04/21/the-14-best-data-visuali...

Neat. I've been maintaining a list of my own here: http://taoofmac.com/space/infoviz (no fancy graphics, but a fair amount of notes)

I'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.

Shameless plug: you may want to have a look at my library 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

no shame, it could really help, thanks :)

Hey, shameless plug but in case you need react integration maybe have a look at my project. 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!

Peek - http://mtmacdonald.github.io/peek/index.html is also based on D3.

Awesome 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://dimplejs.org/ is another D3 based charting library.

I'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.?

If 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.

Yeah, 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.

- 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 - 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.

You'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-charti...

It 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.

It would be great if you split into free of cost and free software, at least out-of-control vs self-hosted.

While 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

I don't have a lot of experience with it, but Bret Victor's http://worrydream.com/Tangle/ come to mind. Hope it helps!

If you want to create class material, have a look at 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)

Check out jsxgraph: 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/

Thank you everyone. I'll check the suggested options.

This 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?

Great 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.

It's no doubt a great work, but I kind of like this qualitative comparison more:

http://www.fusioncharts.com/javascript-charting-comparison/

Very 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.

Those are usually called "graphs" ;-) They are listed under "network" (of course there are lots of types or styles here, too).

If 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/

Are 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.

Nothing 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.

Or, if you don't want to integrate any of them, http://chartspree.io/

What 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?

Canvas 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.

3 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.

SVG 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.

You 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).

    Canvas
      * Bitmapped graphics
      * Immediate mode
      + Fast for simple things
      + Minimal drawing overhead
      - Interactivity has to be handled manually (e.g. by checking whether click coordinates coincide with a drawn button)
      - Animating things (usually) mean redrawing most of the canvas for every frame
      + Ability to manipulate pixels if needed
      * Everything is drawn manually

    SVG
      * Vector graphics
      * Retained mode
      + Fast for simple things
      - Everything that needs to be drawn has to exist in the DOM
      + Interactivity can be handled via events by the browser on every element if needed
      + Animating things (usually) just mean to manipulate that thing in the DOM
      - Limited ways of arbitrarily manipulating the composed result
      * Everything is drawn by the browser
      + CSS support
      + Sophisticated text rendering support

It's mostly a trade-off of what you want to do. The things marked with * above are not clear benefits or drawbacks.

For a chart that consists of axes, ticks, a plot and maybe a few other things I'd always go for SVG unless compatibility constraints force me to go to bitmap graphics. It just maps much better to vectors than to pixels, but there are limits, of course. Heatmaps often are better drawn via canvas, especially those where there are no discrete shapes but rather blurry blobs of colour.

Performance is a difficult topic and hard to compare, beyond simple things: In canvas (mostly) your only option of optimisation is to draw less, i.e. touch fewer pixels; with SVG being rendered and composited by the browser it often boils down to »don't move elements that don't have to move« to enable the browser to render less and not throw away every partially composited texture. In IE and Chrome SVG has quite great performance, in Firefox you have to be careful what you do. Uusally it scales well to a few hundred or thousand DOM elements, though, depending on what you do.

Thanks! 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!

Good thinking, adding soon!

What would be the most lightweight library if I only need a line graph compatible with most desktop and mobile browsers without any dependencies?

I would say d3.js (http://d3js.org/).

Write it yourself with the HTML5 canvas?

That's also the easiest way to get good performance for realtime, high-volume graphing.

Dygraphs (http://dygraphs.com/) has treated me well in the past. No dependencies, tiny library, handles millions of points, and it's html5 canvas based.

Does anyone have any recommendations for nice boxes-and-lines JS library? Drag-drop, constraints, force-directed layout, that sort of thing?

There are D3 examples for all of these.

It would be great if it was specified whether each library works offline for comparison. For example, Google Charts don't work offline.

31 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.

Humans 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.

Completely 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.

Our 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 .

I was just about to start looking for a graphing library for a dashboard I'm building, thank you!

Great stuff! Would be great if similar comparison existed for data grids (tables).

Here you go: http://www.fusioncharts.com/javascript-charting-comparison/

as 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.

I came here to post exactly the same thing! Teaching a data viz course shortly and have to decide which library to use.

Sure wish there were some performance comparisons

you've got a typo in the title for one of them :)

XChats -> XCharts

Reply on news.ycombinator.com