Webdesign Tips and tricks : Very nice and Useful scripts to plot charts in web pages

In this post I want to suggest you a list of some interesting scripts you can use to plot easily charts (line, area, pie, bar...) in your web pages using jQuery, MooTools, Prototype and other JS frameworks.

Any suggestion? Please add a comment!


1. Flot
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin is known to work with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. If you find a problem, please report it. Drawing is done with the canvas tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used. Take a look at some examples here.

2. JS 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 our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready!

3. TableToChart
TableToChart is a MooTools script which converts a list of values contained in a HTML table drawing a graphic chart. You can use table tag to generate charts. Bars, lines (filled and wire) and pies are available.

4. PlotKit
PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

5. Yahoo UI Charts Control
The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies. Notable features include support for the DataSource Utility, customizable series and axes, a customizable mouse-over datatip, combination charts, and skinning.

6. ProtoChart
ProtoChart is an opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries. It supports line, bar, pie, curve, mix, and area charts, multiple data series on same graph, customizable legend, grid, grid border and background. It supports: IE6/7, FF2/3 and Safari and even works on an iPhone.

7. EJSChart
EJSChart supports mouse tracking, mouse events, key tracking and events, zooming. Scrolling, and crosshairs raise interactivity and user experience in web charting to a new level. You can choose multiple chart types: line, area, scatter, pie, bar and function series. Every aspect of the charting display can be configured and customized through well-documented properties and methods.

8. fgCharting
fgCharting is a nice jQuery plug-in which allows you to plot easly charts. It supports several types of charts (line, filledLine, additiveLine, additiveFilledLine, pie, bar, additiveBar) you can customize how you prefer.

9. Pure Css Data Chart
Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css? CSSGlobe provides this useful tutorial which explains how to draw simple data Charts using only CSS, without using JavaScript or any backend application.