Tables & Charts pt.II

Charts:

The charts were a little harder. I wanted to include them again to aid readability and ease of use for the site. You could instantly get quite a large amount of information just by glancing at a chart and the easiest chart to read is the pie chart.

In HTML5 there is a new <canvas> tag and within that the ability to create a pie chart. I however, found this to be clunky and annoying. It didn't work or look like I wanted it too and when I finally managed to make it look and sit where I wanted I couldn't stack more than one next to each other or a second would simply not appear. This was frustrating. I scoured the web and copied pie charts from far and wide however, I had the same issue with all of them. I eventually however, found chart.js:

Source: http://www.chartjs.org

This was absolutely perfect for me. The website was so professionally designed that I had very high hopes that the product would be great and it was. It is so easy to use. You simply download the JavaScript file from the site and link it in the head of your HTML document. Once this is done you can just call them in in the HTML:

Here I have simply called one using an id within a <canvas> tag (the code is copy and pasted from their site). I then specified a value for each segment (and created a few more segments to fully encompass the amount of oceans I wanted to display) and a colour for each segment. I could then go into the JavaScript file and specify a vast array of options from animation type/speed to stroke and other basic styling. It was immensely powerful and allowed me to stack one ext to the other as well which was perfect. I struggled a little with positioning and getting a key for them however. I positioned them with absolute positioning which wasn't ideal as that makes them not great for responsiveness. And I couldn't get a key to display. To combat this I made another table to act as a key.

HTML:

CSS:

Final product:

It is quite a sloppy fix however, it works very well and is rock solid at a desktop screen size. I may have to rethink it at smaller sizes but for now this will do perfectly.