{"id":11787,"date":"2017-03-07T01:45:25","date_gmt":"2017-03-07T00:45:25","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=11787"},"modified":"2026-01-12T09:16:28","modified_gmt":"2026-01-12T09:16:28","slug":"using-highcharts-javascript-newbie","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/using-highcharts-javascript-newbie\/","title":{"rendered":"Using Highcharts as a JavaScript newbie"},"content":{"rendered":"

Highcharts is part of our curriculum in Information Visualization and Presentation, taught by Professor Marti Hearst at the UC Berkeley School of Information.<\/p>\n

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.<\/p>\n

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).<\/p>\n

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.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

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.<\/p>\n

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<\/a>, however, you can always start with working code and go from there.<\/p>\n

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<\/a> and tweaked it a bit by adjusting some of the layout (we\u2019re not big fans of borders around axis descriptions). The bottom one is a columns chart that\u2019s 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.<\/p>\n

This is our final result – hope you like it!<\/p>\n

 <\/p>\n