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

Archive for the ‘Charts’ Category

Today's internet speed and how fast the websites/apps work have almost removed "the need to wait for something to load".

On the contrary, there are still cases that a web user has to wait and it is always a good idea to visualize the process with an attractive loader.

Percentage Loader

Percentage Loader is a jQuery plugin which makes use of HTML5 canvas (no images) for creating a very good looking loader.

The loader is only 10kb (minified), can also be used as a drag 'n' drop supported controller (like a circular volume button) and multiple instances of it can be displayed in the same page.

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.

Chronoline.js

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?


Charts

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.

Cubism.js

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.

Envision.js

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.

Sigma.js

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.

Morris.js

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

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.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com