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

Archive for the ‘Charts’ Category

Chronoline.js is a JavaScript library for creating a chronological timeline of events.

The timeline is is displayed horizontally, events placed on it can be any days long and details about the events are shown in a tooltip when hovered.


It can feature the timeline with any number of days (day-by-day, weekly, quarterly, month-by-month, etc.).

The library uses Raphael.js + jQuery and works only in modern browsers.

There are lots of jQuery plugins around that handle specific tasks and, for JavaScript-heavy apps, we may end up in using many of them.

Working with such many different resources at the same project is sometimes hard and can be time consuming as they all have their way of coding, different APIs, styling support…

Infragistics jQuery Controls

Infragistics, a creative company focused on building user interface development tools, has a professional and complete jQuery Toolset that solves many JavaScript-related tasks beautifully.

The toolset is HTML5-powered and works cross-browser/platform with support for mobile + all of them are optimized for high performance.


What is inside?


Infragistics Charts

First of all, it has a full-featured charting library with support for 15+ chart types (pie, bar, line, area, bubble, radial) where they can be used side-by-side too.

Charts are interactive, they can respond to events like hover or click and can be zoomed to better see a specific range.

Read the rest of this entry »

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

jQuery Knob Control

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

Cubism.js is a plugin for D3.js, a JavaScript visualization library for HTML and SVG, to display time series in real-time.

It requests the data incrementally by polling only the most recent values and reduces the load on the server.

Charts are rendered incrementally as well by shifting charts one pixel each time to the left.

Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources.


Envision.js is a JavaScript library to simplify creating fast and interactive HTML5 visualizations.

It comes with 2 chart types; TimeSeries + Finance and with an API for developers to build custom charts.

The library is built on top of Flotr2 and the HTML5 Canvas. It is framework agnostic and depends on few micro libraries.


It works by default on modern browsers, IE6-8 with FlashCanvas, and mobile touch devices with a WebKit browser are all supported.

P.S. Envision.js is a rewrite of the previously featured HumbleFinance and offers more features.

Sigma.js is an open-source JavaScript library with a small footprint for drawing graphs using HTML5 canvas.

It is built for to consuming static or dynamic but interactive network maps with unlimited nodes on a web page.


The library is standalone, can be extended with plugins (GEFX parser and ForceAtlas2 layout algorithm are included as plugins) and offers jQuery-like chainable methods.

There are a lot of variables for customizing each instance and various examples exist that show the capabilities of Sigma.js.

Morris.js is a small JavaScript library for visualizing time-series data beautifully.

It is built on top of jQuery + Raphaël and displays the data over an interactive line graph.

The library has a very straightforward API with a single function that requires the data, labels color, line width and few more settings.


Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements.

The library is framework independent and has support for line, bar, candle, pie and bubble charts.

There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable.


Flotr2 outputs are interactive, they can be set to respond to the actions of the user. And, they can be extended with plugins (there are already several ones that can add interactions, new decorations, etc.).

Charts and graphs work in all major browsers (including IE6) and they are mobile compatible.

Rickshaw is a JavaScript toolkit, created by the developers of the stock photo service Shutterstock, for generating interactive and real-time graphs.

It is built on top of the D3.js visualization library and can render stack or line graphs.

Rickshaw JavaScript Toolkit

The graphs are interactive, respond to hovering them or their legends, items in the stack can be re-ordered with drag 'n' drops and more.

There is a good margin for customization: colors, sizes, interpolation and functionality in general with the modular/extendable structure of the toolkit.

Visifire, a professional set of charting tools that works on WPF, Silverlight & Windows Phone 7, is giving away 5 "Single Developer Licenses with Premium Support" (worth $499 each) to WebResourcesDepot readers.

Please check the details of joining this giveaway at the bottom of this post and here are more details about this exciting resource.

What is Visifire?

It is a multi-targetted kit of data visualization controls which is compatible with WPF, Silverlight & Windows Phone 7 which uses the same API for developing in all these platforms.


Visifire is not dependent on any server-side technology and can be used with almost any language including ASP, ASP.Net, SharePoint, PHP, JSP, ColdFusion, Python, Ruby or just simple HTML.

It has support for many chart types like bar, column, line, are, pie, stock, radar, stack, doughnut and more. Circular and linear gauges can be created too.

All the visualizations are very good-looking, interactive (responds to mouse-overs and clicks) and have shiny animations.

Visifire Gauges

It is possible to zoom into charts by selecting a part of it to view only the selected portion.

They can be styled/themed easily and edited with Microsoft Expression Blend.

How to join the giveaway?

In order to win one of the licenses given away:

  • Share this giveaway with a tweet: "Just joined the @Visifire – Windows Phone Charting Tools giveaway at WebResourcesDepot –" (click to tweet easily)
  • Follow @visifire Twitter user
  • Share your tweet URL within the comments

SELECT * FROM wp_comments WHERE comment_post_id=2494 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 5

The winners will be selected with the query below on 6 October 2011 (1 week later) and good luck everyone.

Uptime Robot