Visualizing data in Portable Infoboxes

Hello! My name is Flightmare and I'm not a member of Vanguard. I'm here to talk to you about some tricks that can make your infoboxes represent (dynamic) data in an alternate format. A nice feature of Portable Infoboxes is the ease of switching lay-out to horizontal mode to make a boring streak of numerical values a bit more interesting. But more so: "A picture is worth a thousand words", and perhaps it is worth a thousand data entries too.

I have been experimenting with charts in infoboxes, inspired by the stat representations of Pokémon X & Y, my results are included in the sections below.

Hexagonal statistics[]

Inspired by Pokémon, I first used this chart in a Pokémon infobox. Not long after, I started using this in more infoboxes such as this Fire Emblem infobox displayed on the right. Instead of placing these six data values in a horizontal lay-out, I chose to render them in a chart. This allows the reader to spot the key strengths (and weaknesses) of this character without having to read and interpret the data values. You could combine the best of both worlds by including the data values in the chart, but for this example I chose to keep it simple.

Historical data[]

Some data fits better in a graph. Perhaps you want to show some historical data of an object. In this example I use the price of one of our beloved Gabe-hats. This time, I wanted to try something different by working with dynamic data. This image on the left is not an actual dynamic infobox, it is a mere static mockup. But you can easily extend this idea by replacing my static lines with actual data fetched from one of Valve's API's, which I save for a later date and won't be discussed in this blog.

Getting technical[]

The key to these graphs and charts is the HTML5 canvas-element. At the time of writing, there is no native support in Portable Infoboxes. The navigation-tag however, gives us a great place for some aftermarket canvas inclusions by JavaScript.

<navigation>
<span id='stat-data' style='display:none' data-info='{"str": {{{str|10}}}, "def": {{{def|10}}}, "skill": {{{skill|10}}}, "mag": {{{mag|10}}}, "res": {{{res|10}}}, "spd": {{{spd|10}}}}'></span>
</navigation>

and

$('#stat-data').append('<canvas id="canvas" width="256" height="256" style="margin: 0 auto;" />');

By formatting the six data values of the hexagon in JSON-format, we can easily access pass them to our JavaScript code:

var stats = JSON.parse( $('#stat-data').attr('data-info') );

Canvas[]

The canvas is a HTML5 element of predefined dimensions that can relate to images. But instead of providing image-data, you use JavaScript to draw shapes and lines on this canvas. It's like using simplistic paint software.

Example of drawing a line on a 288 by 192 canvas, this was taken from the price history graph:

var ctx = canvas.getContext("2d");
 
    /*draw axes*/
    ctx.beginPath();
    ctx.moveTo(32,32);
    ctx.lineTo(32,160)
    ctx.lineTo(256,160);
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.stroke();

As you can see, all you have to do is inserting X and Y coördinates and a line is drawn. This can further be expanded by having coördinates set in variables that can be fetched from any source you can imagine (historical price data from Steam API). My hexagon example is drawn the same way the graph is, I just added some trigonometric maths to the equation.

Sources[]

You can find sources of both my infoboxes here:

Hexagonal statistics:
- Infobox template
- JavaScript source (math warning)
Historical graph:
- Infobox template
- JavaScript source (easy example)

Some code might still be in JavaScript review phase and may not display graphs until it is approved.