30 High Quality Charts & Graphs for Web Developers
The main goal during development was to pick sane defaults in order to let the user create simple charts quickly with just a couple of lines of code.
One can create at almost no time bar, pie, doughnut and Pareto charts.
jqBarGraph is a jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
Of course, there are a lot of settings to tune appearance of your graph, as are animation, color scheme, dimensions etc. Also, you can additionally change look and feel of graph via CSS.
Visifire is a set of data visualization controls – powered by Microsoft Silverlight & WPF. Visifire is a multi-targeting control which can be used in both WPF & Silverlight applications. Use the same API to create charts & gauges in Mobile, Web & Desktop environments. Visifire Silverlight Controls can also be embedded in any webpage as a standalone Silverlight App. Visifire is independent of server side technology. It can be used with ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.
Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.
It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.
As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.
RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line chart, meter, odometer, pie chart, progress bar, rose chart, scatter graph and traditional radar chart
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.
This is jqBarGraph on steroids. It has almost all jqBarGraph possibility, plus some new features, like URL bars, info boxes, negative values, AJAX data loading…
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+.
The basic idea was to have generic and simple way to display genomics data. CanvasXpress supports bar graphs, line graphs, bar-line combination graphs, boxplots, dotplots, area graphs, stacked graphs, percentage-stacked graphs, heatmaps, heatmaps, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots, pie charts, correlation plots, Venn diagrams, networks (or pathways), candlesticks plots and genome browser.
It also supports a few data transformations like log and exponential transformation, z-score, percentile transformation, ratios and transposing. It also support grouping of samples, hierarchical clustering, kmeans, complex layouts, regression lines, normal distribution plots, non linear fitting, zooming, events … well, there a lot more features but maybe at this time I already capture your attention.
Timeplot from Simile Widgets
Timeplot is a DHTML-based AJAX widget for plotting time series and overlay time-based events over them (with the same data formats that Timeline supports)
The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization. For example, table row data values serve as chart bars, lines or pie wedges; table headers become value and legend labels; and the title and caption values provide title labels within the image. Visualize also automatically checks for the highest and lowest values in the chart and uses them to calculate x-axis values for line and bar charts. Finally, the plugin includes two different CSS styles — one light and one dark — that can be used as is, or can serve as a starting point to customize chart and graph presentation to match any application style.
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.
- Numerous chart style options.
- Date axes with customizable formatting.
- Up to 9 Y axes.
- Rotated axis text.
- Automatic trend line computation.
- Tooltips and data point highlighting.
- Sensible defaults for ease of use.
CSS Stacked Bar Graphs
There are plenty of CSS bar graph interpretations, but none of them did stacked bar graphs.
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.
- Line, bar, pie, curve, mix, and area charts available
- Multiple data series on same graph
- Highly customizable legend support
- Customizable grid, grid border, background
- Customizable axis-tick values (both x and y)
- Supports: IE6/7, FF2/3 and Safari
- Even works on an iPhone!
A simple to use, yet robust library for transforming table data into a chart. This library uses the HTML5 tag and is only supported on browsers other than IE until ExCanvas gets proper text support.
Pure Css Line Graph
What are they good for? I will mention just one reason, and leave other advantages or downsides for a debate: users scan your page, they don’t read every word and number you write. Line graphs will deliver information much faster then a table filled with numbers.
pChart is a PHP class oriented framework designed to create aliased charts. Most of today’s chart libraries have a cost, our project is intended to be free. Data can be retrieved from SQL queries, CSV files, or manually provided. This project is still under development and new features or fix are made every week.
Focus has been put on rendering quality introducing an aliasing algorithm to draw eye candy graphics. Rendering speed has been dramatically enhanced since the first version, we’ll still continue optimising the code!
Use our open source Gantt chart to illustrate a project schedule. You may show the dependency relationships between activities as lines between those activities. Current schedule status can be seen at a glance with percent-complete shadings. Projects, tasks, and activities are comfortably organized into a tree structure (left of the Gantt chart), which can be expanded/collapsed by a single mouse click. Mouseover popups show detailed activity properties.
JpGraph is an Object-Oriented Graph creating library for PHP >= 5.1 The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).
Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching charts jerkily updating every second. What you’re looking at now is pretty much all it does
- Automatic Data Navigation
- Liquid Layout
- JSON Compatible
- jQuery UI Compatible
Axiis is an open source data visualization framework designed for beginner and expert developers alike.
Whether you are building elegant charts for executive briefings or exploring the boundaries of advanced data visualization research, Axiis has something for you.
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.
Axiis is built upon the Degrafa graphics framework and Adobe Flex 3.
Highcharts is solely based on native browser technologies and doesn’t require client side plugins like Flash or Java. Furthermore you don’t need to install anything on your server. No PHP or ASP.NET. Highcharts needs only two JS files to run: The highcharts.js core and either the jQuery or the MooTools framework. One of these frameworks is most likely already in use in your web page.