Bring data to life with dynamic graphs & charts
Graphs & Charts are often used by websites to display important and useful data, to support a policy or an issue, or to help tell a story. Many websites choose to create these graphs as a 'static' image (that does not change) crafted manually by a designer, in the same way they would create one for say a printed paper publication such as a book or a magazine. While this might seem an obvious way to create these, it is a rather poor and outdated way to create graphs & chart for websites - given many alternate ways of creating more 'dynamic' graphs and charts that websites allow that not only look far better, but are far more interesting for website users for example by being able animate and even be interactive.
Try hovering over the bar & pie chart below to see a great example...
Example created by Mike Bostock using the D3 Library
The advantages of using a more dynamic graph over a static image graph can include:
- Quicker to produce new ones (once setup)
- Easier to update an existing graph or chart with new data
- Dynamic properties such as animation and interaction making them more engaging
- The ability to connect with live data sources to display up to date information automatically
- Graphs that look better, clearer and crisper over a range of different devices
Quicker to make, quicker to update
Say for example you had a graph that showed particular annual statistics that needed to be updated each year. Using the image approach, each year you would need to get a designer to create a new version of the graph as an image. To ensure that the graph had the same look, most likely you would need to ensure the designer had access to the same files (i.e. photoshop files) that were most likely last used a year ago. Without these, it would be even more work to create the same kind of graph again from scratch. With a dynamic graph, all you would need to do is simply change the data values (e.g. stored in a file as numbers) and perhaps the labels - and you would have next years graph, with exactly the same look and feel as the previous years graph but with the latest data. Not only would no extra design work be required – but simply updating the data and labels would most likely take far less time to do.
Bringing graphs to life !
Dynamic graphs can also do things static image graphs could not even come close to. They can animate, and be interactive in response to a website users actions. For example, using a simple graph library such as Flot can allow a user to click on data points to show values. A more sophisticated graph library such as D3 can allow incredibly rich interaction between a user and a graph.
There are many sources of live data that are freely available on the web, and it is of course also possible to create live data sources for your own data. Dynamic graphs can connect with these live sources to display compelling graphs that show the latest information updated - to the second. Even the simplest graph libraries such as Flot allow you to do this.
Looking good on screens big and small
Modern websites need to look good not only on desktops, but a range of devices such as tablets and mobiles. Website graphs made from images tend to perform poorly across a range of devices. Either they tend to be too big, which means while they may look crisp on both big and small devices – they can often be too big for smaller devices which means users are more likely to be left waiting longer for your image graph to load. Similarly, if graph images are too small – when they are stretched out on bigger displays such as desktop computers they tend to get distorted with text and graph lines looking blurry and pixelated. In fact this is an issue for all website images, generally referred to as the 'Responsive images issue' which i've discussed in an earlier article. Suffice to say, many dynamic graph libraries are able to address this issue and create graphs that look and work far better across a range of device screen sizes and resolutions than a static image graph ever could.
Conclusion
In this article we have seen the many advantages of using dynamic graphs rather than static images for graphs on websites. While the legacy of the printed media world leads some to still create graphs for websites in the old fashioned way using images – the advantages of using modern dynamic graphs are many as they help bring your data to life. Dynamic graphs are compelling and truly interactive features on your website which help you communicate the information you want to share, and support the messages and stories that you are trying to tell on your website - in a far more effective way.
In my next article in this series, we will look at some of the simplest dynamic graph tools – and see how even these simple dynamic graphs can make your data far more exciting and engaging than a static image graph ever could !
