Charts with JavaScript

Creating charts and graphs in the browser used to mean reaching for Flash or server-side image generation. With the maturation of Canvas and SVG support (and a few smart workarounds for Internet Explorer), JavaScript charting libraries have become a genuinely viable option. Here is an overview of the best tools available.

1. Google Charts

URL: https://developers.google.com/chart/

Google Charts generates chart images server-side via a URL-based API. You construct a URL with your data and chart parameters, and Google returns a PNG image. Supports bar, line, pie, scatter, Venn diagrams, QR codes, and many other types.

Pros: no JavaScript required (just an <img> tag), very easy to get started, many chart types. Cons: requires an internet connection, your data is sent to Google's servers, limited interactivity.

2. Flot

URL: http://www.flotcharts.org/

Flot is a pure JavaScript plotting library for jQuery that renders using Canvas. It is the go-to choice for interactive charts in web applications. Supports lines, points, filled areas, and bars. Events (hover tooltips, click handlers) make it suitable for dashboards and analytics interfaces.

$.plot('#chart', [
    { data: [[0,1],[1,2],[2,3]], label: 'Series A' },
    { data: [[0,3],[1,1],[2,2]], label: 'Series B' }
], {
    series: { lines: { show: true }, points: { show: true } },
    legend: { position: 'nw' }
});

The API is straightforward: pass a selector, an array of data series, and an options object. Flot handles the rest. For IE6–8 compatibility, Flot uses the ExplorerCanvas (excanvas.js) shim to emulate Canvas via VML.

3. Raphael.js

URL: http://raphaeljs.com/

Raphael is a general-purpose SVG/VML vector graphics library — not a charting library specifically, but powerful enough to build any chart type from scratch. It renders using SVG in modern browsers and VML in Internet Explorer 6+, providing true cross-browser vector graphics.

Raphael is best suited for custom infographics, interactive diagrams, and data visualizations that don't fit neatly into a standard chart type. The API lets you draw paths, circles, rectangles, and text, then bind events to any element.

4. PlotKit

URL: http://www.liquidx.net/plotkit/

PlotKit is a Canvas-based charting library with a simpler API than Flot. Good for basic bar charts, line charts, and pie charts when you do not need the interactivity features Flot provides. Built on top of MochiKit.

5. dygraphs

URL: http://dygraphs.com/

dygraphs is specialized for time-series data with very large datasets. It can handle millions of data points and still render smoothly using Canvas. Features include interactive zooming and panning, configurable error bars, and CSV data input. The best choice when you have dense time-series data and need performance.

Comparison Summary

• Google Charts — easiest to start, no JS needed, but sends data to Google
• Flot — best all-around for interactive charts in web apps, jQuery-based
• Raphael.js — most flexible, best for custom/non-standard visualizations, IE6+ support
• PlotKit — simple API for basic charts, MochiKit dependency
• dygraphs — best for large time-series datasets

For most web projects, Flot is the practical choice — it integrates naturally with jQuery, has good documentation, and covers the most common chart types.