22 Awesome Visualization Libraries: Charts and Diagrams

22 Awesome Visualization Libraries: Charts and Diagrams

In web application or software, very often we will need to present collected data to the users. Back in the olden days, data such as traffic statistics and clicking hits were presented through simple numbers or words, this method is plain and simple.

With the advancement of the web, more data are being collected. Thus, displaying all these data in standard plain numbers or words do not seem to be very effective. Therefore, statistical charts and graphs have become important tools to display raw information in a graphical form and making it digestible for the user. Just by a quick glance at the diagram, the user can determine the percentage of increase or decrease of their traffic or sales data immediately. This helps to speed up the process of locating certain data through the collected information.

Charts and Diagrams

There are many ways to display information, but the purpose for each of the graphical component (pie chart, bar chart, line graph and so on) are the same. It is to convert numbers or words into a graphical form that is easy to read and understand.

Below is a list of charting libraries that you might find useful when you want to display your tabular data in a graphical form.

Chart and Diagram Libraries

Axiis
Axiis is an open source data visualization framework designed for beginner and expert developers alike. It 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

Am Charts
AmCharts is a set of Flash charts for your websites and Web-based products. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data generated with PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion, and many other programming languages.

Am Charts

Deensoft
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. It aims to be a highly customizable and easy to use library.

Deensoft

Ejschart
Ejs Chart has genuine ease of use and complete customization. Emprise JavaScript Charts provides you with the tools you need to publish your data quickly and in a variety of formats. With its wide range of interactive features, simple and straightforward implementation, and unparalleled functionality, Emprise JavaScript Charts is the clear first choice for all your charting needs.

Ejschart

Ezcomponents
Ezcomponents enables you to create line, pie and bar charts. The output driver mechanism allows you to create different image types from each chart, and the available renders make the chart output customizable from simple two-dimensional charts to beautiful three-dimensional data projections.

Ezcomponents

Filamentgroup
Filamentgroup uses a technique that use JavaScript to scrape data from a HTML table and generate charts using the HTML 5 Canvas element. Now they have extended the code behind this technique and packaged it up as a new jQuery plugin.

Filamentgroup

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.

Flot

Fly Charts
Generally FlyCharts is a set of Adobe Flash (SWF) files that gives you outstanding possibility to visualize your data. Now, using FlyCharts you can create compact, interactive and good-looking charts in a minute. FlyCharts does not need any installation and it works with any scripting language.

Fly Charts

Fusion Charts
Fusion Charts Free can be easily used in dynamic web applications, static websites or be combined with JavaScript to render a true AJAX experience. The demos give you a taste of things that you can do with Fusion Charts Free.

Fusion Charts

Google Chart
The Google Chart API is an extremely simple tool that lets you easily create a chart from some data and embed it in a webpage. You embed the data and formatting parameters in an HTTP request, and Google returns a PNG image of the chart. Many types of chart are supported, and by making the request into an image tag you can simply include the chart in a web page.

Google Chart

Stlye Chart
Style Chart is an innovative technology that allows you to easily embed sophisticated and dynamic charts in your Web site. This Guide provides an introduction to all the features of Style Chart, as well as a complete language reference.

Stlye Chart

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 JavaScript class.

Bluff

Jfree Chart
JFreeChart is a free 100% Java chart library that makes it easy for developers to display professional quality charts in their applications. It has flexible design that is easy to extend, and targets both server-side and client-side applications.

Jfree Chart

jqPlot
Computation and drawing of lines, axes, shadows even the grid itself is handled by pluggable “renderers”. Not only are the plot elements customizable, plugin can expand functionality of the plot too! There are plenty of hooks into the core jqPlot code allowing for custom event handlers, creation of new plot types, adding canvases to the plot, and more!

jqPlot

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

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

Maani
XML/SWF Charts is a simple, yet powerful tool to create attractive charts and graphs from XML data. It makes the best of both the XML and SWF worlds. XML provides flexible data generation, and Flash provides the best graphic quality.

Maani

Omni Potent
Omni Potent is a jQuery plugin that generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via JavaScript.

Omni Potent

Open Flash Chart
Open flash chart is a flash based chart. It is open source. It is free to use and you get the source code to fiddle with!

Open Flash Chart

pChart
pChart is a PHP class oriented framework designed to create aliased charts. Data can be retrieved from SQL queries, CSV files, or manually provided.

pChart

Raphaeljs
gRaphael’s goal is to help you create stunning charts on your website. It is based on Raphael graphics library. Check out the demos to see static and interactive charts in action.

Raphaeljs

Visifire
Visifire is a set of open source data visualization controls – powered by Microsoft Silverlight and WPF. Visifire is a multi-targeting control which can be used in both WPF and Silverlight applications. Using the same API, charts in both Silverlight and WPF environments can be created within minutes.

Visifire

Start Plotting!

Although some of the libraries require very minimum programming knowledge and others can be complex, all of them have the same philosophy by delivering the most effective way in building data visualizations, charts and graphs. As with most things, the more complex the library, the more possibilities for customization will exist.

If we have miss out any good charting library, please share with us in a comment below.

Comments

  1. / Reply

    Great examples for those who are going to build some type of tracking software.

  2. Thanks for including us in the list Terrance :)

    • Vijay,
    • November 25, 2009
    / Reply

    Fantastic list. I am familiar with only 3 or 4 of them. Rest were quite new to me.
    Thanks once again for this list.

    • Jack lucky,
    • November 25, 2009
    / Reply

    This is great list. Thanks for sharing.

    Open Flash Chart 2 is my favorite. You didn’t include great screen shot.

    You definitely need to look http://demo.webasp.com.au/ofc-explorer-k.html chart explorer to see it real power.

    Thanks again.

    • amCharts fan,
    • November 25, 2009
    / Reply

    Well, in this case you could check http://extra.amcharts.com/editor/ and see how far ahead amCharts are…

      • Jack Lucky,
      • November 26, 2009
      / Reply

      If i had 450 Euro, then i would think of choosing amcharts.

      Even after paying 450 Euro – their charting component written in AS2; whereas Open Flash Chart written in AS3(which is faster faster flash engine).

      Open Flash Chart is open source.

  3. / Reply

    Very cool and modern charts designs. Great!

    • Uncleserb,
    • November 26, 2009
    / Reply

    Great article, must say I really like the Rapaheljs charts!

    Cheers!

    • Matthew kay,
    • December 16, 2009
    / Reply

    What about Google fusion tables?

  4. / Reply

    Take also a look at http://www.running-charts.com
    Ajax charts without any plugins at IE 6.0, 7.0, 8.0, Firefox, Safari, Opera and Chrome.
    Only JavaScript and CSS are needed.

  5. / Reply

    Well, Fusioncharts comes also as a Dreamweaver extension. It’s not free but it saves a lot of time as you don’t need any coding to create charts in PHP&MySQL

    • Paul,
    • December 10, 2010
    / Reply

    One more addition to your list – dhtmlx charts, a JavaScript/Ajax charting library. Available chart types: line, spline, area, bar, pie, and pie 3D. Different data sources are supported: XML, JSON, JS array, or CSV. GPL-licensed.

  6. / Reply

    I made an effort of creating some diagrams in HTML5. Check it out:

    http://j.mp/gpU0ZF

  7. / Reply

    this is a well-done article. thank you for the posting it here!

    • Alex,
    • March 20, 2012
    / Reply

    A tool that I build is http://diagramo.com

    Pure HML5. Take a look.

    • MartinNelson455,
    • July 6, 2014
    / Reply

    Sharing my personal user experience I would like to suggest the ShieldUI Charts, which came not long ago, but ventured to impress me. You can also have a look here: https://www.shieldui.com/products/chart

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.