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

Archive for the ‘Charts’ Category

Sparklines, the tiny charts that can be used near a sentence, headline, graphic.., are very handy for visualizing data inside the content.

Sparky is a free JavaScript sparklines library that depends on Raphaël and very easy to use.

Sparky - JavaScript Sparklines Library

It has support for multiple chart types (line, bar and area) where line + area charts can have multiple colors as well.

The usage is very straightforward; just create an HTML element (preferably <span> for inline use) and provide the values as an array with a data attribute. And, define the settings (width, height, colors, padding, etc.) with a JS function.

Jim Knopf is a JavaScript library for creating SVG-powered knobs.

The library doesn’t require any JS frameworks and it comes with various built-in knob types.

SVG Knobs With JavaScript

Knobs created can be scaled completely (thanks to SVG) and their designs can be customized with CSS.

Also, they can be controlled with mouse, mousewheel, keyboard or touchpad and options exist for setting the min/max values, starting points and the angles allowed.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 2 Comments
  • D3-Cloud is a beautiful and open sourced implementation of word clouds that are familiar from Wordle.com.

    It is built with the D3.js library, uses HTML5 canvas for drawing the output and works asynchronously for a good performance.

    D3 Word Cloud

    The size of the cloud, font used, font-size, padding and more stuff can be customized.

    Also, a web-based word generator with SVG + PNG downloads is provided.

    Bonsai is an open source JavaScript library for creating graphics and animations.

    The library renders the outputs using SVG and comes with an intuitive, feature-rich API.

    There is support for creating simple shapes (rectangle, circle, ellipse, etc.) with specific functions and a path() function exists for drawing any custom shapes.

    BonsaiJS - JavaScript Graphics Library

    It is possible to apply colors, gradients and filters (grayscale, blur, opacity and more) to these shapes.

    Many mouse (or touch) and keyboard events are already built-in to the library and they can be managed easily.

    Bonsai has support for standard animations and also keyframe animations for setting up a series of consecutive animations.

    And, lots of easing functions exist for using them inside the animations.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 0 Comments
  • jsDraw2DX is a standalone JavaScript library for creating any type of interactive graphics with SVG (and VML for old IE browsers).

    Besides the ability to generate all basic shapes like line, rectangle, polygon, circle, ellipse, arc, etc., the library can draw curves, beziers (any degree), function plots, images and decorated text.

    jsDraw2DX

    The library is object-oriented and its coordinate system + scaling can all be configured.

    As it uses SVG, interactivity can be easily accomplished by manipulating the DOM.

    P.S. jsDraw2DX is built by the creators of jsDraw2D which draws any shapes using JavaScript.

  • Tags:
  • Filed under: Charts, Goodies, LGPL License
  • 0 Comments
  • JustGage is a JavaScript-based solution for generating good-looking animated gauges.

    It is built on top of Raphaël library for vector drawing, uses SVG, and it can scale-in-size perfectly.

    JavaScript Gauges - JustGage

    The style of the gauges can be customized with colors (single or gradient), width-height and labels being on/off.

    Also, it is possible to set min/max values, animation type on initial load and more.

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 0 Comments
  • Gauge.js is a slick script for creating animated gauges with JavaScript (Coffeescript) in HTML5 canvas.

    The script is standalone (jQuery is supported but not required) and doesn't use any images or CSS.

    Gauge.js

    It has 2 built-in interfaces (both looks very nice) and responds very well to value changes by animating the gauge.

    There are options to set the animation speed, default/min/max values, colors and more.

    To sum up, Gauge.js is a very handy script to visualize regularly changing (live) data.

    Gantti is an open source PHP class for generating Gantt charts on-the-fly.

    The charts created are pure HTML5-CSS3 with no JavaScript involved. The output looks very nice by default but can be customized with ease (with SASS stylesheet).

    It simply works by defining an array of start/end dates and calling a single function. Also, charts are cross browser (IE7+).

    PHP Gantt Class

  • Tags:
  • Filed under: Charts, Goodies, MIT License
  • 1 Comment
  • NVD3.js is an open source charting library that is built on top of the impressive D3.js.

    The library follows the practices an style of "how D3.js was built" which makes it comfortable for D3.js fans.

    Charts generated are interactive and can be easily improved or customized.

    Although it is in the early stages of its development, there are already multiple chart types including line, bubble, area and several combinations of them.

    NVD3.js

  • Tags:
  • Filed under: Charts, Goodies, Other License
  • 1 Comment
  • 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.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com