TufteGraph
TufteGraph is a JS library by which you can easily create graphs. All the configuration is by dynamic functions, allowing for a really compact API (very few options). Also, Non-core layout is done via CSS rather than code. You can customize the style of graph by editing it’s CSS.
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. 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.
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.JS Charts is available free only for non-commercial purpose. For commercial use, get the full license for only $149. This license does NOT allow you to distribute, resell or embed/enclose JS Charts into another distribution pack/application which outputs similar content that can be used by third parties.
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.
Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example.
MilkChart
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.
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. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported.
gRaphaël (JavaScript Library)
gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action. gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Visualize
Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. Visualize uses a technique which use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. The technique is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology.
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.
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 (the excanvas Javascript emulation helper is used for IE).
API Google Chart
The Google Chart Tools enable adding live charts to any web page. It have a rich gallery of visualizations provided as Image charts (using a simple URL request to a Google chart server), Interactive charts (using a Google developed JavaScript library). it can read live data from a variety of data sources and it’s very simple to use.
Moochart
moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs. You can find all the other info like download details and demo on it’s single page.
InfoVis
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It provides you facility to combined the visualizations in order to create new visualization methods. All visualization classes are mutable, so you can easily add/override any method you want.
Canvas 3D Graph
Canvas 3D Graph is a special type of bar graph that plot numbers in 3D. This first started as PHP-GD project, but soon I realized that there is not much sense in generating complex graph like this on server side (script worked really fast, though). All the other details can be found on information page itself.
Dygraphs JavaScript Visualization Library
dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. It’s feature includes, Plots time series without using an external server or Flash, Works in Internet Explorer (using excanvas), Lightweight (45kb) and responsive, Displays values on mouseover (this makes it easily discoverable), Supports error bands around data series, Interactive zoom, Adjustable averaging period, Can intelligently chart fractions, Customizable click-through actions etc.
Flotr Javascript Plotting Library
Flotr is a javascript plotting library based on the Prototype Javascript Framework 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.
JavaScript Diagram Builder
The JavaScript Diagram Builder v. 3.3 is a library of some objects and functions, which can help you to display a coordinate diagram (resp. a chart or graph) in your webpage in an easy way. The file ‘diagram.js’ contains all the necessary objects and functions. This file must be included in the header of your webpage:
- <script language="JavaScript" src="diagram.js"></script>
The script will best work with Microsoft Internet Explorer 5.x, Netscape 6.x, Opera 7.x or Konqueror 3.x under Windows and Linux, but it will also work with Netscape 4.x and Opera 5.x under Windows and Linux with some restrictions.
The JavaScript Diagram Builder is especially useful, if you want to display a coordinate diagram (chart or graph) which depends on the client’s input parameter or from data of a database.
Grafico: Javascript Charting Library
Grafico is a javascript charting library built with Raphaël and Prototype.js. The library provides a wide array of graphs and stays with the guidelines laid out by Stephen Few and Edward Tufte. Grafico provides pretty charts that effectively communicate their information. This means you get awesome graphs such as stacked area charts and sparklines, but no pie charts or bar charts with every bar a different color. There are a lot of bad charts out there, and Grafico will do it’s best to prevent you from adding charts onto that pile.
MooWheel
The purpose of this script is to provide a unique and elegant way to visualize data using Javascript and the <canvas> object. This type of visualization can be used to display connections between many different objects, be them people, places, things, or otherwise. The script is licensed under an MIT-style license. All other info can be found on MooWheel description page itself.
MooCSSChart
mooCSSChart is a very easy way to creat charts using JavaScript and quick CSS.
Processing.js
Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
Processing.js is explicitly developed for browsers that support the HTML5 <canvas> element. Processing.js runs in FireFox, Safari, Opera and Chrome but will not be supported in Internet Explorer.
JSXGraph
JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG and VML. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.
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. Each example displayed below takes just 1 line of HTML or javascript to generate.
JavaScript Chart
Wouldn’t it be nice to be able to add a stylish and colorful chart to your Web page with minimal effort and still avoid slow-loading Java applets or server side generated images? Then the JavaScript Chart is just what you need!
The JavaScript Chart supports:
- Several charts on the same page
- No limit on the number of data items in one chart (as long as you have enough space)
- Pass the chart data as a string in the following format: Item A;1;Item B;2;Item C;3.
- Gridlines are automatically created and spaced with appropriate increments depending on the highest value in the data range
- Choose if item values should be displayed or not on each individual chart
- Choose if the chart legend should be displayed or not
- Each data item will automatically get a different matching color
- Each chart can be rendered in debug mode, showing some useful information if the chart is not displayed as expected
- Modification of some of the layout parameters with CSS
This small utility will simply take a semi-colon delimited data string (the delimiter can be changed) and generate a chart for you. You can add several charts to the same page and there is no limit to how many data items you can have in one chart, just as long as you have enough space in your page.
Bluff
Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (2.6kB gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 11kB gzipped.
To draw a graph, you create a new Bluff graph object using the id of a canvas element on the page, set some options, add the data and labels, then tell the graph to draw.
TableDiagram
TableDiagram script generates a diagram (chart) view of the data in a table. The values in the table must be non-negative (more than or equal to 0). They can be either integer or decimal.
HTML-Graphs
Anyone easily can use this script to create horizontal / vertical bar graphs, progress bars and faders. You can create simple graphs and even grouped bar graphs with legends, add labels, change colors etc. No graphics or graphical libraries required.
This script was tested with all the major systems and browsers
CSS Based Free Resources
Pie Graph
This is a purely DHTML/ CSS based Pie Graph script. It loads fast and blends in with the rest of the page. It’s very easy to customize and very easy to use. You can even use a transparent background for it!
Css Data Chart
Data visualization is mostly achieved with flash applications or with help of some programming languages. In this example you can learn how to creat data chart only using well formed markup and css. There is no need to use any JavaScript or any backend application. Of course, the markup could be generated programatically or by hand, whatever works best for you.
CSS Stacked Bar Graphs
To design the stats feature of Backbone, our Ruby on Rails CMS, we needed to show a stacked bar graph of page views vs unique visitors. There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs. So here you can learn how to creat CSS Stacked Bar Graphs Based off Alen Grakalic’s Pure CSS Data Chart.
AjaxMGraph
It’s very simple graph built in CSS to represent data. AjaxMGraph is a user interactive XHTML/CSS graph which is powered by PHP and using Ajax based graphing library built on the Prototype JavaScript framework.
CSS Bar Graphs
Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. The concept of creating CSS Bar Graphs is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.
List Bar Chart
List Bar Chart are nothing more than a styled definition list with just classes defining each line. It’s very simple CSS mathod by which anyone can simply able to creat list bar charts. You may use this method on your personal ‘non-profit’ web site without seeking author’s permission.
Simple Accessible Charts
SAC (Simple Accessible Charts) are created from a list using CSS. It’s benefit includes: Fully searchable by search engines, Accessible, Scalable, Easy to expand, a more complete listing, and use of Only HTML and CSS.
Dynamic Pie Chart
This is very easy way of creating a semi-dynamic pie chart without the use of server-side imaging libraries.
Chart Demo
In web applications developed now days a lot of the logic that previously resided on the server side is now being implemented on the client side. This is especially true for information presentation, components such as trees and columnlist makes it possible for users to interact with the application, or web site if you wish, without contacting the server. However the ability to present data in a graphic rather than textual format has been quite limited, unless a plugin is used or an image is requested from the server. That’s where this component comes in to place, it allows various forms of charts to be created, without any additional plugin, and without using images.
Vertical Bar Graphs with CSS and PHP
Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
Accessible Bar Chart
This is one more simple solution using CSS. It’s main feature includs:
- Table headers are there but hidden using the aural text class discussed in a previous article. Sighted users have already received information on what the chart is about.
- A bar is created using an image which is stretched to the appropriate size.
- Bar widths are calculated relative to the largest value.
- Value cells have a repeated background image which shows the vertical lines.
- Browsing the chart without CSS or images will render an ordinary table.
- Value labels can be hidden by using the aural text class.
