<style>
.icon {
    background: url("http://connect.garmin.com/api/activity-search/style/main/images/icons-activities.png") no-repeat scroll -9px -6px transparent;
    display: inline-block;
    height: 24px;
    margin: -6px 5px -2px 0;
    vertical-align: bottom;
    width: 24px;
}
.other {
    background-position: -9px -6px;
}
.running  {
    background-position: -9px -86px;
}
.cycling  {
    background-position: -9px -165px;
}
.walking {
    background-position: -9px -248px;
}
.hiking  {
    background-position: -9px -327px;
}
* {
    font-family: Verdana;    
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<?php
$json_data = file_get_contents('http://connect.garmin.com/proxy/userstats-service/statistics/monthly/team-garmin?ByParentType=true');
if ($json_data!=FALSE) {
    $json = json_decode($json_data,true);
    $run_distance = 0;
    $cycle_distance = 0;
    $chart_data_month = array();
    foreach ($json['userMetrics'] as $metrica) {
        $chart_data_month[$metrica['month']][0] = $metrica['month'];
        if (!array_key_exists('1', $chart_data_month[$metrica['month']])) $chart_data_month[$metrica['month']][1] = 0;
        if (!array_key_exists('2', $chart_data_month[$metrica['month']])) $chart_data_month[$metrica['month']][2] = 0;
        if ($metrica['activityType']['typeKey']=='running') {
            $run_distance = $run_distance + $metrica['totalDistance'];
            $chart_data_month[$metrica['month']][1] = round($metrica['totalDistance']/1000,2); 
        } elseif ($metrica['activityType']['typeKey']=='cycling') {
            $cycle_distance = $cycle_distance + $metrica['totalDistance'];
            $chart_data_month[$metrica['month']][2] = round($metrica['totalDistance']/1000,2); 
        }
    } 
    echo 'Current year: <span class="cycling icon"></span>'.round($cycle_distance/1000, 1).'km <span class="running icon"></span>'.round($run_distance/1000, 1).'km<br/>';
    
    $chart_data[] = array('Month', 'Running', 'Cycling');
    $chart_data = array_merge($chart_data, $chart_data_month);
    $json_chart_data = json_encode(array_values($chart_data));
    
?>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable(<?php echo $json_chart_data; ?>);

        var options = {
          title: 'Distance by month for user mrkrasser',
          hAxis: {title: 'Months', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

    <div id="chart_div" style="width: 650px; height: 300px;"></div>
<?php
} else {
    echo 'access restricted';
}
?>