25 JavaScript Plugins for Graphs and Charts

Creating an accessible data chart or graph in HTML is very tricky to achieve, especially with some elements, such as images, that allow only the most basic features that give textual information to non-visual users. What are the solutions?
PHP, Flash, Javscript (jQuery, MooTools, Prototype) and CSS can all be utilized successfully to implement interactive visualizations, and there are many techniques and solutions from each that will allow you to display them on web pages and apps.
Below we have compiled 25 solutions for displaying charts and graphs using various languages, if you prefer you may like to view our earlier article on CSS graph solutions: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques.

PlotKit – Javascript Chart Plotting

Graph and Chart Solutions

PlotKit is a Chart and Graph Plotting Library for Javascript that has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. It is based on top of the HTML CANVAS tag which is supported in Firefox, Safari and Opera, and is available under emulation on IE6 and IE7 via the ExplorerCanvas.

Downloads & Examples

jQuery Visualize Plugin – Accessible Charts & Graphs

Graph and Chart Solutions

The jQuery Visualize Plugin makes use of the Canvas element of HTML5 to give you a simple and accessible method for generating bar, line, area, and pie charts from data contained within an HTML table and allows you to configure them in a variety of ways.

Downloads & Examples

jqPlot Charts and Graphs for jQuery

Graph and Chart Solutions

The feature rich jqPlot is a plotting and charting plugin for the jQuery Javascript framework. There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types and adding canvases to the plot.

Downloads & Examples

Protovis – A graphical approach to visualization

Graph and Chart Solutions

Unlike low-level graphics libraries, Protovis, defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to create data with simple marks such as bars and dots to simplify construction.
It uses JavaScript and SVG for web-native visualizations; no plugin is required (though you will need a modern web browser) and programming experience is helpful but not essential. It does have extensive documentation and a wide array of examples on its homepage to help you get started.

Downloads & Examples

jQuery Sparklines

Graph and Chart Solutions

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript all with a single line of code.
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.

Downloads & Examples

MilkChart – Graph/Chart library for MooTools

Graph and Chart Solutions

MilkChart is 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.

Downloads & Examples

mooCSSChart

Graph and Chart Solutions

With mooCSSChart you can easily create animated bar charts.

Downloads & Examples

Highcharts – Interactive JavaScript charts for your webpage

Graph and Chart Solutions

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.
It works in all modern browsers including the iPhone and Internet Explorer from version 6. Standard browsers use the Canvas element and in some cases SVG for the graphics rendering. In Internet Explorer graphics are drawn using VML.

Downloads & Examples

JS Charts – Free JavaScript charts

Graph and Chart Solutions

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.
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 the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Downloads & Examples

flot – Attractive Javascript plotting for jQuery

Graph and Chart Solutions

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. It has been developed with focus on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (Internet Explorer where the excanvas Javascript emulation helper is used).

Downloads & Examples

Flotr Javascript Plotting Library

Graph and Chart Solutions

Flotr is a javascript plotting library based on the Prototype Javascript Framework and has been inspired by Flot (above).
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.

Downloads & Examples

Libchart – Simple PHP Chart Drawing Library

Graph and Chart Solutions

Libchart is an easy to use, free chart creation PHP library. The new version features multiple datasets for horizontal, vertical bar charts and line charts.

Downloads & Examples

pChart – a PHP Charting library

Graph and Chart Solutions

pChart is a PHP class oriented framework designed to create aliased charts with its data easily retrieved from SQL queries, CSV files, or manually provided. In this version rendering speeds have been greatly improved and run pChart on your web server, you'll need to use PHP compiled with the GD library support.

Downloads & Examples

YUI 2: SWF Charts

Graph and Chart Solutions

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies. Notable features include support for the DataSource Utility, customizable series and axes, a customizable mouse-over datatip, combination charts, and skinning.

Downloads & Examples

Open Flash Chart

Graph and Chart Solutions

Open Flash Chart works by requesting data from the server when a user loads a web page. The server will knows who the particular user is and it will generate a custom chart showing up to the minute data.
You will need to include the Open Flash Chart in your HTML, and you also need to provide the data file on the server. The data file is either a text file, or a .php, Perl, Python, Java (or another flavour of dynamic) page.

Downloads & Examples

XML/SWF Charts

Graph and Chart Solutions

XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data. Create an XML source to describe a chart, then pass it to this tool's flash file to generate the chart. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.).

Downloads & Examples

FusionCharts

Graph and Chart Solutions

This version is the free and open-source Flash charting component from FusionCharts . It empowers you to create animated and interactive Flash charts for your web applications, desktop applications and presentations. It provides an impressive 22 popular charts like Column, Line, Pie, Bar, Area, Stacked, Candlestick and Funnel Chart, that will look the same across all browsers.

Downloads & Examples

Flare – Data Visualization for the Web

Graph and Chart Solutions

Flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player. From basic charts and graphs to complex interactive graphics, the toolkit supports data management, visual encoding, animation, and interaction techniques. Even better, flare features a modular design that lets developers create customized visualization techniques with ease.

Downloads & Examples

Visifire – Silverlight and WPF Chart Controls

Graph and Chart Solutions

Visifire is a set of open source data visualization controls – powered by Microsoft Silverlight. it is a multi-targeting control which can be used in both WPF and Silverlight applications, that can be used with ASP, ASP.Net, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.

Downloads & Examples

Axiis : Data Visualization Framework

Graph and Chart Solutions

Axiis is an open source data visualization framework that has been built upon the Degrafa graphics framework and Adobe Flex 3. Axiis provides both pre-built visualization components as well as abstract layout patterns and rendering classes that allow you to create your own unique visualizations.

Downloads & Examples

ChartGo – Create Charts Online Fast, Easy and Free

Graph and Chart Solutions

ChartGo is an online generator that allow users to create charts online quickly. You can create bar charts, line charts or pie charts and you simply paste your data in the chart data area and hit the create chart button.

Downloads & Examples

iCharts – Create, Share and Embed Interactive Charts

Graph and Chart Solutions

iCharts allows everyone to upload Excel sheets or manually add data from which they can easily create, share and embed interactive charts within minutes. iCharts can be published on the iCharts Portal at iCharts and they can be embedded anywhere on the Internet in blogs, forums or corporate websites.

Downloads & Examples

Chartle.net – Interactive Charts Online

Graph and Chart Solutions

Chartle is a very easy to use and completely free online chart generator that allows you to embed and share your plots, maps, charts, diagrams and business reports online.
Chartlet is non-binding towards its users, there is no forced registration and all generated charts are your own, The only thing they ask is that you link back to them.

Downloads & Examples

Google Chart API

Graph and Chart Solutions

The Google Chart API returns a PNG-format image in response to a URL. Several types of images can be generated, including line, bar, and pie charts. For each image type, you can specify attributes such as size, colors, and labels.

chartpart.com – Chart Generator

Graph and Chart Solutions

This generator uses the Google Charts API to produce crisp and clear graphs that can be inserted into web based documents via a hyperlink or saved as a flat image file.

Author: (586 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments