Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Charts’ Category

Elycharts is an easy-to-use and customizable library for creating charts with only JavaScript.

The library supports most of the popular chart types including line, column, are, bar, pie, sparklines and combinations.


Elycharts comes with many interactions like mouse tracking and events, highlight of selected areas with various animations, tooltip and hints, html anchors and many more.

Also, it can modify data dynamically with good-looking animations to display the change in charts.

The charts are generated with SVG/VML and the library is built on jQuery + Raphaël.

JointJS is a cross-browser JavaScript library for creating fully interactive diagrams.

It makes use of Raphaël.js, can connect vector objects with different types of arrowsand interact with connections + objects.

Joint JavaScript Diagrams Library

The library is plugin-based for extending easily and there are ready-to-use plugins for popular diagrams (ERD, Org chart, FSA, UML, PN, DEVS, LDM).

Objects can be drag 'n' dropped by still keeping the hierarchy created and there are callback functions provided on every level.

Heatmaps, which we usually see in analytics apps, are a great way of visualizing density.

ClickHeat (WRD article), a PHP class, is probably the most popular open source resource for creating them. Another alternative is Heatmap.js which eases creating them with only JavaScript.


This JavaScript library uses HTML5 canvas for generating the visualization with the data provided.

It can be customized completely including the color gradient, opacity, datapoint radius and much more.

Heatmap.js is a fresh resource, the documentation is inside the code and various examples are provided to get you started.

Peity is a jQuery plugin for creating word-sized charts (sparklines) using HTML5 <canvas>.

It has support for bar, line and pie charts where color, width, radius and delimeter can be updated.

Peity jQuery Sparklines Plugin

The plugin adds a "change" event trigger to the graph elements, so, once their data is updated, the charts can be regenerated instantly.

If you would like to add new chart types, Peity can be extended by adding the new charting functions easily.

D3 is a lightweight and free JavaScript library for manipulating HTML documents based on data.

It can help us visualizing the data as HTML or SVG quickly, handle interactivity, and incorporate smooth transitions + staged animations into web pages.

The library can be used as a visualization framework (like Protovis) or as a framework to build pages (like jQuery).


D3 is not the traditional visualization framework that comes with it limits and ready-to-use templates. Rather, it solves only the crux of the problem: efficient manipulation of documents based on data which ends up in a serious flexibility.

AwesomeChartJS is an open source JavaScript library for creating charts using the HTML5 <canvas> tag.

The library is standalone (doesn't require any JS frameworks) and works very straightforward with an easy-to-use function.


It supports multiple chart types:

  • vertical and horizontal bar charts
  • pareto bar charts
  • pie charts (whole or part)
  • exploded pie charts
  • ring/doughnut charts

It focuses on simplicity and doesn't offer too much for customization other than the title, chart type and labels. Yet, simplicity is sometimes all we ask for.

Arbor.js is a graph visualization library built with web workers and jQuery.

It provides an efficient, force-directed layout algorithm, abstractions for graph organization and screen refresh handling.


The library doesn't force a specific method for screen-drawing and you can use it with canvas, SVG, or even positioned HTML elements; the best one that fits your project.

Arbor.js simply helps you focus on the graph data and its style rather than spending time on the physics math that makes the layouts possible.

It also comes with a well-documented API and creative demos.

SVGGraph is an object-oriented PHP library for creating simple and interactive charts with SVG.

There are multiple chart types supported like (3D) bar, line, (3D) pie and scatter where every chart has its own PHP class in a seperate file. So, you can use only the features you need.

SVG Graph

Charts can be customized in many ways including the title, description, paddings, colors, labels and much more.

Every new release has only support for PHP5 but a pretty old, PHP4 compatible version is still offered.

  • Tags:
  • Filed under: Charts, Goodies, LGPL License
  • 1 Comment
  • canvasXpress is a free JavaScript graphing library based on the <canvas> tag of HTML5.

    It supports multiple graph types including bar, line, dotplots, area, stacked, heatmaps, pie charts and more.


    The outputs are interactive as hovering over the items can display values.

    And, it is possible to customize every aspect of them including colors, text, hiding/showing elements, etc.

    canvasXpress works in all major browsers including IE6.

    DDChart is a jQuery plugin for creating bar charts where it is possible to digg the data deeper and deeper.

    It works by clicking a bar inside the chart and it can instantly display a new chart which focuses on that item.

    Drill-Down jQuery Bar Charts

    Charts are interactive, they respond to mouseovers with tooltips that include the data and they have a nice animation on load.

    DDChart requires the data to be in JSON format and it is jQuery UI compatible (which is great for easy styling).

    Uptime Robot