If you are into front-end development, you can’t escape from two things – jQuery and data visualization. jQuery is one of the most popular JavaScript libraries which is being used by more than 70% of top one million websites (source). And with the increasing amount of data, sooner or later you will have to get your hands dirty with making charts.

That’s why this article combines both – jQuery and creating charts. I am going to walk you through the process of creating beautiful charts using FusionCharts and its jQuery charts plugin. Although I am going to make a radar chart, you can use this process to make any other chart that is part of FusionCharts’ library of 90+ charts as well.

Creating a Radar Chart – 4 Step Process

I have divided the process of making our chart into four easy-to-follow steps. But before we begin, here is a quick look into what we are trying to make:

You can see the live version at this JSFiddle. To view the source-code, click the ‘Edit in JSFiddle’ button on top right of the screen.

Step-1: Get the Data

This is usually the first step for making any kind of chart or graph. For the purpose of this tutorial, I am going to to use dummy data representing allocated budget and actual spending of a company (Acme Inc.).

FusionCharts accepts both JSON and XML data formats. I am going to use JSON as it has now become the standard data exchange format of the web. First we need to define a category array which will contain all the categories under which budget was allocated. It will be an array of objects like this:

"categories": [{
  "category": [{
      "label": "Engineering"
    }, {
      "label": "Sales"
    }
    // more categories
  ]
}]

Next we need to put the data that we want to plot in dataset array. Inside dataset you can have one object for each series of data you want to plot. In our case we have two series – Allocated Budget and Actual Spend.

"dataset": [{
  "seriesname": "Allocated Budget",
  "data": [{
      "value": "10000"
    }, {
      "value": "16500"
    }
    // more data points for first series
  ]
}, {
  "seriesname": "Actual Spend",
  "data": [{
      "value": "8000"
    }, {
      "value": "9500"
    }
    // more data points for first series
  ]
}]

Step-2: Include Dependencies

Our project is dependent on following JavaScript files:

• jQuery – download it from here or include it via CDN.
• 3 FusionCharts JS files: fusioncharts.js, fusioncharts.charts.js and powercharts.js. You can download all the files from this page (see under JS folder).
• jQuery charts plugin – download it from plugin page.

<!-- jQuery -->
<script type="text/javascript" src="jquery.js"></script>

<!-- FusionCharts files-->
<script type="text/javascript" src="fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts.charts.js"></script>
<script type="text/javascript" src="powercharts.js"></script>

<!-- jQuery plugin -->
<script type="text/javascript" src="jquery-plugin.js"></script>

Step-3: Create and Select a Chart Container

HTML <div> elements work best for housing a chart. You should have a separate <div> container for each chart on you page. This is how we define a container and select it via jQuery’s $ selector:

HTML:

<div id="radar-chart">Radar chart will load here.</div>

Selecting it via jQuery:

$("#radar-chart")

Step-4: Insert the Chart

We are almost there. Now we just need to use the insertFusionCharts method provided by the plugin to insert the chart into our page. Here is how we do it (explanation after code snippet):

$("#radar-chart").insertFusionCharts({
  type: 'radar',
  width: '100%',
  height: '500',
  dataFormat: 'json',
  dataSource: {
    "chart": {
      "caption": "2015 Budget for Acme Inc.",
      "captionFontSize": "22",
      // more chart configuration options
    },
    "categories": [
      // explained in step-1
    ],
    "dataset": [
      // explained in step-1
    ]
  }
});

Most of the terms in the above code snippet are self-explanatory, so I will keep the description short and to the point:

• type sets the type of chart we want to plot.
• width and height define the dimension of the chart.
• dataFormat sets the format in which we will pass the data (json or xml).
• dataSource contains chart configuration options and the data we want to plot. Chart configuration options will go inside chart object and are technically known as chart attributes (in FusionCharts). dataset and categories arrays were covered in step-1.

Quick Note on Improving Design

If you notice the above code snippet carefully, you will see that our chart object only had two chart attributes, while the source code for the chart has more than 20!

What is happening here?

Well, in reality there are more than 100 different attributes you can use to customize a chart. Since it is not possible to cover everything, I am going to leave you with a resource that will be immensely helpful if you try to customize a chart.

Open this page and type the name of the chart you want to customize. It will open up complete list of attributes that can be used on that chart, along with their short descriptions and acceptable values. For example, to customize a radar chart you will reference radar chart’s page.

That’s it! If you were following along and did everything I described above, you must have got a working chart by now. If not, head over to the JSFiddle demo I created and take few mins to understand where you went wrong.

Have any questions? Leave a comment below and I will be glad to help!

Read More at Coding a Radar Chart in jQuery

jQuery recently completed ten years of active development. Furthermore, jQuery have also announced the release of jQuery 3.0 Beta, and you can start using it in your test projects right away.

jQuery 3.0 comes loaded with many new features. For instance, it has made changes to .show() and .hide() methods. Plus, jQuery.Deferred is now Promises/A+ compatible. Also, deprecated event aliases have been dropped. 

However, quite possibly the biggest change that jQuery 3.0 has to offer is that it has dropped support for older versions of Internet Explorer, namely, IE 6, 7 and 8. If you wish to use IE 6, 7 or 8 in your projects, you will have to stick with older versions of jQuery. Support for Internet Explorer 9 and 10, though, is still available in jQuery 3.0 Beta.

Also, the erstwhile jQuery Compat, which was announced alongwith jQuery 3.0 Alpha, has been dropped. After Microsoft announced that it was retiring Internet Explorer 8, 9 and 10, jQuery Compat was no longer meaningful since its primary purpose was to ensure backwards compatibility.

Developers can get jQuery 3.0 Beta directly from the jQuery CDN and start using it in their test projects. Since it is still in Beta, it is not advisable to use jQuery 3.0 Beta in your major projects.

For more info, you can refer to the jQuery 3.0 Beta announcement on the blog.

What do you think of jQuery 3.0 Beta? Share your views in the comments below.

Read More at jQuery 3.0 Beta is Now Available

Have you ever needed to find information regarding your jQuery scripts? It’s common practice to scour through code looking for a certain function that targets an element on the page, or find which callback method ran after an event.

Well thankfully there’s jQuery Audit which installs as a browser extension for Google Chrome.

The extension will append onto Chrome’s Developer Tools which allows you to analyze and delve into any jQuery source code with dynamic control. It’s completely open source on GitHub with some handy introductory guides for getting started.

Here’s a brief technical rundown of the plugin’s capabilities:

jQuery Audit creates a sidebar in the Elements panel containing jQuery delegated events, internal data, and more, as live DOM nodes, functions, and objects.

Find delegated events and their handlers.

Variables behave like objects in the “Sources panel – Scope Variables” sidebar. You can right-click on a function and goto “Show Function Definition”, or hover over a DOM node to highlight it in the document, as well as right-clicking it to “Reveal in Elements Panel”.

Generally speaking, this is one of the best tools for a new jQuery developer. You’ll be able to pull definitions for native jQuery methods while also studying how bits of code behave.

It’s especially helpful for breaking down jQuery plugins that you may not fully comprehend.

To get this in your browser just visit the Chrome Web Store and install jQuery Audit for free today!

Read More at jQuery Audit lets you analyze jQuery from Chrome Developer Tools

The jQuery repository jquer.in is perhaps the best place to find brand new jQuery plugins.

It’s a self-branded webapp with “a jQuery plugin a day”. You can find everything from menus to parallax features, media sliders and practically anything you could imagine.

Every developer loves to find a new tool or resource that enhances their workflow. Since jQuery is the most widely-accepted JS library, plugins are a big part of the jQuery framework.

This is why jquer.in is so powerful – it gives developers a chance to browse through all the options and pick their favorite.

Search the site by category or just scroll through the latest submissions. New jQuery plugins are indeed added very frequently and most of them are very high quality.

If you build a plugin yourself or find a cool resource then consider submitting a plugin for inclusion on the site.

You can keep up with new releases via RSS feed or on Twitter @jquer_in.

Read More at Top Repository for Free jQuery Plugins

There’s no shortage of custom plugins for building almost any type of interface for the web. JavaScript is the underlying factor among all web interfaces, but jQuery is perhaps the largest open source library to simplify the process.

Free lightbox plugins are voluminous and each offers a variety of unique features. These can range from dynamic button motions to custom mouse events or animation effects.

Simple Lightbox created by Andre Rinas is the perfect solution for mobile responsive websites.

The plugin offers touch-based support for swiping and closing new panels. It also offers keyboard progressions with arrow keys moving between different slides. The goal was to make a plugin that truly works effortlessly on mobile. Simple Lightbox is definitely one of the best choices for any mobile or responsive website.

You can find the plugin’s documentation on the demo page along with a few example code snippets. Simple Lightbox really is simple and it shouldn’t take much work to get it up & running smoothly.

Feel free to download a copy from the GitHub repo and see what you can build with this highly-extensible jQuery plugin.

Read More at Simple Lightbox is a Touch-Friendly Lightbox for jQuery Users

When it comes to form inputs there’s nothing quite like file upload fields. These are often the most difficult to style and also require the largest amount of backend server logic.

Over time these upload fields have been given much more TLC with custom CSS libraries and JavaScript code snippets. I’d like to share one whopper of a jQuery upload plugin named jQuery filer. It’s completely free and open source for use on any project.

This is meant to be a direct solution to the static HTML upload fields we’ve all grown accustomed to seeing around the web. jQuery Filer is much more dynamic with all the modern features of 21st centruy web development.

Take a peek at the jQuery Filer demo to see it in action. The plugin is loaded with custom features on the frontend + backend.

This list of features includes:

• Completely change File Input
• Add more files to input without uploading them
• Create thumbnails
• Append existing files to input for a preview
• Image paste from clipboard
• Drag & Drop functionality
• Custom callbacks

Web browser support is rather bleak except for the most modern options. But since this relies heavily on HTML5 it should be obvious that IE6-9 users will be in a rough situation.

You’ll notice in the documentation that there are dozens of custom options to add into your Filer function. This plugin can handle a lot of custom functionality from image thumbnails to custom UI templates for the uploader.

Take note that you will need a backend server language to handle the file uploads. This can be in the style of PHP, RoR, Python, .NET or even Node.js if you like sticking to JavaScript.

If you’re interested please check out the GitHub repo for documentation, download links and a live demo.

Read More at Free jQuery Filer HTML5 File Uploader Plugin

With so many options for jQuery slideshows it can be tough to know where to start. But since there are so many options, there really is no right or wrong answer. Each project comes with its own set of requirements and that are best complimented with certain plugins.

Smoothslides is a brand new slider on the market & 100% free open source. It was created by Kevin Thornbloom and has since garnered plenty of attention from developers.

Much like other similar jQuery plugins, Smoothslides is really easy to setup. Documentation is super easy to understand with plenty of room for additional functions.

Optional parameters include image captions, auto-play settings, pagination buttons & custom easing effects. Smoothslides offers knowledgeable developers a chance to get under the hood and really write their own unique custom settings – but it also functions very well straight out of the box.

To see it in action take a peek at the live demo page. This also includes code snippets to help you get this setup & running on your own website.

If you’d want to contribute or pull down a copy of Smoothslides you can visit the official GitHub repo. Also be sure to check out the Smoothslides demo page for a setup guide & advanced custom options.

Read More at Smoothslides Responsive jQuery Slideshow with Animations