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
| <!DOCTYPE HTML>
| <html>
| <head>
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
| <title>Highcharts Example</title>
|
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
| <script type="text/javascript">
| $(function () {
|
| var ranges = [
| [1246406400000, 14.3, 27.7],
| [1246492800000, 14.5, 27.8],
| [1246579200000, 15.5, 29.6],
| [1246665600000, 16.7, 30.7],
| [1246752000000, 16.5, 25.0],
| [1246838400000, 17.8, 25.7],
| [1246924800000, 13.5, 24.8],
| [1247011200000, 10.5, 21.4],
| [1247097600000, 9.2, 23.8],
| [1247184000000, 11.6, 21.8],
| [1247270400000, 10.7, 23.7],
| [1247356800000, 11.0, 23.3],
| [1247443200000, 11.6, 23.7],
| [1247529600000, 11.8, 20.7],
| [1247616000000, 12.6, 22.4],
| [1247702400000, 13.6, 19.6],
| [1247788800000, 11.4, 22.6],
| [1247875200000, 13.2, 25.0],
| [1247961600000, 14.2, 21.6],
| [1248048000000, 13.1, 17.1],
| [1248134400000, 12.2, 15.5],
| [1248220800000, 12.0, 20.8],
| [1248307200000, 12.0, 17.1],
| [1248393600000, 12.7, 18.3],
| [1248480000000, 12.4, 19.4],
| [1248566400000, 12.6, 19.9],
| [1248652800000, 11.9, 20.2],
| [1248739200000, 11.0, 19.3],
| [1248825600000, 10.8, 17.8],
| [1248912000000, 11.8, 18.5],
| [1248998400000, 10.8, 16.1]
| ],
| averages = [
| [1246406400000, 21.5],
| [1246492800000, 22.1],
| [1246579200000, 23],
| [1246665600000, 23.8],
| [1246752000000, 21.4],
| [1246838400000, 21.3],
| [1246924800000, 18.3],
| [1247011200000, 15.4],
| [1247097600000, 16.4],
| [1247184000000, 17.7],
| [1247270400000, 17.5],
| [1247356800000, 17.6],
| [1247443200000, 17.7],
| [1247529600000, 16.8],
| [1247616000000, 17.7],
| [1247702400000, 16.3],
| [1247788800000, 17.8],
| [1247875200000, 18.1],
| [1247961600000, 17.2],
| [1248048000000, 14.4],
| [1248134400000, 13.7],
| [1248220800000, 15.7],
| [1248307200000, 14.6],
| [1248393600000, 15.3],
| [1248480000000, 15.3],
| [1248566400000, 15.8],
| [1248652800000, 15.2],
| [1248739200000, 14.8],
| [1248825600000, 14.4],
| [1248912000000, 15],
| [1248998400000, 13.6]
| ];
|
|
| $('#container').highcharts({
|
| title: {
| text: 'July temperatures'
| },
|
| xAxis: {
| type: 'datetime'
| },
|
| yAxis: {
| title: {
| text: null
| }
| },
|
| tooltip: {
| crosshairs: true,
| shared: true,
| valueSuffix: '°C'
| },
|
| legend: {
| },
|
| series: [{
| name: 'Temperature',
| data: averages,
| zIndex: 1,
| marker: {
| fillColor: 'white',
| lineWidth: 2,
| lineColor: Highcharts.getOptions().colors[0]
| }
| }, {
| name: 'Range',
| data: ranges,
| type: 'arearange',
| lineWidth: 0,
| linkedTo: ':previous',
| color: Highcharts.getOptions().colors[0],
| fillOpacity: 0.3,
| zIndex: 0
| }]
|
| });
|
| });
| </script>
| </head>
| <body>
| <script src="../../js/highcharts.js"></script>
| <script src="../../js/highcharts-more.js"></script>
| <script src="../../js/modules/exporting.js"></script>
|
| <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
| </body>
| </html>
|
|
