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