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

Archive for the ‘Charts’ Category

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).

HumbleFinance is an HTML5 data visualization tool that looks and functions similar to the Flash chart in Google Finance.

It makes use of the Prototype and Flotr libraries and is not limited to displaying financial data but any two 2d data sets which share an axis.

HumbleFinance Chart

The data needs to be stored in JavaScript variables and requires 3 parameters to be set before running the function to create the chart.

It is possible to manually select a part of the data (with a slider-like interface) and zoom to that part. This is a very useful function when working with large datasets,

JpGraph is a feature-rich PHP library for creating good looking charts.

It has support for almost any chart type including bar, line, pie, scatter, radar, field, stock and much more.

Some of the charts have the option to be created in 3D and they are all web-friendly (usually 2-3 kb).


The library is very flexible, any number of plots can be drawn in every chart, objects can be rotated, etc.

JpGraph has built-in images for plot marks including 3D rendered markers like diamonds, squares, bevels, balls and pins.

And, a very original feature, it has a pre-defined function to create flags for 200+ countries.

To sum up, the library is really an impressive one and it is free to be used in non-commercial, open-source or educational projects.

  • Tags:
  • Filed under: Charts, Goodies, Other License
  • RGraph is a free graph library that uses the HTML5 canvas tag.

    Using the library, it is possible to create a wide variety of graph types:

    • bar, pie, donut, gantt, radar, funnel, bi-polar charts
    • line and scatter graphs
    • LED display
    • meter
    • odometer
    • progress bar

    RGraph HTML5 Chart

    The charts are interactive (respond to mouse-overs and clicks) and, optionally, they can load with animations or zoom to a specific point.

    There is also an annotation feature where you can draw over the graphs for highlighting them.

    P.S. RGraph is only free for personal use.

    Simile Widgets is a set of open source web widgets for visualizing data & content.

    They are actually a spin-off from the Simile Project & improved over time by a community of open-source developers.

    Currently, it includes 4 widgets:


    Simile Timeline

    Timeline is for creating an interactive display of events within a timeframe.

    It can be dragged or controlled with the mouse wheel & events can be clicked to see the details.


    Simile Timeplot

    Timeplot is a DHTML widget for plotting time series easily.

    On mouse-overs, it can display the values interactively (it works with the same data format that Timeline supports).


    Simile Runway

    Runway is a Flash-based implementation of the popular iTunes-like coverflow.

    The colors, fonts, reflection & transit,in values can be configured easily. Also, it can fire events to update the web page's Javascript.


    It is for creating web pages with advanced text search and filtering functionalities, with interactive maps, timelines, & other visualizations.

    You can find more details on a previously published WRD post on Exhibit.

    Ivan Lazarevic is sharing 2 different plugins for creating bar charts with jQuery & MooTools:

    Both plugins can create simple or stacked bar charts & data to be displayed is loaded with an array.

    JavaScript Bar Charts

    jqBarGraph has support for animated loading of the charts however mooBarGraph offers more features like:

    • url bars
    • info boxes (interactive charts)
    • negative values
    • AJAX data loading

    They are both very easy to use & support all major browsers.

    Grafico is an open source JavaScript charting library built with Raphaël & Prototype.js.

    It is possible to create multiple types of charts like line, area, bar & stacked charts, sparklines and more.


    Each chart type has numerous API options to customize it’s look & behavior.

    Charts created with Grafico can, optionally, be interactive which means they can provide data when hovered, clicked, etc.

    The library is well-documented & supported with examples.

    TufteGraph is a jQuery plugin that can create standard & stacked bar charts inside any given element.

    It it configured mostly by dynamic functions which simplifies the usage by allowing for a really compact API.

    jQuery Bar Charts

    A standard chart comes with no style but it can be totally customized with CSS (download package includes an example).

    Important Info: The charts created work in major browsers. Although the example in the plugin's website doesn't seem to work in IE, the raphael.js file used can be replaced by the latest version of Raphaël JS library which will fix the problem.

    dygraphs is an open source JavaScript charting library for displaying data of time series.

    It can show values on mouseover that makes discovering the values easier & zooms any selected area.

    Zoomable JavaScript Charts

    The data can be called from a CSV file or mentioned in the code staticly (in CSV format).

    The library can handle fractions intelligently & supports error bands around data series.

    It works in all major browsers (IE requires excanvas) & it is compatible with the Google Visualization API.

    Highcharts is a JavaScript charting library for creating interactive charts in various types (line, spline, area, areaspline, column, bar, pie & scatter).

    The library offers a high-level of usability with features like:

    • tooltip labels displaying info on hovered items
    • zooming on a specific part of the chart
    • text rotation on labels for a better readability

    Highcharts: JavaScript Charting Library

    Highcharts has an admirable effort in browser compatibility. For standard browsers it uses the canvas element and in some cases SVG for the graphics rendering. In Internet Explorer, graphics are drawn using VML. Besides all major browsers, it works in iPhone & IE6.

    The library is offered for free to be used in personal/non-commercial projects & requires a license for commercial ones.

    Uptime Robot