-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (120 loc) · 3.79 KB
/
index.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>LP Chart Test</title>
<link rel="stylesheet" href="lpchart.css" type="text/css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 384px;
}
/* Each line on a chart will have a number from 1 upwards. */
.line-2 {
stroke-width: 4px;
}
</style>
<script src="js/d3.v3.min.js"></script>
<script src="js/lpchart.js"></script>
<script>
window.onload = function() {
// Two sets of data for the first chart:
var data_1a = [
['2000-01', '1394.46'],
['2000-02', '1366.42'],
['2000-03', '1498.58'],
['2000-04', '1452.43'],
['2000-05', '1420.6'],
['2000-06', '1454.6'],
['2000-07', '1430.83'],
['2000-08', '1517.68']
];
var data_1b = [
['2000-05', '1094.46'],
['2000-06', '1366.42'],
['2000-07', '1598.58'],
['2000-08', '1752.43'],
['2000-09', '1420.6'],
['2000-10', '1454.6'],
['2000-11', '1430.83'],
['2000-12', '1817.68']
];
// One set of data for the second chart:
var data2 = [
['2012-01-01', '1394.46'],
['2012-01-02', '0'],
['2012-01-03', '1598.58'],
['2012-01-04', '952.43'],
['2012-01-05', '1420.6'],
['2012-01-06', '454.6'],
['2012-01-07', '1430.83'],
['2012-01-08', '817.68']
];
var data3a = [[1, 10], [2, 12], [3, 15], [5, 14], [6, 20], [7, 8]];
var data3b = [[1, 5], [2, 3], [3, 0], [5, 2], [6, 1], [7, 7]];
var data4 = [['00:00', 44], ['01:00', '64'], ['02:00', '64'], ['03:00', 0], ['04:00', 98], ['05:00', 87], ['06:00', 23]];
var data5 = [['01', '100'], ['02', 200], ['03', 350], ['04', 480], ['05', 654], ['06', 123]];
var data6 = [['Earliest', 0], ['Earlier', 3000000], ['Early', 9000000],
['Late', 8000000], ['Later', 6500000], ['Latest', 150000]];
// Set up the chart instance:
var chart = LPChart();
// Draw each chart in turn.
chart.xAxisType('yearmonth').xAxisTicks(4);
// The datasets are passed in in an array.
// Both use the same chart instance.
d3.select("#chart1")
.datum([data_1a, data_1b])
.call(chart);
chart.xAxisType('date').xAxisTicks(8).width(200).showYAxisGrid(true).xAxisTickValues(['2012-01-01', '2012-01-08']);
d3.select("#chart2")
.datum([data2])
.call(chart);
chart.xAxisType('weekday').width('80%')
.height(160)
.showYAxis(false).xAxisTickValues(null);
d3.select("#chart3")
.datum([data2])
.call(chart);
chart.xAxisType('numeric').width(800).height(300).xAxisTicks(7).showYAxis(true);
d3.select('#chart4')
.datum([data3a, data3b])
.call(chart);
chart.xAxisType('hour').width('100%').height(200).showXAxisGrid(true);
d3.select('#chart5')
.datum([data4])
.call(chart);
chart.xAxisType('month').showYAxisGrid(false);
d3.select('#chart6')
.datum([data5])
.call(chart);
chart.xAxisType('string').showXAxisGrid(false);
d3.select('#chart7')
.datum([data6])
.call(chart);
chart.xAxisType('string').fill(true);
d3.select('#chart8')
.datum([data6])
.call(chart);
};
</script>
</head>
<body>
<p>Year months</p>
<div id="chart1" class="chart"></div>
<p>Dates</p>
<div id="chart2" class="chart"></div>
<p>Weekdays</p>
<div id="chart3" class="chart"></div>
<p>Numeric</p>
<div id="chart4" class="chart"></div>
<p>Hour</p>
<div id="chart5" class="chart"></div>
<p>Month</p>
<div id="chart6" class="chart"></div>
<p>String</p>
<div id="chart7" class="chart"></div>
<p>String</p>
<div id="chart8" class="chart"></div>
</body>
</html>