Flot is a data-plotting library developed by IOLA built on top of jQuery. It’s easy to use, yet feature-packed and elegant. It has a mouse-controlled zooming feature (click and drag over the target area) and some simple user interactivity features such the ability to determine the x and y coordinates of mouse clicks.
Demonstration: Different graph types
Flotr, written by Bas Wenneker of Solutoire.com, is a plotting solution inspired by Flot that uses the Prototype JS library and excanvas.js. It supports most modern browsers including Internet Explorer 6, and has many features of Flot including mouse tracking, selection, mouse-tracking features.
Demonstration: Basic Legend Example
fgCharting Plugin for jQuery
fgCharting jQuery plugin is an accessible solution for charting data. It takes data in an HTML table and dynamically transforms the table into charts, allowing non-traditional browsers (i.e. – screen readers) access to the HTML table. Basic usage involves one line of code to initialize the plugin.
Demonstration: Chart types page
PlotKit is a charts and graphs plotting solution written on top of Mochikit. PlotKit a complete rewrite of a project called CanvasGraph.js, improving on code structure and adding support for SVG format. The developers of PlotKit provides you with a PlotKit Quick Start guide to get you up and running in no time.
Demonstration: SVG Renderer Tests
Demonstration: The Bar object
Demonstration: Area Chart Example
DynamicDrive offers a DHTML/CSS based solution for graphing pie charts. The implementation is straightforward, just include two scripts provided (wz_jsgraphics.js and pie.js), define the values of each segment of your pie chart either inline or in an external JS file, and you’re set!
The Line Graph script is another DHTML solution from DynamicDrive that allows you display line graph data. The procedure for implementation is similar to the Pie Graph script.
Canvas 3D Graph
If you need to graph 3-dimensional data, Canvas 3D Graph is worth checking out. Canvas 3D Graph is written with excanvas.js to support Internet Explorer.
The Dojo Charting Engine
Demonstration: Cylinder chart
Your favorite charting solution not included in the list? Have a web page that uses any of the solutions above? Share it with all of us in the comments.
Get posts by email
Be the first to know when we publish a new blog post!