Tips

15 Crazy Useful JavaScript Solutions for Charts and Graphs

June 14, 2010 • By

Graphs and charts are a great way to break down the information at hand to the user in a descriptive and visually enticing manner. These visual structures allow you to easily simplify complex data and output easier to understand content. Everyone can use a graph or chart, however, not everyone has the right tools to create an effective one.

Below we’ve compiled the best JavaScript graphs and chart solutions. We chose to put a list of JavaScript graphs because of their flexibility and functionality.

JS Charts

JS Charts is a JavaScript chart generator that requires little or no coding. JS Charts allows you to easily create charts in different templates like bar charts, pie charts or simple line graphs.

jQuery Visualize Plugin

This JavaScript technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology, or with browsers that don’t fully support JavaScript or HTML5 Canvas.

Highcharts

Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Emprise Javascript Charts

The Emprise JavaScript Chart solution relies on pure JavaScript in order to shell out great features such as zoom, interactive functionality, stackable, and a variety of AJAX capabilities that are built in.

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. PlotKit is fully documented and there is a quick tutorial to get you started.

jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features such as numerous chart style options, date axes with customizable formatting, automatic trend line computation, tooltips and data point highlighting, and more.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via Javascript. The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7 & 8.

TufteGraph

TufteGraph lets you configure dynamic functions and it also allows you to work with a compact API for a much faster web app. It also uses a non-core layout that is done through the use of CSS.

Raphaël’s Javascript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

milkchart

A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 canvas tag and is only supported on browsers other than IE until ExCanvas gets proper text support.

Graph-It

With Graph-It you can easily create graphs out of raw data using Graph It! Just input the name/value pairs of the involved graph elements, and leave the rest to the script. The values can be either absolute or percentage (using two versions of script).

Canvas 3D Graph

Canvas 3D Graph is a special type of bar graph that plot numbers in 3D

Protovis

Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction.

ProtoChart

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.

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.

(Visited 982 times, 1 visits today)