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.
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.
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.
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?
Peter is Chief Digital Officer of CuriosityStream, a multi-platform nonfiction streaming service by the founder of Discovery Communications (Discovery Channel, Science Channel, Animal Planet, etc.). Peter is also Co-Founder of True North, a management consulting firm and digital marketing agency with clientele that includes WebMD and Salesforce.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns