Up and Down

How many feet did the hikers cover in terms of elevation? The graph in Figure 8 reveals a steep descent on the first part of the hike and that the second part was all uphill. The difference in elevation was around 400 feet (or 120m, if you prefer).

Figure 8: The elevation difference covered during the hike.

The hike started at 9:30 in the morning and reached the lowest point at around 11:30, which was half-way; at 13:00, the hikers reached the starting point again. If you are wondering why our intrepid mountaineers took longer for the descent than the uphill stretch, well – even with trekking sticks, it isn't entirely easy to walk down a winding icy path.

Like Listing 4, Listing 5 uses the Template method to liven up a static HTML block in the DATA area with a dash of JavaScript and dynamically injected track data. You can simply redirect the output from the scripts to an HTML file on your hard disk and then open the file in your browser. The browser in turn sends the data to Google, and the Google server generates the required SVG wizardry to draw the graph.

The type definitions for the values injected here and the labels on the two axes in the colored graph are defined in lines 41 and 42 using addColumn() with Time of Day and Elevation. The former is a timeofday type, which is an array with elements for hours, minutes, and seconds. Elevation is a number type (i.e., a simple integer value). To record a data point at 09:04:33 with a value of 1993 feet above sea level, the script calls the following JavaScript code:

data.addRows([ [[9, 4, 33], 1993], [...]

To make sure the x-axis label neatly formats the full hour values, line 49 sets the format option to format: 'HH:mm'. Line 33 loads the JavaScript files required for the Google server's line charts.

Bar and pie charts are other possible options – you could easily load the required modules if needed. If you add the elevation-chart script to the end of the process chain, redirect the output into a file, and then point your browser at the file, you can achieve a visually attractive graphical representation that is, above all, useful for websites:

[...] hike-find | ./elevation-chart >ele.html

Because Google's JavaScript API does not like Unix seconds for charts, Listing 5 converts the date details from the GPS receiver – with some help from the CPAN DateTime module – to compliant dates with units of hours, minutes, and seconds. Armed with the CPAN toolbox, this kind of conversion is a quick and painless process. And all of this nerdy support makes hiking through the mountains twice the fun!