Flot is a jQuery-based JavaScript plotting library, which focuses on simple usage. The results are fairly attractive, and has some interactive features, such as zooming. It works with all modern browsers (including IE6+, where Google’s ExCanvas is used). If you’re into Prototype, check out Flotr, a Prototype port.
This is another jQuery plugin, and produces results not dissimilar to Flot. It provides quite a wide range of graphing options.
Dojo Charting, part of the Dojo Toolkit, provides many common chart types including line, bar, area and pie charts.
Bluff is a James Coglan’s JavaScript port of Ruby’s Gruff graphing library. It depends on James’ JS.Class (and ExCanvas to support IE).
PlotKit is based on MochiKit, but unfortunately only supports IE6+ via Adobe’s discontinued SVG viewer.
Inspired by Flot and PlotKit, Protochart build upon Prototype and ExCanvas, providing a good range of charting options.
Google Visualizations provide a variety of ways to represent your data, including charts from the Google Chart API as well as pure client-side visualizations (some of which require Flash).
YUI charts let you visualize tabular data on a web page in a variety of different ways, but unfortunately the chart control depends on Flash 9.
This is not just restricted to charts, and it doesn’t support IE (yet), but I wanted it to include it anyway as, like Raphaël, Processing is such a powerful tool.
Axiis has been designed to be a concise, expressive, and modular framework that let developers and designers create compelling data visualization solutions by assembling easy to understand building blocks into simple or complex visual representations of data. Axiis takes a very visual approach to development in both the markup language itself as well as the concepts used to create data visualizations.
The two primary concepts to understand in Axiis are Geometry and Layout.
Geometry: All data visualizations are ultimately represented as one or more sets of simple or complex geometries that plot specific data points relative to visual coordinates. To that end, Axiis leverages the Degrafa framework to describe its geometries.
Layout: The Axiis layout classes are the heart of the framework, as they allow the developer to describe in simple terms how they want to translate sets of data into geometric representations. The layout classes allow developers to use and combine pre-built layout schemes as well as build their own to create anything from standard cartesian charts to wild yet-to-be imagined data visualizations.
.add(pv.Bar)
.data([1, 1.2, 1.7, 1.5, .7, .3])
.bottom(0)
.width(20)
.height(function(d) d * 80)
.left(function() this.index * 25)
.root.render();
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, such as in this stacked area chart of sine waves:
.add(pv.Panel)
.data([[Math.sin(x / y)
for (x in pv.range(50))]
for (y in pv.range(3, 9))])
.add(pv.Area)
.data(function(d) d)
.fillStyle(pv.Colors.category19.unique)
.bottom(function() let (c = this.cousin())
c ? (c.bottom + c.height) : 0)
.height(function(d) (d + 1) * 13)
.left(function() this.index * 3)
.root.render();
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. For example, here we derive labels for a rule and a bar:
new pv.Panel().width(150).height(150) |  |
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!
JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs.
