#!/usr/local/bin/perl -w use strict; use Template; use DateTime; use YAML qw( Load ); my $tmpl = Template->new; my $data = join "", <DATA>; my $points = Load( join "", <> ); my $tracks = ""; for my $point ( @$points ) { my $dt = DateTime->from_epoch( epoch => $point->{ time } ); $dt->set_time_zone( "local" ); $tracks .= ", " if length $tracks; $tracks .= sprintf "[[%d, %d, %d], %d]", $dt->hour, $dt->minute, $dt->second, int( $point->{ ele } ); } $tmpl->process( \$data, { tracks => $tracks } ) or die $tmpl->error(); __DATA__ <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Elevation'); data.addRows([ [% tracks %] ] ); var options = { hAxis: { title: 'Time', format: 'HH:mm', gridlines: {count: 10} }, vAxis: { title: 'Elevation (feet)' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>