/ best free open source web resources /


Grafico – Charting Library Built with Raphaël and Prototype

Posted · Category: Charts, MIT License

Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information.

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

Produce Interactive Charts of Time Series with dygraphs

Posted · Category: Charts, License Free

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. You can mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.

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

New Interactive Charting Library in Pure Javascript

Posted · Category: CC License, Charts

Highcharts JS is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts JS currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

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

Create Charts & Graphs from Tables using HTML 5 Canvas

Posted · Category: Charts, GPL License, MIT License

Filament Group wrote an article describing how to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The technique is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.

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.

jQuery Visualize Plugin

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

Axiis – Open Source Data Visualization Framework

Posted · Category: Charts, MIT License

Axiis is an open source data visualization framework designed for beginner and expert developers alike. Axiis gives developers the ability to expressively define their data visualizations through concise and intuitive markup.

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 Charts

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

Protovis – Visualization Toolkit for Javascript using Canvas

Posted · Category: BSD License, Charts

Protovis is a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations.

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

Lovely Charts – Free Online Diagramming Application

Posted · Category: Charts

Diagrams are great, because they are a very simple and extremely efficient way to intelligibly represent even the most complex ideas. But drawing diagrams can also be very complicated, simply because most diagramming softwares require you to draw.

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.

Free Online Diagramming Application

Source: Lovely Charts

JS Charts – Free Javascript Chart Generator

Posted · Category: CC License, Charts

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

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.

JS Charts - Free Javascript Based Chart Generator

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

Chronoscope – Open Source Charting Platform for GWT

Posted · Category: Charts, LGPL License

Chronoscope is an open source release of a charting and visualization platform for GWT, used as the centerpiece of Timepedia’s website. Chronoscope provides a high performance, cross browser platform for visualizing possibly large and complex datasets. It supports interactive framerates on datasets with tens of thousands of points by using multiresolution representation and incremental streaming.

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.

Timepedia Chronoscope

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

Sparklines and Accessible Data Visualization

Posted · Category: BSD License, Charts

What if we want to include data visualization as an integral part of the site, not just an isolated figure or an interactive chart? When we’re designing interfaces for browsing data-driven sites, it’s valuable to be able to create navigation elements that are also visualization tools. We can keep the user informed as they explore, so they can make better decisions about what they’re looking at and what they’re clicking on.

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.

Sparkline PHP Graphing Library

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

Page 5 of 7«1234567»
Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons