50 JavaScript Libraries for Charts and Graphs | TechSlides
How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?
I have been a long time fan of jqPlot for its open source approach, simplicity,examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery. Recently, however, D3 has really caught my eye. It uses JavaScript, HTML, SVG and CSS to really bring data to life. It is also open sourced, does not depend on jQuery, has a ton of examples, and there are even some good charting libraries based on D3. The other big player is HighCharts, also written in pure JavaScript with all demos that you can view and edit in JSFiddle and it also has some powerful features. Beyond these three, there are many more useful JavaScript charting libraries worth considering. Here is a list of the top 50 JS libraries for making charts and graphs:
FusionCharts – they call themselves an enterprise-grade JavaScript charting component and with good reason I suppose. They are probably the best-looking of the lot and have 90 chart types that work across devices and browsers (including IE 6, 7 and 8 for which they use VML). They have a ton of business dashboard examples,extensive documentation and some good articles on charting best practices. They also have a jQuery plugin. FusionCharts started a decade back (they even have a book on their startup journey) and claim to have 21,000 customers (LinkedIn, World Bank, White House, Oracle etc).
D3 – is really amazing and I love it’s simplicity. The documentation is really extensive, the source code is hosted on GitHub, and the examples are never-ending. There is aD3 prototyping tool called Tributary with many great examples. It’s so good that xcharts, nvd3, Rickshaw, Cubism.js, dc.js, and xkcd are all based on D3. If you are making some amazing custom data visualizations, D3 should probably be your choice, otherwise these d3-based libraries mentioned above are great for more simple straightforward graphs. Finally, I highly recommend looking at Scott Murray free book on D3 called Interactive Data Visualization for the Web and Dashing D3 tutorials.
HighCharts – very powerful, I love the JSFiddle examples and powerful features. I don’t like the license fee but they have great customers (IBM, NASA, MasterCard, etc). They also have backward compatibility with IE8.
jqPlot – if you are already using jQuery, you don’t want to pay for HighCharts, and D3 is too much for your simple use cases, then jqPlot is an excellent choice.
dygraphs – open source JavaScript library that produces interactive, zoomable charts of time series. It is really excellent for large data sets.
Protovis – free and open-source created by the same team that is now working on D3. If you are interested in comparing D3 to Protovis, check out this stackoveflow page.
Flot Charts – similar to jqPlot, Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. If you are interested in comparing Flot to jqPlot, this thread has some good information.
Google Chart Tools – powerful, free, simple to use, and it has everything from simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types.
dc.js – a javascript charting library based on D3 with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset.
xcharts – a D3-based library for building custom charts and graphs.
nvd3 – allows you to build re-usable charts and chart components without taking away the power that d3.js gives you.
rickshaw – JavaScript toolkit for creating interactive time series graphs.
Cubism.js – a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.
xkcd – allows you to make XKCD-style plots in Javascript using D3. Check outxkcdgraphs to make your own xkcd graphs.
jQuery Sparklines – a jQuery plugin that creates small inline charts directly in the browser.
peity – a simple jQuery plugin that converts an element’s content into a simple CANVAS mini pie, line or bar chart.
BonsaiJS – lightweight graphics library with an intuitive graphics API and an SVG renderer.
Flotr – a Javascript plotting library for Prototype.js. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, css styling support, text included into the canvas, rotated labels, color gradients, graph title and subtitle, spreadsheet, CSV data download and much more.
ProtoChart – As the name suggests, ProtoChart allows you to create beautiful charts using Javascript and Prototype. It is open sourced, uses Canvas, and was highly motivated by Flot, Flotr and PlotKit libraries.
Flotr2 – a recent project by HumbleSoftware that lets you make graphs and charts with Canvas and JavaScript. HumbleSoftware also came out with envisionjs which uses flotr2 and allows you to make dynamic HTML5 visualizations.
jQuery-Visualize – HTML5 canvas charts driven by HTML table elements. Another charting plugin for jQuery.
JS Charts – a JavaScript based chart generator that requires little or no coding. The free version has a watermark which can be removed by paying for a license.
PlotKit – a chart and graph plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is a complete rewrite of CanvasGraph.
MilkChart – a compact JavaScript framework for creating graphs based on MooTools. It is simple and easy to understand.
moochart – is another plugin for MooTools and it focuses on drawing bubble diagrams on the canvas tag.
moowheel – a JavaScript connections visualization library based on MooTools.
table2chart – a MooTools plugin that generates charts from accessible data tables.
Canvas 3D Graph – a special type of bar graph that plot numbers in 3D.
TufteGraph – another JavaScript charting library based on jQuery. It has a really compact API and non-core layout is done via CSS.
ArborJS – a graph visualization library using web workers and jQuery.
TimePlot – focused entirely on graphing time-series data, with support for annotating the graph with temporal events.
gRaphael – create stunning charts on your website, based on Raphael graphics library.
ICO – another JavaScript graph library based on Raphael.
Elycharts – a pure javascript charting library, easy to use and completely customizable. It is based on jQuery and Raphaël libraries.
ZingChart – allows you to build advanced charts and visualizations in HTML5, SVG, VML and Flash.
RGraph – produces interactive charts using the HTML5 canvas tag.
Dojo Charting – if you are already using Dojo, then Dojo’s charting library is a great solution for making charts and graphs.
Bluff – Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies.
canvasXpress – a javascript library based on the Canvas tag implemented in HTML5.
ccchart – a Simple JavaScript chart that does not depend on libraries such as jQuery.
JIT – JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
JSXGraph – a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.
Smoothie Charts – a JavaScript Charting Library for Streaming Data.
YUI Charts – YUI module that provides a JavaScript API for visualizing data in a variety of formats leveraging SVG, HTML Canvas and VML to render its graphical elements.
amcharts – JavaScript/HTML5 charts including serial (column, bar, line, area, step line, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar and xy/scatter/bubble charts.
Emprise JavaScript Charts – pure JavaScript charts with great features and good cross browser support.
JavaScript Diagram Builder – a library of some objects and functions, which can help you to display a chart or graph in an easy way.
jGraph – HTML5 diagramming component with full IE 6-8 and touch device support.
Sencha Touch Charts – it uses HTML5 Canvas and CSS3 to deliver charts to the mobile web browsers.
Style Chart – a free Ajax Visualization Charting Service
If you are looking for more libraries and web services that deal with visualizing data, I recommend checking out Datavisualization.ch.
Have I missed any good JavaScript charting libraries?
Update:
AwesomeChartJS – great looking charts with JavaScript and the canvas element
Sigma.js – an open-source lightweight JavaScript library to make network visualizations using the HTML canvas element.
Graphene – a realtime dashboard & graphing toolkit based on D3 and Backbone.
jQuery ToastChart – a line-graph charting library that is designed to show all types of data using the HTML5 canvas element.
ChartsJS – Easy, object oriented client side graphs for designers and developers.
Cytoscape.js – open-source JavaScript graph library for analysis and visualization.
Ember Timetree – visualize hierarchical timeline data with Ember.js and D3.js.
Simplify.js – tiny high-performance JavaScript 2D/3D polyline simplification library (extracted from Leaflet)
DataMaps – Maps for interactive data visualizations in Javascript (with d3js)
Aristochart – simple and sophisticated static 2D line charts.
Morris.js – time-series line graphs with jQuery and Raphael.js
Grafico – a javascript charting library based on Raphaël and Prototype.js
jQuery orgChart – a small JQuery plugin that generates a hierarchical orginisational chart from a nested unordered list.
TimeChart – powerful and simple to use chart library for creating time based charts in pure HTML5-JavaScript.
JointJS – open source JavaScript library for creating diagrams.
sDashboard – simple & light weight dashboard framework in javascript
jQuery Spidergraph – an interactive HTML5 spider graph module for jQuery.
sheetsee.js – visualize data from a Google spreadsheet.
Chartbuilder – D3.js based front-end charting application that facilitates easy creation of simple beautiful charts
How To Display Hibernate Sql Parameter Values – Log4j
Change the Log level
Modify the Log4j properties file, and change the log level to “debug” or “trace” in “log4j.logger.org.hibernate.type” property.
File : log4j.properties
# Direct log messages to stdout log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target=System.out log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n # Root logger option log4j.rootLogger=INFO, stdout # Hibernate logging options (INFO only shows startup messages) log4j.logger.org.hibernate=INFO # Log JDBC bind parameter runtime arguments log4j.logger.org.hibernate.type=trace
在 xfire中使用 GZip来 压缩 传输量 - secyaher的日志 - 网易博客
在XFire1.2以后支持SOAP消息的GZip压缩传输，在合适的地方启动GZip压缩可以减少网络传输的数据量，加快速度。
在XFire中启动GZip压缩要用到一个开源的Filter：PJL Compressing Filter。这个Filter的最新版本是1.6.4，自1.5.0开始该工程开始构建于JDK5.0，因此在JDK1.4环境下只能使用1.4.6（这个版本会与高版本同步更新）。[http://sourceforge.net/projects/pjl-comp-filter/]
一、服务端启动GZip：在服务端启动GZip只需将PJL Compressing Filter下的jar包（用到的）导入到web的/WEB-INF/lib目录下。并在web.xml文件中增加如下配置：
|
<filter> <filter-name>CompressingFilter</filter-name> <filter-class> com.planetj.servlet.filter.compression.CompressingFilter </filter-class> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>statsEnabled</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CompressingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> |
代码清单7-1：服务端加入GZip时web.xml中增加的配置
注：根据web.xml文法定义，这个定义必须位于servlet定义之前。
二、客户端启用GZip：客户端启动GZip只要将客户端的GZip的属性设为true却可。代码如下：
|
String serviceURL = "http://192.168.0.225/ldaxfire/services/LDAService";
// 创建service对象 Service serviceModel = new ObjectServiceFactory().create( ServiceInterface.class, null, "http://test.yicha.cn/adreport", null);
XFireProxyFactory serviceFactory = new XFireProxyFactory();
// 获取服务对象 ServiceInterface service = (ServiceInterface) serviceFactory.create( serviceModel, serviceURL);
// 获取客户端代理 Client client = ((XFireProxy) Proxy.getInvocationHandler(service)) .getClient();
// 启动response压缩 client.setProperty(CommonsHttpMessageSender. GZIP_RESPONSE_ENABLED, Boolean.TRUE);
// 启动request压缩 client.setProperty(CommonsHttpMessageSender. GZIP_RESPONSE_ENABLED,Boolean.TRUE);
// 同时启动response和request压缩 client.setProperty(CommonsHttpMessageSender.GZIP_ENABLED, Boolean.TRUE);
// 忽略超时 client.setProperty(CommonsHttpMessageSender.HTTP_TIMEOUT, "0");
// 调用服务 data = service.serviceMethod(); |
代码清单7-2：客户端调用的修改
注：在同时启用时，不必再分别启用response和request的GZip压缩。
注意，当服务端没有启用GZip，客户端启用请求GZip压缩时，会产生SOAP解析错误，如果服务端启动了GZip压缩功能，客户端是否启用GZip都没有影响。