Ways to create chart and graph with Javascript

A chart or graph gives an overview of the data variation in short and comprehensive way. It also reduces the time to grab the actual data fluctuations or variations and is available in visual form.

It is a diagram displaying the relationship between numbers or amounts. Common graphs use bars, lines, or parts of a circle to display data. Charts and Graphs are mainly used for statistics purpose and play a critical role in many applications.

Here are few tools which can build pretty good looking custom charts or graphs with defined statistics:

PlotKit – Javascript Chart Plotting

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. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported. And is well documented with couple of live demos.

Examples:

PlotKit Dynamic Charting Test – Redrawing values from a dynamic table.

PlotKit Simple Canvas Demo – A self contained demo in a single file. Use this to get started!

PlotKit Simple SVG Demo – A self contained demo in a single file. Use this to get started!

Sweet Canvas Test

Sweet SVG Test

Simple Canvas Test

Simple SVG Test

liquidx.net Stats Page

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. Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application. The plugin is targeting all newer browsers. 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.

Examples:

Basic example

Different graph types

Setting various options

Real data with a bit of interactivity

Selection support and zooming

Zooming with overview

Plotting time series

Visitors per day with zooming and weekends

Interacting with the data

Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework (version 1.6.0.2 at the moment) and inspired by Flot (written by Ole Laursen). Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, CSS styling support and much more.

Examples:

Basic Example

Basic Axis Example

Basic Bar Example

Basic Legend Example

Mouse Tracking Support Example

Mouse Zoom Support Example

Negative Value Support Example

Click Event Hook Example

JSON Data Example

ProtoChart is a new opensource library to plot pretty charts with examples included

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

Further Reading...

More ways to create Charts and Graphs

Why NodeJS Development is Important Nowadays

8 Most Effective Node.js Tools for Developers