Most of us are familiar with the beautiful interface of Yahoo Pipes, how objects are wired to each other.

There is an open source JavaScript library, which enables you to create a such visuality, named WireIt.

The library is very suitable for creating dataflow applications (like a family tree) or visual programming languages.

WireIt is very well-documented & has some attractive examples.

It uses the YUI library for DOM and events manipulation, and excanvas for IE support of the canvas tag.

EasyDiagram.NET is an open source ASP.NET diagram control.

Using AJAX, EasyDiagram.NET is very fast yet simple enough even for the beginners.

Some features of this free ASP.NET diagram control:

• Drag’n drop support
• Direct-draw and orthogonal modes
• Easy node adding
• Customizable lines & nodes
• Ability to react node clicks (via Ajax)

EasyDiagram.NET is definitely an amazing & professional-level control that is a must-have for every ASP.NET developer.

Stacked bar graphs are very helpful when presenting a comparison of data.

This is a stacked bar graph built with CSS (& based on Pure CSS Data Chart).

It uses "definition lists" in the HTML for presenting the data & "unordered lists" for the labels on axes.

Source files can be downloaded from the author’s website & a demo can be found here.

Open Flash Gauges is a set of open source Flash files, supported with serverside connectors (ASP & PHP), to display any numeric data as gauges.

Gauges in the set are:

• Percentage
• Thermometer
• Dual
• Resource Meter
• Meter
• Status
• I/O
• Digital readout

Demos can be found here.

There is also a pure JavaScript-Canvas gauge that uses MooTools & JSON as the data + a Flash gauge again uses MooTools & JSON presented in the website..

FusionCharts Free is a charting component for creating good looking, data-driven & free animated flash charts.

It can be used with PHP, Python, Ruby on Rails, ASP, ASP.NET, JSP, ColdFusion, simple HTML pages or even PowerPoint Presentations.

The component is the free version of FusionCharts & missing some features when compared with the paid one. But it is still powerful & supports:

• 2D / 3D column & bar charts
• 2D/3D pie & doughnut charts
• Line charts
• Area charts
• Stacked charts
• Gantt charts & more..

Another nice feature is the ability to combine different chart types in one chart.

Creating charts via Google Charts API is already simple.

GoogChart is a PHP class which makes it easier & more flexible.

Here is an example:

After creating an array ($data in the example), this simple code is enough for generating a pie chart.

<?php
$chart = new googChart();
$chart->setChartAttrs( array(
    ‘type’ => ‘pie’,
    ‘data’ => $data,
    ‘size’ => array( 300, 200 )
    ));
echo $chart;
?>

Although GoogChart supports a serious amount of attributes & types for Google Charts API, currently, not all of them.

There are also other similar PHP classes which you may want to check like:

• googlechartseasyphpclass
• gchartphp
• GphpChart

Bluff is an open source JavaScript graphing solution that uses canvas tags.

It is a JavaScript port to the Gruff graphing library for Ruby.

Bluff has only 2 dependencies:

• JS.Class (2kb), which is a class for making JavaScript act like Ruby (which is definitely handy).
• Google’s ExCanvas, for canvas support in IE6.

Creating good looking graphs is very easy with this graphing library & it has a well-documented API that is supported with examples.

Flare is an ActionScript library for visualizing data like creating charts, graphs and complex interactive graphics.

The library supports data management, visual encoding, animation, and interaction techniques. It provides a modular design which enables you to create customized techniques easier.

Flare has a tutorial which will help you to start using it and its API is well documented.

To see its power, check the demos.

ProtoChart is an open source canvas chart library built with Prototype.

This library is highly inspired from Flot, Flotr and PlotKit & it enables us to create different chart types on the fly.

Features of this chart library:

• Line, bar, pie, curve, mix, and area charts available
• Multiple data series on same graph
• Highly customizable legend support
• Customizable grid, grid border, background
• Customizable axis-tick values (both x and y)
• Supports: IE6/7, FF2/3 and Safari
• Even works on an iPhone!

As IE6 does not support the canvas tag, Excanvas library is used for compatibility.

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.