← Back to branch summary

~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-proposed

« back to all changes in this revision

Viewing changes to backend/stats/static/js/d3/examples/calendar/dji-area.html

  • Committer: Package Import Robot
  • Author(s): Evan Dandrea
  • Date: 2012-04-10 14:28:58 UTC
  • Revision ID: package-import@ubuntu.com-20120410142858-nk453o1z7t7py3bs
Tags: 0.1.26
https://launchpad.net/bugs/973687
* Take ownership of the NetworkManager state variant on setup and
  unref it, plugging a memory leak.
* Log the reason the server rejected the submitted crash report.
* Send the Whoopsie version with each crash submission.
* Delete both .upload and .uploaded files after 14 days. Thanks
  Marc Deslauriers (LP: #973687).

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/d3/examples/calendar/dji-area.html
 
1
<!DOCTYPE html>
 
2
<html>
 
3
  <head>
 
4
    <title>DJI</title>
 
5
    <script type="text/javascript" src="../../d3.v2.js"></script>
 
6
    <style type="text/css">
 
7
 
 
8
body {
 
9
  font: 10px sans-serif;
 
10
}
 
11
 
 
12
rect {
 
13
  fill: #ddd;
 
14
}
 
15
 
 
16
path.area {
 
17
  fill: #000;
 
18
  fill-opacity: .75;
 
19
}
 
20
 
 
21
.axis, .grid {
 
22
  shape-rendering: crispEdges;
 
23
}
 
24
 
 
25
.grid line {
 
26
  stroke: #fff;
 
27
}
 
28
 
 
29
.grid line.minor {
 
30
  stroke-opacity: .5;
 
31
}
 
32
 
 
33
.grid text {
 
34
  display: none;
 
35
}
 
36
 
 
37
.axis line {
 
38
  stroke: #000;
 
39
}
 
40
 
 
41
.grid path, .axis path {
 
42
  display: none;
 
43
}
 
44
 
 
45
    </style>
 
46
  </head>
 
47
  <body>
 
48
    <script type="text/javascript">
 
49
 
 
50
var m = [10, 50, 20, 10],
 
51
    w = 960 - m[1] - m[3],
 
52
    h = 500 - m[0] - m[2],
 
53
    parse = d3.time.format("%Y-%m-%d").parse;
 
54
 
 
55
// Scales. Note the inverted domain for the y-scale: bigger is up!
 
56
var x = d3.time.scale().range([20, w - 20]),
 
57
    y = d3.scale.linear().range([h - 20, 20]);
 
58
 
 
59
// Axes.
 
60
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
 
61
    yAxis = d3.svg.axis().scale(y).orient("right");
 
62
 
 
63
// An area generator.
 
64
var area = d3.svg.area()
 
65
    .x(function(d) { return x(d.Date); })
 
66
    .y0(y(0))
 
67
    .y1(function(d) { return y(d.Close); });
 
68
 
 
69
var svg = d3.select("body").append("svg")
 
70
    .attr("width", w + m[1] + m[3])
 
71
    .attr("height", h + m[0] + m[2])
 
72
  .append("g")
 
73
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
74
 
 
75
svg.append("rect")
 
76
    .attr("width", w)
 
77
    .attr("height", h);
 
78
 
 
79
d3.csv("dji.csv", function(data) {
 
80
 
 
81
  // Parse dates and numbers.
 
82
  data.reverse().forEach(function(d) {
 
83
    d.Date = parse(d.Date);
 
84
    d.Close = +d.Close;
 
85
  });
 
86
 
 
87
  // Compute the minimum and maximum date, and the maximum price.
 
88
  x.domain([data[0].Date, data[data.length - 1].Date]);
 
89
  y.domain([0, d3.max(data, function(d) { return d.Close; })]);
 
90
 
 
91
  svg.append("g")
 
92
      .attr("class", "x grid")
 
93
      .attr("transform", "translate(0," + h + ")")
 
94
      .call(xAxis.tickSubdivide(1).tickSize(-h));
 
95
 
 
96
  svg.append("g")
 
97
      .attr("class", "y grid")
 
98
      .attr("transform", "translate(" + w + ",0)")
 
99
      .call(yAxis.tickSubdivide(1).tickSize(-w));
 
100
 
 
101
  svg.append("g")
 
102
      .attr("class", "x axis")
 
103
      .attr("transform", "translate(0," + h + ")")
 
104
      .call(xAxis.tickSubdivide(0).tickSize(6));
 
105
 
 
106
  svg.append("g")
 
107
      .attr("class", "y axis")
 
108
      .attr("transform", "translate(" + w + ",0)")
 
109
      .call(yAxis.tickSubdivide(0).tickSize(6));
 
110
 
 
111
  svg.append("path")
 
112
      .attr("class", "area")
 
113
      .attr("d", area(data));
 
114
});
 
115
 
 
116
    </script>
 
117
  </body>
 
118
</html>