Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 1 
<!DOCTYPE HTML>
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>Highcharts Example</title>
6 
 
7 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8 
		<style type="text/css">
9 
${demo.css}
10 
		</style>
11 
		<script type="text/javascript">
12 
// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
13 
$(function () {
14 
    $('#container').highcharts({
15 
        chart: {
16 
            type: 'spline'
17 
        },
18 
        title: {
19 
            text: 'Wind speed during two days'
20 
        },
21 
        subtitle: {
22 
            text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
23 
        },
24 
        xAxis: {
25 
            type: 'datetime',
26 
            labels: {
27 
                overflow: 'justify'
28 
            }
29 
        },
30 
        yAxis: {
31 
            title: {
32 
                text: 'Wind speed (m/s)'
33 
            },
34 
            min: 0,
35 
            minorGridLineWidth: 0,
36 
            gridLineWidth: 0,
37 
            alternateGridColor: null,
38 
            plotBands: [{ // Light air
39 
                from: 0.3,
40 
                to: 1.5,
41 
                color: 'rgba(68, 170, 213, 0.1)',
42 
                label: {
43 
                    text: 'Light air',
44 
                    style: {
45 
                        color: '#606060'
46 
                    }
47 
                }
48 
            }, { // Light breeze
49 
                from: 1.5,
50 
                to: 3.3,
51 
                color: 'rgba(0, 0, 0, 0)',
52 
                label: {
53 
                    text: 'Light breeze',
54 
                    style: {
55 
                        color: '#606060'
56 
                    }
57 
                }
58 
            }, { // Gentle breeze
59 
                from: 3.3,
60 
                to: 5.5,
61 
                color: 'rgba(68, 170, 213, 0.1)',
62 
                label: {
63 
                    text: 'Gentle breeze',
64 
                    style: {
65 
                        color: '#606060'
66 
                    }
67 
                }
68 
            }, { // Moderate breeze
69 
                from: 5.5,
70 
                to: 8,
71 
                color: 'rgba(0, 0, 0, 0)',
72 
                label: {
73 
                    text: 'Moderate breeze',
74 
                    style: {
75 
                        color: '#606060'
76 
                    }
77 
                }
78 
            }, { // Fresh breeze
79 
                from: 8,
80 
                to: 11,
81 
                color: 'rgba(68, 170, 213, 0.1)',
82 
                label: {
83 
                    text: 'Fresh breeze',
84 
                    style: {
85 
                        color: '#606060'
86 
                    }
87 
                }
88 
            }, { // Strong breeze
89 
                from: 11,
90 
                to: 14,
91 
                color: 'rgba(0, 0, 0, 0)',
92 
                label: {
93 
                    text: 'Strong breeze',
94 
                    style: {
95 
                        color: '#606060'
96 
                    }
97 
                }
98 
            }, { // High wind
99 
                from: 14,
100 
                to: 15,
101 
                color: 'rgba(68, 170, 213, 0.1)',
102 
                label: {
103 
                    text: 'High wind',
104 
                    style: {
105 
                        color: '#606060'
106 
                    }
107 
                }
108 
            }]
109 
        },
110 
        tooltip: {
111 
            valueSuffix: ' m/s'
112 
        },
113 
        plotOptions: {
114 
            spline: {
115 
                lineWidth: 4,
116 
                states: {
117 
                    hover: {
118 
                        lineWidth: 5
119 
                    }
120 
                },
121 
                marker: {
122 
                    enabled: false
123 
                },
124 
                pointInterval: 3600000, // one hour
125 
                pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
126 
            }
127 
        },
128 
        series: [{
129 
            name: 'Hestavollane',
130 
            data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
131 
 
132 
        }, {
133 
            name: 'Vik',
134 
            data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
135 
        }],
136 
        navigation: {
137 
            menuItemStyle: {
138 
                fontSize: '10px'
139 
            }
140 
        }
141 
    });
142 
});
143 
		</script>
144 
	</head>
145 
	<body>
146 
<script src="../../js/highcharts.js"></script>
147 
<script src="../../js/modules/exporting.js"></script>
148 
 
149 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
150 
 
151 
	</body>
152 
</html>