Highcharts - Interactive JavaScript charts for your webpage. Visualization .js Lib. There are plenty of JavaScript libraries out there for rendering your otherwise plain and boring numerical data into beautiful, interactive, and informative visualizations. The beauty of using JavaScript for data visualization is that, if created correctly, your data will be highly accessible (usually via HTML tables). A long time ago (2008), I wrote about JavaScript solutions for graphing and charting data and this article revisits the topic with twenty more JavaScript libraries that you can use to bring your data to life. 1. Highcharts Highcharts is one of the most promising JavaScript charting libraries to hit the scene recently, with its large array of features including seven charting types (line, pie, and bar among them), the ability to zoom in and out of charts, and tooltips for offering more information about data points.
The library has many options for customization and they’re well documented on one page for easy referencing. 2. gRaphaël 3. 4. jQuery Visualize Plugin 5. moochart. Raw. Graphaeljs.com.
JSXGraph | Dynamic Mathematics with JavaScript. Sparklines. News 15 June 2013 - Version 2.1.2 Relased This release adds support for jQuery 1.10.0 and other bug fixes and minor improvements. See the full changelog for details of all changes. 26 January 2013 - Version 2.1.1 Relased This release adds support for jQuery 1.9.0 along with a couple of other bug fixes. If you're using a version of jQuery later than 1.8, be extra sure you're not rendering your page in quirks mode to avoid breaking tooltips for IE users.
See the full changelog for details of all changes. 15 October 2012 - Version 2.1 Released This release is primarily a bug-fix release, but also adds support for Internet Explorer 10. See the full changelog for details of all changes. 29 April 2012 - Version 2.0 Released This release represents a significant code update. Customizable mouseover tooltips and interaction including highlighting of moused-over values.
It should be fully backwards compatible with the 1.x versions with the following exceptions: There's a few non-code updates as well: eg. Protovis. Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)!
Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis; for more details, please read the introduction and browse the examples. Updates May 28, 2010 - ZOMG!
Getting Started. Peity • progressive <canvas> pie charts. Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.2.1 Uncompressed 8.7Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/benpickles/peity Pie Charts Call peity("pie") on a jQuery selection.
You can also pass delimiter, fill, height, radius and width options. <span class="pie">1/5</span><span class="pie">226/360</span><span class="pie">0.52/1.561</span><span class="pie">1,4</span><span class="pie">226,134</span><span class="pie">0.52,1.041</span><span class="pie">1,2,3,2,2</span> JavaScript $("span.pie").peity("pie") Donut Charts Donut charts are the same as pie charts and take the same options with an added innerRadius option which defaults to half the radius. $('.donut').peity('donut') Line Charts $(".line").peity("line") Events. Cytoscape.js. This is how easy it is to get started with Cytoscape.js (this code creates the instance you see on the bottom-right: About Cytoscape.js is an open-source graph theory library written in JavaScript.
You can use Cytoscape.js for graph analysis and visualisation. Cytoscape.js allows you to easily display and manipulate rich, interactive graphs. Because Cytoscape.js allows the user to interact with the graph and the library allows the client to hook into user events, Cytoscape.js is easily integrated into your webapp, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad. Cytoscape.js includes all the gestures you would expect out-of-the-box, including pinch-to-zoom, box selection, panning, et cetera. Cytoscape.js also has graph analysis in mind: The library contains a slew of useful functions in graph theory. Cytoscape.js is an open-source project, and anyone is free to contribute.
Cytoscape.js & Cytoscape Funding Architecture & API Data. Two.js. Arbor.js. Js-mindmap. Envision - demos. Flot: Attractive JavaScript plotting for jQuery. Datavisualization.ch Selected Tools. The JIT. JsPlumb 1.3.16 demo - jQuery. Raphael. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. gRaphaël gRaphaël’s goal is to help you create stunning charts on your website. How to use Raphaël.js var paper = Raphael(10, 10, 640, 480); var paper = Raphael("canvas", 640, 480); // Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10);// Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); Notice that the create method was called from the previously initialized canvas.
How to use gRaphaël.js In this example we first initialize the "paper" with the placeholder.