xonstat/static/js/weaponCharts.js

   1     var drawDamageChart = function(data) {
   2       // the chart should fill the "damageChart" div
   3       var width = document.getElementById("damageChart").offsetWidth;
   4
   5       // transform the dataset into something nvd3 can use
   6       var transformedData = d3.nest()
   7         .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
   8
   9       // transform games list into a map such that games[game_id] = linear sequence
  10       var games = {};
  11       data.games.forEach(function(v,i){ games[v] = i; });
  12
  13       // margin model
  14       var margin = {top: 20, right: 30, bottom: 30, left: 40},
  15           height = 500 - margin.top - margin.bottom;
  16
  17       width -= margin.left - margin.right;
  18
  19       // colors
  20       var colors = d3.scale.category20();
  21       keyColor = function(d, i) {return colors(d.key)};
  22
  23       var chart;
  24       nv.addGraph(function() {
  25         chart = nv.models.stackedAreaChart()
  26           .margin(margin)
  27           .width(width)
  28           .height(height)
  29           .x(function(d) { return games[d.game_id] })
  30           .y(function(d) { return d.actual })
  31           .color(keyColor);
  32
  33         chart.xAxis
  34           .axisLabel("Game ID")
  35           .showMaxMin(false)
  36           .ticks(5)
  37           .tickFormat(function(d) { return data.games[d]; });
  38
  39         chart.yAxis
  40           .tickFormat(d3.format(',02d'));
  41
  42         d3.select('#damageChartSVG')
  43           .datum(transformedData)
  44           .transition().duration(500).call(chart);
  45
  46         nv.utils.windowResize(chart.update);
  47
  48         return chart;
  49       });
  50     }