Rooftop Graph

by Sam Fereday

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="chart"></canvas>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#chart {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

JavaScript

// Parsed json from server http://runner.shoutdigital.com/stats?key=6jYz1MblX6OU
var raw = {
  "gamesPlayed": 2147,
  "roofsJumped": 45146,
  "jumpsJumped": 60019,
  "presentsCaught": 44522,
  "birdsJumpedOn": 585,
  "tranquilityReached": 7798
};

// Skeleton for polar chart
var data = {
  datasets: [{
    data: [],
    backgroundColor: [],
    label: 'Rooftop Dataset' // for legend
  }],
  labels: []
};

function make(ctx) {

  let currentinc = 0;

  // Parse data from json and add to skeleton
  for (var key in raw) {
    currentinc += 0.1;
    data.labels.push(key);
    data.datasets[0].data.push(raw[key]);
    data.datasets[0].backgroundColor.push('#' + (currentinc * 0xFFFFFF << 0).toString(16));
  }

  new Chart(ctx, {
    data: data,
    type: 'polarArea'
  });

}

// Set up a chart and pass data above
make(document.getElementById("chart").getContext("2d"));