aboutsummaryrefslogtreecommitdiffstats
path: root/templates/discretebarchart.html
blob: c132d97dfe8262d0179f021f5b2817c02f6efad6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div id="{{ chart_id }}"><svg style="height:400px;"></svg></div>
<script type="text/javascript">

var data_{{ chart_id }}=JSON.parse("{{ data|escapejs }}");

nv.addGraph(function() {
   var chart = nv.models.discreteBarChart();

   chart.staggerLabels(true);
   chart.yAxis.tickFormat(d3.format(',.0f'));
   /* Ellipsize long labels */
   chart.xAxis.tickFormat(function(label) {
     if (label.length >= 14)
       return label.tooltip = label.substring(0,13) + '…';

     return label
   });

   chart.tooltipContent(function(key, y, e, graph) {
     var x = String(graph.point.x);
     var y = String(graph.point.y);

     tooltip_str = x + ": " +y;
     d3.selectAll('.discreteBar').on('click', function() {
       window.location.href='{% url 'latest_errors' %}?filter='+x+'&type={{chart_id|lower}}';
     });
     return tooltip_str;
   });

   /* TODO nv.utils.windowResize(chart.update); */

   d3.select('#{{ chart_id }} svg')
   .datum(data_{{ chart_id }})
   .transition(350)
   .attr('height', 400)
   .call(chart);

 });
</script>