This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. Each graph type has numerous API options to customize it’s look and behavior. Some highlights: pop-up hovers, meanlines and watermarks. Minified, Grafico is about 30kb and available under the MIT license.

Requirements: Raphaël and Prototype.js
Demo: http://kilianvalkhof.com/2010/design/grafico-javascript-charting-library/
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Another significant feature of the dygraphs library is the ability to display error bars around data series. dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client’s browser.

Requirements: JavaScript Enabled
Demo: http://www.danvk.org/dygraphs/
License: License Free

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

It works in all modern browsers including the iPhone and Internet Explorer from version 6. Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.

On hovering the chart, Highcharts JS can display a tooltip text with information on each point and series. By zooming in on a chart you can examine an especially interesting part of the data more closely. Zooming can be in the X or Y dimension, or both. Highcharts is licensed under a Creative Commons Attribution-NonCommercial 3.0 License.

Requirements: Javascript Enabled
Demo: http://www.highcharts.com/demo
License: Creative Commons License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Now they have rewritten and extended the code behind the technique and packaged it up as a new jQuery plugin called “Visualize“, which you can download. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Requirements: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9
Demo: http://www.filamentgroup.com/examples/charting_v2/index_2.php
License: MIT, GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations. Axiis was designed to be a granular framework, allowing developers to mix and match components and build complex output by compositing together basic building blocks.

Axiis is an open source project, under an MIT license. This means you can use it for personal projects, commercial work, and pretty much anything you can think of with no restrictions.

Requirements: Degrafa Graphics Framework & Adobe Flex 3
Demo: http://www.axiis.org/examples.html
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

To facilitate this, Protovis supports panels and inheritance. A panel is a container for marks; the contained marks are replicated for each data point on the panel. You can vary the panel position to create small multiple displays, or you can overlay panels. Inheritance lets you derive new marks from existing ones, while sharing some or all of the same properties. This is the same principle as cascading in CSS, or prototypal inheritance in JavaScript.

Please note: Protovis is in its early stages of development. At the moment, they only support Firefox 3, but they plan on adding support for Chrome and Safari 4.

Requirements: Firefox 3
Demo: http://vis.stanford.edu/protovis/ex/
License: BSD License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

Lovely Charts is an online diagramming application, that allows you to create professional looking diagrams of all kinds, such as flowcharts, sitemaps, organisation charts, wireframes, and many more… for free.

With Lovely Charts’s extremely simple and intuitive drag’n drop drawing mechanism, you’ll be able to focus on what really matters. You won’t have to draw boxes and arrows, you won’t have to worry about what symbol to use.

Source: Lovely Charts

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs. It’s compatible with most web browsers. And it is It’s free to use and watermark-free.

Requirements: Firefox 1.5 +, IE 6, Safari 3.1 +, Opera 9 +
Demo: http://www.jscharts.com/examples
License: Creative Commons 3.0 License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

When the number of points about to be plotted exceeds a certain heuristic, Chronoscope falls back to a lower resolution representation of the dataset, which can be provided by the user, or automatically calculated by various filtering algorithms. This is similar to mip-mapping techniques commonly used in 3D graphics to reduce bandwidth and decrease aliasing. It also gives non-programmers intuitive controls over almost every aspect of the look of a visualization.

Requirements: Google Web Toolkit
Demo: http://timepedia.org/chronoscope/
License: LGPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

What we need is something in between—markup that’s appropriate for navigation, but with some extra hooks for semantics and structure.

A List Apart has published an article of “Accessible Data Visualization with Web Standards“, shared three basic techniques for incorporating some simple data visualization into standards-based navigation patterns. All of them start with the building block of HTML navigation: an unordered list of links.

You should also look at Sparkline PHP Graphing Library. It provides a wide range of options how your graphs are rendered. It’s important that sparklines are visually appealing, especially in the restricted visual environment of the web. Web sparklines should approach as closely as possible the aesthetic of printed sparklines. Sparkline is completely free to use on your personal website, company home page, or to include in your commercial product. Sparkline is distributed under the BSD license.

A List Apart Article: Accessible Data Visualization with Web Standards
A List Apart Demo: http://alistapart.com/d/accessibledata/example-final.html
Sparkline PHP Graphing Library: http://sparkline.org/
License: BSD License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images