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

Archive for the ‘Charts’ Category

Flare is an ActionScript library for visualizing data like creating charts, graphs and complex interactive graphics.

The library supports data management, visual encoding, animation, and interaction techniques. It provides a modular design which enables you to create customized techniques easier.

Flash Visualazation Library

Flare has a tutorial which will help you to start using it and its API is well documented.

To see its power, check the demos.

ProtoChart is an open source canvas chart library built with Prototype.

This library is highly inspired from Flot, Flotr and PlotKit & it enables us to create different chart types on the fly.

Prototype Canvas Charts

Features of this chart library:

  • 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!

As IE6 does not support the canvas tag, Excanvas library is used for compatibility.

jQuery Sparklines is a plugin for creating sparklines on the fly.

What is a sparkline:


They are data-intense, design-simple, word-sized graphics that are commonly used in market, stock activity and can be implemented anywhere (via Wikipedia).

This plugin supports:

  • Line graphs
  • Bar charts
  • And, tristate charts

jQuery Sparklines

jQuery Sparklines plugin can be used to create graphs from data inside the HTML or via JavaScript. Almost every variable of it can be customized including colors, size & chart type.

Progress bars are a great way visualizing events that may take some time like uploads, form submissions & more.

This is a MooTools animated progress bar which is highly customizable and easy to implement.

Mootools Progress Bar

You can define the "start percentage" and "speed" of the progress bar besides other variables.

Usage is this easy:

pb = new dwProgressBar({ 
    container: $('put-bar-here'), 
    startPercentage: 25, 
    boxID: 'box', 
    percentageID: 'perc' 

and you can set the progress bar to a new percentage with a simple command like: pb.set(55); .

To see a demo of this MooTools progress bar, click here.

Update (05.08.2008): There is now a new version which supports stepping & events.

pChart is an open source PHP chart library for creating aliased charts.

This chart classes run on any webserver that has PHP & GD library support.

PHP Chart Library

Chart types currently support by this PHP charts solution are:

  • Line chart
  • Cubic curve chart
  • Plot chart
  • Bar chart
  • Filled line chart
  • Filled cubic curve chart
  • Pie chart
  • Radars chart
  • Limits chart

For faster display of charts, pChart has a caching class named pCache which serves a chart from cache if it was rendered before with the same data.

Free PHP Charts

This project is still in development (for ex: pie charts are in beta) but updated frequently and, even now, looks very functional.

PHP classes are well documented and they can be tested in a live test area.

  • Tags:
  • Filed under: Charts, Goodies, GPL License
  • In general, gauges are built with Flash as they require an animation.

    Rather than Flash gauges, this is a pure JavaScript & canvas gauge.

    JavaScript Canvas Gauge

    How it works?

    The code sets a starting and an end value. Using the HTML Canvas element, it draws the needle and simply rotates it according to the current data. For more information about Canvas element, check this WRD post.

    As Internet Explorer does not support Canvas element natively, this Canvas gauge uses IECanvas for that.

    Working demo can be found here.


    There is also a dynamic Flash gauge at the same page.

    fgCharting is a jQuery plugin which helps us to create accessible charts from standard table data with canvas.

    Using this chart plugin, we can create several types of graphs, such as pie, line, area, and bar.

    jQuery Chart Plugin

    As canvas is not supported by default in Intenet Explorer, you can use ExplorerCanvas to add this functionality to it (WRD post for more details).

    Visifire is a set of open source Microsoft Silverlight chart components.

    Visifire lets you create stunning charts with ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails or just simple HTML in minutes.

    Silverlight Charts

    In order to use this great Silverlight chart library, you don’t need to know anything about Silverlight. Simple HTML knowledge is enough.

    To see how beautiful the results are, check the Chart Gallery or Chart Designer.

    MooWheel is a mootools based script which visualizes data and connections between items like a wheel.

    MooWheel uses CanvasText and ExCanvas libraries other than mootools which are already included in the package.

    Mootools Wheel Script

    Usage of this data visualization script is pretty simple. You simply create a data array, add a canvas tag and call the function.

    There is a very nice demo here.

    CSS Globe has a chic animated progress bar built with CSS and an animated GIF file.

    It is simply an EM tag above an animated GIF file which is blocking the part of the GIF file to creating the progress bar stop effect.

    CSS Progress Bar

    As this progress bar is only a visual trick, it can not show a "live" progress but only a static one which the percentage of progress to be shown was defined before the page is loaded.

    Uptime Robot