4 <link href="/static/css/nv.d3.css" rel="stylesheet" type="text/css">
13 font: 12px sans-serif;
16 #damageChartSVG, #chart2 {
23 <div id="damageChart">
24 <svg id="damageChartSVG"></svg>
27 <script src="/static/js/d3.v3.min.js"></script>
28 <script src="/static/js/nv.d3.min.js"></script>
30 var doDamageGraph = function(data){
31 // the chart should fill the "damageChart" div
32 var width = document.getElementById("damageChart").offsetWidth;
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);
38 // transform games list into a map such that games[game_id] = linear sequence
40 data.games.forEach(function(v,i){ games[v] = i; });
43 var margin = {top: 20, right: 30, bottom: 30, left: 40},
44 height = 500 - margin.top - margin.bottom;
46 width -= margin.left - margin.right;
49 var colors = d3.scale.category20();
50 keyColor = function(d, i) {return colors(d.key)};
53 nv.addGraph(function() {
54 chart = nv.models.stackedAreaChart()
58 .x(function(d) { return games[d.game_id] })
59 .y(function(d) { return d.actual })
66 .tickFormat(function(d) { return data.games[d]; });
69 .tickFormat(d3.format(',02d'));
71 d3.select('#damageChartSVG')
72 .datum(transformedData)
73 .transition().duration(500).call(chart);
75 nv.utils.windowResize(chart.update);
82 % if game_type_cd is not None:
83 d3.json("${request.route_url('player_damage_data_v2', id=player_id, _query={'limit':limit, 'game_type':game_type_cd})}", doDamageGraph);
85 d3.json("${request.route_url('player_damage_data_v2', id=player_id, _query={'limit':limit})}", doDamageGraph);