Categories
data visualisation Greps

5 DATA VIZ TIPS WITH HIGHCHARTS

Since starting my new job with Greps, I’ve spent a lot of time in Highcharts, a Javascript chart library, working on data visualisation. I’ve come to appreciate why it’s popular and used by the world’s biggest companies. 

First of all the results are of a very high quality, secondly there is endless opportunity for customisation and thirdly it comes with a very engaging community and thus a forum with a lot of code examples and ideas.

Rather than provide an exhaustive list of its features or diary my experiences, I thought I might offer some level of curation in a world of TLDR! Although the ability to code opens up more opportunities in the way you can use the library they do offer a non-code tool, cloud. Highcharts defaults to showing their examples in a tool called JSFiddle where you can play around with data. 

So here are five ways you can make some interesting visualisations for colleagues or customers!

  1. COLOUR

Colours can have a big influence on the way your data is interpreted. As in nature bright strong reds and yellows will draw attention whilst lighter, softer options can show and an order of importance to the data (*the zIndex feature helps determine order with overlapping series of data).

Gradients are in vogue in the design world currently and Highcharts offers a lot in this area. Without getting into too many details the basic code may look like this:

color: {

                    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },

                    stops: [

                        [0, ‘black’], // start

                        [1, ‘white’] // end

                    ]

                },

An advanced implementation may look like this:

If you need colour inspiration or need to pick a set of matching colours head to Adobe’s interactive tool here. 

  1. INTERACTIVITY

I don’t feel this is a vital feature for pure data communication but for a typical user the ability to move around the data on screen can be very memorable and perhaps lead to improved exposure of your data. This link will take you to the API details where some examples are provided such as the one below.

There are a couple use cases that come to mind for this feature. One would be when displaying multiple data sets and seeing how the relationships change in the way the user wants. Another case would be when using areas or ranges. As an example for Greps, what are the ranges of scores a junior developer may get?

Creating real utility in this feature requires a little customisation. Which data series will you turn on off the feature for or how much will you let them move the data around?

Design wise, use the scatter series type with a single data point and select an icon or image to create a ‘character dynamic’.

..

  1. TYPE

A bell curve or normal distribution series of data can provide terrific statistical insight. Rather than doing the math yourself, Highcharts provides built in functionality for outputting the curve based simply upon your data set. Is your data set skewed or what’s the variability of your data dispersion are valid questions to ask of your data. This is the official demo:

  1. SHARING

As mentioned earlier JS Fiddle is the ‘go to’ environment for working on your graphs. You can take any demo and ‘fork’ it into your own account for further customisation. In this way you can work very collaboratively with team mates whilst also providing some version control if you need to go back to a previous version. Just change the url to go back as each save alters the url of your project ie xyz/18/.

As the code is Javascript it is also very easy to create an html page and display it that way inside a script tag. Just remember to include the other scripts included in the HTML portion of your JS Fiddle. You can send these small docs to a teammate or customer for loading on their own machine.

An important thing to remember is to match the name of your display <div> with that of the chart name, typically ‘container’, as you see below.

As I’m working on multiple charts I’ve set up a webpage on a server which has a function to load different scripts (different charts) based on different buttons. I use document.getElementById(‘chart2’);

  1. ANIMATION

A UX rather than data communication feature, good animation of the component parts as the chart loads can signal quality. Here is a code snippet from one of my projects which applies the animation to all of the data. 2200 refers to the duration of the animation in seconds.

A use case for highlighting particular data could be the instant loading of secondary data followed by a very slow loading of the key data. Here is a bouncing animation of some data you might like!

Hopefully some of these ideas work well for you in your work, thanks for reading!

Leave a Reply