Archive for April, 2015

8 Useful JavaScript Libraries to Build Interactive Charts

Presentations often involve a lot of data which needs to be conveyed to clients. But making others understand raw data might be a tad bit difficult as not everyone has the same understanding of data. One of the easiest ways to deal with this problem is to make them understand data with the help of charts.  JavaScript makes charts interesting by allowing users to add animations. With the help of JavaScript designers can now make charts interactive and playful. We’ve tried to gather some of the best JavaScript libraries to build interactive charts to make the job even easier for designers.

1. Chartist.js

Chartist JS is one of the most interesting JavaScript chart libraries available. Chartist JS uses SVG for the formation of the interactive charts. Apart from being interactive, another interesting feature of this library is its flexibility created by the use of CSS and JavaScript for styling and controlling. It offers users loads of animation options via the Chartist Animation API and SMIL and also allows easy customization with the help of SASS files.


2. Peity

Peity is an excellent jQuery plugin which allows the insertion of mini charts into the web page a designer creates. Whether it’s a line, bar, donut or pie chart, all a designer needs to do is create the element and specify the value and Peity will convert it into the desired chart. Initially the charts are available in small sizes, but now they can be customized to get the desired length, breadth and width. It also gives an option to play with the colors on the chart.

3. DC.js

As DC JS uses D3 libraries to create charts, so it allows designers to create charts which have the option of interacting with an audience. It is useful for creating charts for both desktop and mobile browsers. Whether it’s a simple or highly complex chart, DC JS does it with ultimate ease.


4. Chart.js

Charts.js allows the formation of various types of charts including line, donut, pie to bar, radar and polar area charts. Easy customization of size and color of the charts allows designers to make charts which suit their needs. The charts are also responsive and the library allows designers to use exactly the chart they need which prevents the clogging of a site with unnecessary charts.


5. C3.js

C3.js is based on D3.js libraries and has all the codes included so designers can just put the data in and there’s no need to write the codes. The various API s of C3 JS allow for easy customization of the charts which range from line charts to gauge charts. It uses CSS which allows designers to make their own customized charts.  All designers need to do is insert the specifications.


6. NVD3

This library built on D3 JS, NVD3 allows the reuse of charts. The library is composed of a set of templates which makes building charts whole lot easier.


7. Flot

This jQuery plugin comes with various kinds of charts which works well with HTML canvases. Flot allows panning and zooming, data point interaction and allows the switching on and off of certain aspects among others. There are also some plugins which designers can use at their convenience.


8. EChart

EChart is a JavaScript chart library which allows plotting of as many as 200,000 points. It allows easy extraction, integration and exchanging of data among various charts.


We hope these JavaScript libraries for making charts is a help. Among the huge array of JavaScript chart libraries, we’ve picked the best ones available to allow users to design with ease.

8 Awesome jQuery Zoom Plugins

When it comes to creating a portfolio or a business website that sells products, one of the important features required is zooming. Zooming to enlarge the product or image that has been shared on a site for better viewing by the customers. JQuery plugins provides the perfect application for zooming on websites. However, there are plenty of jQuery zoom plugins available in the market. Here are some of the best.

1. jmFullWall

This jQuery plugin helps in creating amazing portfolios which are in the form of puzzles or a collage. When users select a particular work, they can zoom in and zoom out as they please.


2. jQuery Gantt Chart

Using AJAX, jQuery Gantt Chart retrieves JSON data and forms Gantt Charts which helps users zoom in on a particular portion of the website.

3. Panzoom

Just like the name, Panzoom is one of those jQuery plugins which allows panning and zooming of selected objects or images. It is not rigid about the height and width but uses CSS transformation and matrix function to regulate the same and not only with images but also with videos, canvas and texts.


4. Smooth Products

Offering features like varying icon sizes, different image heights, lightweight framework, responsive image sizes and current thumbnail indicator, Smoothproducts is an easy to use image viewer which offers zooming effects.


5. EasyZoom

Adaptable with CSS and also supported on touch enabled devices, EasyZoom is a zooming and panning jQuery plugin which is easy to use and creates elegant images at the same time.


6. Snipe

Just as the name suggests, Snipe is jQuery plugin which allows users to magnify and view images just like the snipers do. The magnifier follows the movement of the mouse to zoom on the image or parts of it.


7. elevateZoom

ElevateZoom is a jQuery-based plugin THAT allows various kinds of zooming like window zooming, lens zooming and inner zooming facilities. It also allows tinting.


8. mlens

Offering various shaped and sized magnifying glasses, mlens is one of those jQuery plugins which makes the screation of magnifying glass applications super easy.


These are some of the best zooming plugins available. Let us know about more such jQuery plugins available by commenting.


15 Latest jQuery Media Plugins

Website technology has experienced a boom over the last five years with major enhancements including tools like jQuery which make web design easier with Plugins. Here are 15 jQuery plugins worth noting:

1. Bootstrap Video Player jQuery Plugin

This is a HTML5 video player which allows customization. It includes auto play options along with play and pause buttons, video tagging, hiding the control panel, timer, progress and volume bar. It’s customizable via CSS.


2. Yunero – jQuery Plugin for Displaying YouTube Video Feed

When it comes to displaying video feed for YouTube, Yunero tops the list. It plays the recent updates and allows a subscription box to attract more customers.

3. VenoBox

What sets VenoBox apart from other plugins is the fact that it calculates the max width of displayed images to keep track of their original size. It will work for images and videos.


4. PrettyPhoto – jQuery Lightbox Clone

An API which can be launched from anywhere, PrettyPhotos is a full-blown lightbox which plays videos and supports Ajax and YouTube along with images.


5. Youmax

Youmax is a plugin which allows designers to play and customize YouTube videos on their websites. It shows the latest updates for personal YouTube channels and allows designers to specify certain playlists.


6. OKVideo – jQuery Plugin for Full screen Background Videos

OKVideo allows designers to utilize YouTube and Vimeo videos as backgrounds on websites. It can be customized and helps in managing the videos according to needs and criteria like bandwidth, browser etc.


7. jPlayer – HTML5 Audio/Video for jQuery

A free plugin which allows designers to include audio and video feeds on their websites within minutes. It works on a JavaScript enabled media library.


8. YoxView – jQuery Image Viewer Plugin

This Plugin supports online content, images, videos and iframes. YoxView is Flash content supported and is similar to LightBox.  Those who are looking for something with a lot of features, YoxView is definitely one of the options with a variety of choices.


9. Socialist

Socialist brings together all the major social media feeds like Facebook, Twitter and Flickr and more and allows designers to create a wall of all of their favorite social websites.


10. Jqx Media Slider

When simplicity and functionality is the hallmark of Jqx. It’s a jQuery media slider which will allow designers to customize according to their needs.


11. jQuery Webcam Plugin

This wrapper plugin allows to connect various cameras with the help of JavaScript. The plugin provides a transparent layer for communication.


12. Ion.Sound

When it comes to rocking an event, music is a must and interesting sounds can add fun. Ion.Sound allows designers to play more than a dozen free sounds in a cross-browser platform. It’s a free jQuery plugin frequently used for playing sounds at events.


These are probably the most helpful jQuery media plugins available on the internet. Feel free to comment and let us know your favorite plugin. Also don’t forget to mention any other major plugin that we might have missed.