Being able to dynamically present charts that change or animate as they appear grab attention and give life to regular reports. There are many charting libraries and solutions out there. What you use depends on performance considerations for your page or site, technical requirements, and what behaviors and other animations you will be using. Existing licensing or familiarity could also play a par. Today I am going to go over several good options for dynamic charts for infographics and landing pages. I’ll introduce you to a few charting libraries and a couple simpler solutions.

Things to Consider

First take some time to map out requirements and goals to help you choose. There are many libraries and tool kits out there, but they vary in functionality and features.

  1. Do you have a lot of data to share (how / where is it coming from – DB, text file, etc)
  2. What type of connection and devices will your audience have?
  3. How much other interactive will there be?
  4. How will adding charts affect the load time of the page and other behaviors like scrolling
  5. Do you have an existing license with a tool?
  6. What is the goal of having dynamic charts?
  7. Have you white boarded or sketched out the behaviors of the page and objects?
  8. Do you need fall back for older browsers like IE8?

 

What to Look for in a Modern Charting Tool

  • HTML/CSS/SVG 
  • Responsive sizing or support for media queries
  • Polyfil if you need fallback
  • JSON or other library support
  • Data sources – database hooks, CSV files, or other?

Charting Libraries and Tools

Be warned that while most of the libraries listed here are open source, some do charge for commercial licenses or require purchase to use. That said, you should get what you pay for in power or ease of use.

  1. D3.js framework – downside: a steep learning curve. There are multiple charting libraries built on top of it, which should tell you something about the complexity.
    1. Ember charts – a charting tool built with Ember and D3.js
    2. N3 charts (D3 plus Angular JS) – Great if you are already using Angular JS
    3. UV charts – Many many options, 12 out of box chart types. It is supposed to be very easy to use.
    4. Plot.ly – scientific charting. Histograms, etc. Great if you need to do a lot of data heavy lifting and feed dashboards. 
  2. Google charts. – When I was researching for an infographic project, there was a lot of open source data being served by Google charts. I need to do more exploring with this, but if you are on a budget it could be worth a look. 
  3. ChartJS – If you only need a few chart types this is a good choice for responsive projects. 
  4. Highcharts JS  – Used by enterprise. Open source. Can be a pain if you arent’ importing data from a DB. Need a developer or savvy web designer to set up. Commercial license. Lots of animations. I used this for a project but had to poke around quite a bit to get the right info. Documentation is very technical and sparse in places. 
  5. CSS animations – more a build your own. Good for JS fallback and wher performance is critical and you are using a lot of the same type of chart on the same page. 
  6. Flot – Supports many chart types. Good if you are using JQuery already.
  7. Chartist – Nice animations and fall back. 

Next week I’ll be taking a more in depth look at several of the libraries. What is your biggest challenge when it comes to adding interactive charts to your projects?