Using Highcharts as a JavaScript newbie

Highcharts is part of our curriculum in Information Visualization and Presentation, taught by Professor Marti Hearst at the UC Berkeley School of Information.

In the first couple of weeks of the course, we learned about human perception and good visualization practices, so we were excited to put our learnings into practice in our first coding assignment. The task was to visualize a small mock dataset using Highcharts with the limitation of only using up a 800 x 600 pixel frame.

The first step in our design process was to look at our data and see how we could most meaningfully visualize it. The data contained fake sales numbers for 9 different IoT devices from 2013 – 2016, the percentage of items returned and the number of days it takes to ship these items (for all 9 devices, this number remained the same across all years).

Once we felt we had understood the data, we first individually thought about the best way to visualize them. Using the share-multiple method [1] we sketched a few ideas on paper individually, and later jointly discussed the designs and decided what our final visualization should look like.

Only then did we look at the Highcharts demo library to see what could fit our needs. We really liked the area chart and decided to adapt our design a bit to incorporate it.

Getting started with Highcharts takes a bit of research if you are fairly new to programming in Javascript (like we were). Given the demo examples in JS Fiddle, however, you can always start with working code and go from there.

Our chart is actually made up of two individual charts. The top one is a basic area chart. Since we wanted grouped categories on our x-axis, we leveraged a plugin from Black Label and tweaked it a bit by adjusting some of the layout (we’re not big fans of borders around axis descriptions). The bottom one is a columns chart that’s flipped on its head. We aligned the two charts on the x-axis and got rid of all unnecessary labeling (chart noise) to achieve a very clean yet legible design.

This is our final result – hope you like it!

Tips for getting started with Highcharts

• Don’t get frustrated! A simple missing comma or bracket can make your entire visualization disappear. In these cases, the Javascript console in your browser is your best friend.
• Leverage the code in the demo versions and tinker with it in the JS Fiddle environment. Using demo data first and only importing your own data with CSV later allows you to focus on properly setting up your chart first.
• The Highcharts API documentation really takes the guesswork out of coding. Once we got to the fine-tuning part, it was super easy to look up the attributes we needed to change to get the look we wanted.
• Lastly, if you are hoping to make a reusable instance of Highcharts, it’s better not to hard-code data into it; instead, use jQuery loops to parse through a data file (typically a CSV) to insert data into the variables for series and categories.

Our code is uploaded here on Github for anyone to play with.
References
Dow SP, Fortuna J, Schwartz D, Altringer B, Schwartz DL, Klemmer SR. Prototyping dynamics: sharing multiple designs improves exploration, group rapport, and results. InDesign Thinking Research 2012 (pp. 47-70). Springer Berlin Heidelberg.