Get the latest Javascript Graphing Libraries

Get notified of new javascript graphing libraries, tutorials, and tools. When new ones come out, we'll send an email directly to your inbox!

First Name | Email:

No Thanks

Javsacript Graphing Libraries

Interactive Charts & Graphs

Graphs and Charts are a wonderful way to display, explain, understand, and analyze data. They provide not only attractive imagery for your design, but explanations of, at times complicated, information and relationships.

Websites provide the opportunity to create interactive graphs that respond to your users, as opposed to simple image graphs on paper. Here are some JavaScript libraries for creating both traditional line, bar, radar, polar, pie, doughnut, area, and polar area graphs, as well as timelines and node graphs.

Chart.js

Pie and Polar Area Charts created with Chart.js JavaScript Library

Chart.js is a JavaScript graphing library designed for adding dynamic graphs to websites quickly and easily. The library supports creating: line charts, bar charts, radar, charts, polar charts, pie charts, and doughnut charts.

Chart.js creates graphs on websites using the HTML5 canvas element. The graphs can be animated and interactive, supporting tool tips and other elements. Continue reading...

Chart.js Tutorials: Creating Line, Bar, Radar, Polar, Pie, and Doughnut Charts

Easily create stunning animated charts with Chart.js

Easily create stunning animated charts with Chart.js

A well-explained tutorial, this article details how to make a line chart, a pie chart, and a bar chart with Chart.js. The code is clean and understandable, and the text does a good job of explaining what the code does.

Build a Dynamic Dashboard With ChartJS

Build a Dynamic Dashboard With ChartJS

This Chart.js tutorial is detailed and well explained. It shows how to create a doughnut graph, a line graph, and a radar graph, as well as explains a bit about how Chart.js works. This tutorial does a good job of explaining the code used additional to Chart.js, such as defining labels for the doughnut graph.

Chart.js library simplifies adding charts to web applications

Chart.js library simplifies adding charts to web applications

This article introduces Chart.js and briefly explains how to create a simple bar graph. It also gives a brief explanation of how Chart.js works and how to add it to a webpage.

Getting started with Chart.js

Getting started with Chart.js

This relatively straightforward tutorial explains a practical example of how Chart.js can be used. The tutorial, from June 2013, creates a simple graph of website rankings from Alexa. The code is bulky, but it is understandable and builds a useful graph.

Read more Chart.js Tutorials

Chartist.js

Line, Bar, Pie, and Doughnut Charts created with Chartist.js JavaScript Library

Chartist.js is a JavaScript-based graphing library for websites. The library creates graphs real-time on websites with scalable vector graphics (SVG), styles them with CSS including CSS animations and transitions, and gives direct control of the graphs with JavaScript.

Because graphs built by Chartist.js are created using vectors, they are fully responsive to your visitors' screen sizes and will automatically match your visitors' screen resolution. Continue reading...

Chartist.js Tutorials: Creating Line, Bar, Scatter, and Pie Charts

Chartist - Examples

Chartist - Examples

This pages shows live demos for how to create charts with Chartist.js, providing javascript code and brief explanations for the end result. The examples include line charts, scatter charts, area charts, bar charts, and pie charts.

Chartist - Getting started

Chartist - Getting started

This is the official tutorial for Chartist.js. It explains how to load the library, how to create the HTML structure for graphs and charts in the page, and the javascript for creating charts. The tutorial is easy to follow and quite understandable, with clear explanations for potential developers about how the library works.

Read more Chartist.js Tutorials

DC.js

Interactive Line, Bar, and Doughnut Charts created with DC.js JavaScript Library

DC.js is a JavaScript library for creating Multi-Dimensional charts and graphs.

DC.js is built using d3.js, a JavaScript 3-dimensional graphing and rendering library, and crossfilter.js, a library used to examine and process large, multi-variate data sets. Continue reading...

DC.js Tutorials: Creating Dynamic and Interactive Line, Bar and Doughnut Charts

Coloring dc.js Stacked Bar Charts

Coloring dc.js Stacked Bar Charts

This tutorial shows how to create a single stacked-bar graph using DC.js. It shows how to color the data components of the graph both using javsacript and using CSS3 nth-child selectors.

Making Dashboards with Dc.js

Making Dashboards with Dc.js

This in-depth tutorial demonstrates how to use DC.js to create a web-based dashboard, similar to many intranet sites. Since DC.js is inherently a complex and highly-featured library, the tutorial is long and intricate. However, the tutorial does a great job of explaining how the page in the tutorial is built and what the code does. It shows how to add the code and data, as well as how to customize the appearance of the graphs.

Read more DC.js Tutorials

Morris.js

Line, Bar, and Doughnut Charts created with Morris.js JavaScript Library

Morris.js is a graphing library designed for creating line graphs, bar graphs, area graphs, and doughnut graphs. It is designed to help you build charts and graphs quickly and efficiently. Morris.js supports both adding data through Google spreadsheets, creating graphs similar in appearance to Google Charts, and directly adding data through JavaScript on your website. Continue reading...

Morris.js Tutorials: Creating Line and Bar Charts

Creating bar graphs with AJAX and Morris library

Creating bar graphs with AJAX and Morris library

This tutorial shows how to create charts with content dynamically loaded using AJAX. It shows how to write the AJAX, set up the charts with Morris.js, and how to use the data with the charts.

Creating Line Chart Using Morris.js

Creating Line Chart Using Morris.js

This tutorial shows how to create line charts with Morris.js. The article divides the process into components: first including the dependencies, then the HTML/PHP, next the CSS, then the javascript to create the charts, and finally the JSON-structured data. The tutorial is well structured and the code is briefly explained.

Read more Morris.js Tutorials

Timeline.js

Website Timeline Example with Timeline.js JavaScript Library

Timeline.js helps you create beautiful, interactive, easy-to-use timelines for your website. This library will help you tell, illustrate, or support stories that are strongly based on time with a series of events.

Timeline.js allows you to easily add information quickly from a number of sources, including tweets from Twitter, videos from YouTube and Vimeo, images from Flickr, maps and location information from Google Maps, and audio from SoundCloud. The library will also help you add text from Wikipedia, as well as information from Vine and Dailymotion. Continue reading...

Timeline.js Tutorials: Creating Beautiful, Interactive Timelines

TimelineJS - Build Beautiful Timelines

TimelineJS - Build Beautiful Timelines

This tutorial gives examples of code to use to build a timeline with Timeline.js. It shows how to build the timeline with JSON-formatted data data, and how to add the timeline into a HTML page.

Customized timeline with Timeline.js

Customized timeline with Timeline.js

This introductory tutorial shows how to add and embed a timeline on a webpage with Timeline.js. It briefly explains the directory structure of the Timeline.js library, and how to use it when hosted on your web server.

Timeline Portfolio

Timeline Portfolio

This tutorial explains in detail how to create a timeline using Timeline.js. Aimed for people creating a timeline for their work or experience, it explains the HTML structure of a page using the library, then details how to customize the timeline's appearance with CSS.

Create stunning timelines with TimelineJS

Create stunning timelines with TimelineJS

This in-depth tutorial explains how to set up a timeline with Timeline.js. It briefly explains how to obtain the library and add it to a website, then details step-by-step how to add content to the timeline using JSON-structured data, loaded in-page using javascript.

Read more Timeline.js Tutorials

Vivagraph.js

Vivagraph.js Node Graph Example with Yasiv

Vivagraph.js is a graphing JavaScript library designed for building network and node-based graphs. It supports different rendering formats for the graphs, including WebGL, SVG, and CSS-based layouts. This library is designed to support both small graphs with only a few nodes, to large graphs with hundreds or thousands. Continue reading...

Vivagraph.js Tutorials: Creating Node Network Graphs

Vivagraph Tutorials

Vivagraph Tutorials

These official examples show how to create node graphs with VivaGraph.js. Starting with creating a simple graph, then adding nodes and interactivity, these examples create a helpful starting point for working with Vivagraph.js

Visualizing the news with Vivagraph.js

Visualizing the news with Vivagraph.js

This tutorial shows how to create an interactive node-based connection graphs using Vivagraph.js. It combines Vivagraph.js with a number of libraries, creating an interesting search-application. The tutorial is a bit complex and documentation is a bit sparse, but the idea is interesting and creates a useful, practical application.

Read more VivaGraph.js Tutorials

Need more Javascript Graphing Libraries?

Need more tools for creating graphs on websites using Javascript? Sign up and we'll send you an email when we find them to let you know!

First Name | Email:

No Thanks

Website Crawlers

Looking to download a lot of data? Need to find the exact information in a gigantic internet haystack that you are looking for? These resources are designed to help you build spiders, crawlers, and other tools to obtain data from the internet.

Website Crawler Tutorials

Build website spiders and crawlers using: Python | PHP | Java | Node.js | Scrapy | Cheerio | Apache Nutch | MongoDB | PhantomJS.

Website Tools

These tools are designed to help you build your website, add content, and improve your website's appearance.

Javascript Graphing Libraries

Add charts & graphs to your website using: Chart.js | Chartist.js | DC.js | Morris.js | Timeline.js | Vivagraph.js

Node.js Tutorials

How to install, program for, and implement Node.js for scalable and easy server-side Javascript for quick AJAX-style processing.

Parallax Website Design Techniques

Create websites with parallax scrolling using: jQuery.js | Stellar.js | Skrollr.js | CSS

Reveal.js

Infininite Scrolling Web Design

Build an endless scrolling website, loading new content when your visitors reach the end of your webpage.

Infinite Scroll Tutorials

Tutorials about how to build an infinite scrolling website, including: WordPress, Drupal, Blogger, jQuery, Jetpack, Masonry, Isotope, and the Infinite-Scroll plugin for WordPress.

Infinite Scroll, Card Design Tutorial

How to build an infinite scrolling website with card design using Masonry, AJAX, JavaScript, PHP, and MySQL.