jQuery Sparklines is a plugin for creating sparklines on the fly.

What is a sparkline:

They are data-intense, design-simple, word-sized graphics that are commonly used in market, stock activity and can be implemented anywhere (via Wikipedia).

This plugin supports:

• Line graphs
• Bar charts
• And, tristate charts

jQuery Sparklines plugin can be used to create graphs from data inside the HTML or via JavaScript. Almost every variable of it can be customized including colors, size & chart type.

Progress bars are a great way visualizing events that may take some time like uploads, form submissions & more.

This is a MooTools animated progress bar which is highly customizable and easy to implement.

You can define the "start percentage" and "speed" of the progress bar besides other variables.

Usage is this easy:

pb = new dwProgressBar({ 
    container: $('put-bar-here'), 
    startPercentage: 25, 
    speed:1000, 
    boxID: 'box', 
    percentageID: 'perc' 
});

and you can set the progress bar to a new percentage with a simple command like: pb.set(55); .

To see a demo of this MooTools progress bar, click here.

Update (05.08.2008): There is now a new version which supports stepping & events.

pChart is an open source PHP chart library for creating aliased charts.

This chart classes run on any webserver that has PHP & GD library support.

Chart types currently support by this PHP charts solution are:

• Line chart
• Cubic curve chart
• Plot chart
• Bar chart
• Filled line chart
• Filled cubic curve chart
• Pie chart
• Radars chart
• Limits chart

For faster display of charts, pChart has a caching class named pCache which serves a chart from cache if it was rendered before with the same data.

This project is still in development (for ex: pie charts are in beta) but updated frequently and, even now, looks very functional.

PHP classes are well documented and they can be tested in a live test area.

In general, gauges are built with Flash as they require an animation.

Rather than Flash gauges, this is a pure JavaScript & canvas gauge.

How it works?

The code sets a starting and an end value. Using the HTML Canvas element, it draws the needle and simply rotates it according to the current data. For more information about Canvas element, check this WRD post.

As Internet Explorer does not support Canvas element natively, this Canvas gauge uses IECanvas for that.

Working demo can be found here.

Tip:

There is also a dynamic Flash gauge at the same page.

fgCharting is a jQuery plugin which helps us to create accessible charts from standard table data with canvas.

Using this chart plugin, we can create several types of graphs, such as pie, line, area, and bar.

As canvas is not supported by default in Intenet Explorer, you can use ExplorerCanvas to add this functionality to it (WRD post for more details).

Visifire is a set of open source Microsoft Silverlight chart components.

Visifire lets you create stunning charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML in minutes.

In order to use this great Silverlight chart library, you don’t need to know anything about Silverlight. Simple HTML knowledge is enough.

To see how beautiful the results are, check the Chart Gallery or Chart Designer.

MooWheel is a mootools based script which visualizes data and connections between items like a wheel.

MooWheel uses CanvasText and ExCanvas libraries other than mootools which are already included in the package.

Usage of this data visualization script is pretty simple. You simply create a data array, add a canvas tag and call the function.

There is a very nice demo here.

CSS Globe has a chic animated progress bar built with CSS and an animated GIF file.

It is simply an EM tag above an animated GIF file which is blocking the part of the GIF file to creating the progress bar stop effect.

As this progress bar is only a visual trick, it can not show a "live" progress but only a static one which the percentage of progress to be shown was defined before the page is loaded.

Smoot is a tool, developed with xajax and Pear::DB for creating diagrams of icons and links between them.

Features include Google Maps and Google Earth integration, configurable tool palettes, and automated palette generation from a Google local query.

Smoot builds relations between objects with mouse clicks and the result can be stored easily. This nice tool can be a starting or an inspiration point for many projects like "online heritage services", "online diagram services" and much more.

Open Flash Chart is a free flash chart library which flash charts can be generated via data from php, perl, python, java, asp, asp.net (any dynamic languge) or a text file.

Using Open Flash Chart is as simple as pointing the data to this free flash chart object. To make it simpler, there are ready to use PHP, Perl, Python, Java classes.

Charts supported by Open Flash Chart:

• Data Lines Chart
• Bar Chart
• 3D Bar Chart
• Glass Bar Chart
• Fade Bar Chart
• Sketch Bars Chart
• Area Chart
• Bars + Lines Chart
• Pie Chart
• Scatter Chart
• Candle Chart