Visualize Your Data And Speed Up Your Site With Dynamic Chart Libraries

Peter North
Lead Design Writer at SitePoint

In past articles, we’ve delved into dozens of aesthetic topics, but design work isn’t always purely aesthetic. Often, a truly “well-designed” solution is not only visually appealing, but flexible and efficient as well. There are instances when tunnel-visioning on visual appearance — and ignoring all other facets of a project — can leave you with a design that is beautiful to view but impractical to work with.

One example of this could be a high-heeled shoe; it may look stylish and appealing to the public, but to the woman who has to wear it, it’s painful on the feet, useless on soft ground, and makes running impossible. If you took a similar approach to your design projects, you might end up with a design that, just like a high-heeled shoe, is all fashion with very little function. To make sure that your next interface or landing page design doesn’t suffer the same fate as your poorly-chosen footwear, you’ll likely need a way to visualize data that strikes a careful balance between aesthetic appeal and practicality.

A designer’s first inclination might be to make a pixel-perfect graph or chart within Photoshop or Illustrator, but that solution entails constantly updating the charts for even the smallest change in the data, which leaves the method well short of being easy and practical. If your metrics change by just a few units or percentage points, you’ll likely have to open the editable file, make the desired changes, export, and upload the static image every time. That’s a lot of work for such miniscule changes. Worse, if your data is based on timelines or other ever-changing metrics, then your charts are literally becoming outdated on a daily basis. And finally, static images are ultimately not interactive, which makes poor use of your programming knowledge and your website’s interactive capabilities.

Pretty, Practical Charts and Graphs

So, rather than trading away every ounce of practicality (and interactivity) for immaculate infographics, it’s likely a better option to use a dynamic chart library. These chart libraries can display surprisingly sharp-looking graphs while still remaining flexible and easy to update, which makes them a great solution for both the designer and the average viewer. Some of these libraries rely on HTML5, which isn’t fully supported by older browsers, but those compatibility problems are vanishing quickly with each new browser update. Dynamic charts are also much smaller and lighter than large image files, which offers an additional upside in terms of site speed. The advantages of using dynamic chart libraries are growing while their potential problems are diminishing.

There are quite a few libraries to choose from, all of which have unique strengths and weaknesses.

HighCharts

3 different ways of viewing fruit consumption data using HighCharts

HighCharts is a JavaScript-based chart library with stylish graphs, excellent support, and impressive compatibility. You can count on their charts to function in every browser from the dreaded Internet Explorer 6 to the latest version of mobile Safari in iOS devices. Their charts also have subtle animations — the growing of bar graphs and the tracing of trend lines — that add to their visual appeal. The library is open-source, so the charts can be modified for the unique needs of any project. For non-commercial use, HighCharts is free, but for commercial projects it has a significant cost. For a single website, using HighCharts will only cost $80, but for a team of 10 developers to use the library in multiple projects, the price jumps to $2,000. If you employ HighCharts in an application, you’ll have to contact the makers to negotiate a deal in terms of the price and use of HighCharts.

PlotKit

Three charts rendered with PlotKit

PlotKit’s charts may not be as visually appealing as HighChart’s, but PlotKit is a 100% free in all cases. It also has a helpful quick-start guide to assist in getting your graphs up and running. PlotKit detects if the visitor’s browser supports <canvas> and makes use of the technology if it finds support. Otherwise, it has fallback methods for older browsers to achieve the same ends. PlotKit is not a standalone library; it relies on MochiKit to work properly, which may make the installation and maintenance slightly harder compared to a standalone library.

d3.js

A "sunburst" chart using d3.js

d3.js is a JavaScript-based graphing library that offers sharp aesthetics for its file size, as well as excellent value for its zero-dollar price tag. d3.js is an excellent choice for visualizing large amounts of complex data. The charts are colorful and clean, and the documentation is extensive and helpful. d3.js puts an emphasis on interactive, motion-based transitions and transformations, which could add impressive functionality to the charts and graphs within your web design. The makers of d3.js have tutorials to get new users started, as well as rich documentation for veterans.

FusionCharts

Nine different graphs using FusionCharts

Nine different graphs using FusionCharts

FusionCharts has an immense variety of chart types, all of which have a polished, professional appearance. They also have hundreds of features, and they offer extensions for software such as Powerpoint, Joomla, Dreamweaver, and Flex. But, these tools all come at a price, and licensing for FusionCharts can be as high as $10,000, making this option only viable for projects with a large budget an tremendous amounts of data to display.

Google Chart Tools

Just a few of Google's versatile chart tools

Google offers their own chart library in the form of Google Chart Tools. As you might expect from Google, the charts have an intuitive, familiar look and are as easy to set up as they are to view and analyze. Google Chart Tools makes great use of hover effects; hovering over a data type in the graph’s legend will often highlight the corresponding part of the chart or graph. Once you’ve included the necessary code snippets into your website, plotting (or updating) chart data is as easy as plugging in comma-separated text values, as you can see in this code example consisting of pizza slice consumption by topping:

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);

While your charts will rely on external files, those files are hosted on reliable Google servers, which minimizes your worries about outages or other technical problems with your charts.

Flot

Flot's charts are simple, clean, and clear

Flot is unique from the above chart libraries because it’s designed for JQuery, not just the JavaScript language. This could make it a top choice among JQuery experts who want to get up and over the learning curve in as little time as possible. As you might expect from a JQuery production, Flot does a great job of making the charts interactive. You can form crosshairs with the “X” and “Y” axes that follow the cursor, and you can also use simple forms to turn data on and off within your graph or chart. For even more interactivity, you can export dynamic graphs as static PNG or JPEG image files.

Conclusion

From the variety above, there is hopefully at least one chart library that will make your data-based design work both pretty and practical. They range from simple and free to powerful and expensive. Getting comfortable with a dynamic charting tool will likely save lots of time in the long term that would otherwise be spent making tiny, tedious corrections to static imagery.

Do you have any chart libraries or plotting tools to recommend? Or, are there advantages to static images that make image editors the best tools to visualize data?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://blog.workbox.com Eric Weidner

    Peter, I agree with you and try to build all our charts & graphs so they can be managed through a CMS rather than by generating a static image file.
    In addition to the libraries you mentioned above, WordPress folks can find free plugins, too. We created one specifically for pharma product pipelines, but the basic idea can be applied to all sorts of infographics.
    If your readers are interested, my blog post contains the script so folks can use it or edit it themselves: http://blog.workbox.com/pipeline-plugin-for-wordpress-by-workbox/
    Cheers!

  • http://www.csswebsite.net Johann Kratzik

    I’d like to mention jqPlot (http://www.jqplot.com), a free jQuery plugin that is as powerful as many commercial scripts. It is licensed under the GPL and MIT. I recommend to download it – the download package comes with lots of examples and a very detailed documentation.

  • Simon

    Thanks, its always nice to see new charting libraries. As a coldfusion developer I predominantly use the charting features coldfusion brings, but there are a couple in your article I will be trying in future projects.

  • http://www.mindxstudio.com Mrinal

    Using chart on website give visitor impact to stay on the site and check the analytic data. I use Google chat on my project and it convert very well. I will recommend you to use Google Chart Tools.

  • http://www.webhipster.com Vincent Young
    • Peter North

      Thanks for pointing it out, Vincent. Dojo looks like an excellent choice.