xonstat/templates/nvd3_damage.mako

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3
   4 <link href="/static/css/nv.d3.css" rel="stylesheet" type="text/css">
   5
   6 <style>
   7
   8 body {
   9   overflow-y:scroll;
  10 }
  11
  12 text {
  13   font: 12px sans-serif;
  14 }
  15
  16 #chart1, #chart2 {
  17   height: 500px;
  18 }
  19
  20 </style>
  21 <body>
  22
  23   <div id="damageGraph">
  24     <svg id="chart1"></svg>
  25   </div>
  26
  27 <script src="/static/js/d3.v3.js"></script>
  28 <script src="/static/js/nv.d3.min.js"></script>
  29 <script>
  30     var doDamageGraph = function(data){
  31         // the chart should fill the "damageGraph" div
  32         var width = document.getElementById("damageGraph").offsetWidth;
  33
  34         // transform the dataset into something nvd3 can use
  35         var transformedData = d3.nest()
  36             .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  37
  38         // transform games list into a map such that games[game_id] = linear sequence
  39         var games = {};
  40         data.games.forEach(function(v,i){ games[v] = i; });
  41
  42         // margin model
  43         var margin = {top: 20, right: 30, bottom: 30, left: 40},
  44             height = 500 - margin.top - margin.bottom;
  45
  46         width -= margin.left - margin.right;
  47
  48         // colors
  49         var colors = d3.scale.category20();
  50         keyColor = function(d, i) {return colors(d.key)};
  51
  52         var chart;
  53         nv.addGraph(function() {
  54           chart = nv.models.stackedAreaChart()
  55                         .margin(margin)
  56                         .width(width)
  57                         .height(height)
  58                         .x(function(d) { return games[d.game_id] })
  59                         .y(function(d) { return d.actual })
  60                         .color(keyColor);
  61
  62           chart.xAxis
  63               .axisLabel("Game ID")
  64               .showMaxMin(false)
  65               .ticks(5)
  66               .tickFormat(function(d) { return data.games[d]; });
  67
  68           chart.yAxis
  69               .tickFormat(d3.format(',02d'));
  70
  71           d3.select('#chart1')
  72             .datum(transformedData)
  73               .transition().duration(500).call(chart);
  74
  75           nv.utils.windowResize(chart.update);
  76
  77           return chart;
  78         });
  79
  80     }
  81
  82     d3.json('/player/6/damage-v2?limit=5&game_type=duel', doDamageGraph);
  83 </script>