In this article, I will show you some of the best JavaScript libraries for graphs / charts. These libraries will help you create beautiful and customisable charts for your future projects.

While most of the libraries are free and open source, some of them provide a paid version with additional features.

D3.js — Data-Driven Documents

When we think of charting today, D3.js is the first name that comes up. Being an open source project, D3.js definitely brings many powerful features that were missing in most of the existing libraries. Features like "Enter and Exit", powerful transitions and syntax familiarity with jQuery or Prototype make it one the best JavaScript libraries for charting. Charts in D3.js are rendered via HTML, SVG and CSS.

Unlike many other JavaScript libraries, D3.js doesn't ship with any pre-built charts out of the box. However, you can look at the list of graphs built with D3.js to get an overview.

D3.js doesn't work well with older browsers like IE8. You can always use plugins like aight plugin for cross browser compatibility.

Google Charts

Google charts also comes with various customization options that help in changing the look of the graph. Charts are rendered using HTML5/SVG to provide cross-browser compatibility and cross platform portability to iPhones, iPads, and Android. It also includes VML for supporting older IE versions.

ChartJS

]]>http://www.sitepoint.com/15-best-javascript-charting-libraries/feed/10Understanding Bootstrap’s Grid Systemhttp://www.sitepoint.com/understanding-bootstrap-grid-system/
http://www.sitepoint.com/understanding-bootstrap-grid-system/#commentsTue, 11 Nov 2014 19:00:12 +0000http://www.sitepoint.com/?p=94447Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap’s CSS, I explained how Bootstrap functions as a responsive framework. In this article, we will discuss a […]

]]>http://www.sitepoint.com/understanding-bootstrap-grid-system/feed/14Responsive Web Design Tips from Bootstrap’s CSShttp://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/#commentsTue, 09 Sep 2014 18:00:21 +0000http://www.sitepoint.com/?p=89899With the release of version 3, Bootstrap has gone mobile first, building on its already responsive base. What kinds of things does Bootstrap include in its CSS to help with this? Let’s examine a few things and gain some insight that might help us in our own custom projects. Defining Proper Media Queries Bootstrap has […]

]]>http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/feed/16Google Launches Web Starter Kit: A Multi-Device Boilerplate and Toolkithttp://www.sitepoint.com/google-launches-web-starter-kit/
http://www.sitepoint.com/google-launches-web-starter-kit/#commentsMon, 23 Jun 2014 18:00:30 +0000http://www.sitepoint.com/?p=83965Google announced a big surprise just a few days ahead of the Google I/O Conference in San Fransisco. They have launched a brand new tool called Web Starter Kit, a boilerplate with powerful tools to quickly start your web development projects.

Maybe Google wants the Google I/O attendees to familiarize themselves with the tool before the event starts. Whatever the case, the Web Starter Kit is a powerful tool packed with many modern third-party tools to help you start writing powerful code in minutes.

Google has previously released many web foundation tutorials showcasing some of the best practices in modern web development. With this release, they have given away a set of boilerplate templates and tools that focuses more on performance issues and multi-screen development. Google seems to fill the void that most of today’s front-end frameworks have long ignored — web app performance and optimization!

Web Starter Kit, though in beta, comes with features that include:

Multi-device responsive boilerplate

Cross-device synchronisation

Live browser reload

Code minification

Built-in HTTP Server

PageSpeed Insights

Sass support

… and more. To make the kit work, your system should have NodeJS, Ruby, and Ruby Sass Gem installed. Installing Gulp is optional.

The kit also includes a multi-screen grid system inspired by frameworks like Bootstrap and Zurb’s Foundation. But unlike such frameworks, this kit doesn’t offer any UI elements and components. Google engineer Addy Osmani said on Hacker news that they don’t intend to compete with Bootstrap in terms of UI components.

]]>http://www.sitepoint.com/google-launches-web-starter-kit/feed/13A Tutorial on Getting Started with Hoodiehttp://www.sitepoint.com/tutorial-getting-started-hoodie/
http://www.sitepoint.com/tutorial-getting-started-hoodie/#commentsFri, 13 Jun 2014 18:30:18 +0000http://www.sitepoint.com/?p=83250JavaScript has come a long way and Hoodie takes it further. It is one of the coolest web development tools that I have come across in recent times. It helps with building web apps without worrying about backend development, databases and servers. Imagine that! Looks like someone has seriously made our lives easier.

With Hoodie, you create web applications built purely with front end technologies like HTML, CSS and JavaScript while allowing for data manipulation without worrying about server side coding. It gives you features such as user signup, sign-in, reset password, data storing and retrieval and email support. All can be used by writing a few lines of code.

Hoodie is best suited for creating mobile apps using the front end technologies mentioned above. It utilises Offline First and noBackend architecture that enhances the app’s performance. Hoodie follows Document-Based storage using CouchDB for storing data. Whenever data needs to be updated, Hoodie stores it locally first and then syncs with a central server on a best effort basis.

In this article, we will install and run Hoodie on our local computer. We will create and analyze a simple Hoodie application. Finally, we will create a functional web app using Hoodie’s important features.

Installing Hoodie

Hoodie supports all major platforms like OSX, Linux and Windows. In this tutorial, I will show how to install Hoodie on a Mac. For other platforms you can follow the installation documentation.

To install Hoodie on OSX, you need a few tools pre-installed namely Homebrew, NodeJS, git and CouchDB. Let’s get them one by one.

Start the terminal and type the following command.

[code language="bash"]$ brew update[/code]

This command will update the Homebrew to its latest version. Next, we will install git using the following command.

[code language="bash"]$ brew install git[/code]

Now we will download and install NodeJS using the following command:

[code language="bash"]$ brew install node[/code]

It’s time to download and install CouchDb, the database which Hoodie uses for data handling.

[code language="bash"]$ brew install couchdb[/code]

After installing all the above tools, we will use Node’s Package Manager to download and install Hoodie.

[code language="bash"]$ npm install -g hoodie-cli[/code]

You can now verify your hoodie installation by typing hoodie in the terminal. A graphical Hoodie logo along with other help options will be displayed.

]]>http://www.sitepoint.com/tutorial-getting-started-hoodie/feed/9Why I Love Bootstrap, and Why You Should Toohttp://www.sitepoint.com/why-i-love-bootstrap-you-should/
http://www.sitepoint.com/why-i-love-bootstrap-you-should/#commentsThu, 12 Jun 2014 20:00:50 +0000http://www.sitepoint.com/?p=83140Bootstrap, today, stands as one of the most popular open source front-end frameworks on the Web. Since its official release in 2011, it has undergone several changes, and it’s now one of the most stable and responsive frameworks available. It’s loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can get started with Bootstrap.

Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Normalize.css which helps in clearing browser resets. It also provides great typography. Even the basic HTML form elements like checkboxes, radio buttons, select options, etc. have been restyled to give a modern look. I use Bootstrap because it saves me a considerable amount of effort.

Today’s websites should be modern, sleek, responsive and mobile first. Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:

Reason 1: The powerful grid system

Bootstrap has one of the best responsive, mobile first grid systems out there. It’s easy to use and flexible. It helps in scaling a single website design from the smallest mobile device to high definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.

Reason 2: Rapid Development

Bootstrap comes complete with many reusable CSS and JavaScript components that can help to achieve the functionality needed in almost in any kind of website. You just have to use some HTML markup to plug them into your template, with no need to spend huge amounts of time time writing complex CSS and JavaScript code. Plus, these components are all responsive, too!

]]>http://www.sitepoint.com/why-i-love-bootstrap-you-should/feed/23Ratchet’s Push.Js – Prototyping Mobile Apps with Multiple Screenshttp://www.sitepoint.com/ratchets-push-js-prototyping-mobile-apps-multiple-screens/
http://www.sitepoint.com/ratchets-push-js-prototyping-mobile-apps-multiple-screens/#commentsWed, 21 May 2014 18:30:37 +0000http://www.sitepoint.com/?p=81438Ratchet is a framework for building mobile applications and prototypes quickly using simple HTML, CSS and JS components. In my last post, Ratchet – Prototyping Mobile Apps Easily, we looked at steps for getting started with Ratchet framework. We also looked at how to place important components like Title bar, Table views, Chevrons, Toggles and […]

]]>http://www.sitepoint.com/ratchets-push-js-prototyping-mobile-apps-multiple-screens/feed/13Prototype Mobile Apps Easily with Ratchethttp://www.sitepoint.com/prototype-mobile-apps-easily-ratchet/
http://www.sitepoint.com/prototype-mobile-apps-easily-ratchet/#commentsMon, 12 May 2014 18:30:27 +0000http://www.sitepoint.com/?p=81032It is difficult to prototype native Mobile applications using responsive web design technologies as they do not simulate native behavior. Developers often need to write tons of JavaScript to create single page architecture or use technologies such as Angular.js and Ember.js. There were a few developers who took this issue seriously and started working on […]

]]>http://www.sitepoint.com/prototype-mobile-apps-easily-ratchet/feed/8Creating CSS Animations Using Move.jshttp://www.sitepoint.com/creating-css-animations-using-move-js/
http://www.sitepoint.com/creating-css-animations-using-move-js/#commentsThu, 20 Mar 2014 17:00:00 +0000http://www.sitepoint.com/?p=78194CSS3 transitions and animations are currently the preferred method for creating lightweight animations on websites. Unfortunately, many developers find their syntax to be complex and confusing. If this sounds like you, Move.js may be the perfect solution for you. Move.js is a simple JavaScript library that creates CSS3 animations using simple functions. This tutorial explores the basics of Move.js, and provides a live demo of Move in action.

]]>http://www.sitepoint.com/creating-css-animations-using-move-js/feed/6Understanding Bootstrap Modalshttp://www.sitepoint.com/understanding-bootstrap-modals/
http://www.sitepoint.com/understanding-bootstrap-modals/#commentsTue, 18 Feb 2014 16:00:03 +0000http://www.sitepoint.com/?p=76775In my previous tutorial, I explained how powerful Bootstrap 3 is for a novice designers. It ships with some of the best ready-to-use JavaScript and jQuery components and plugins. Recently the framework got a major update with version 3.1.0, bringing several important and necessary changes to the framework. In this tutorial we will be talking […]