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

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

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

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

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

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

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 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?