| Server IP : 182.53.201.61 / Your IP : 216.73.217.175 Web Server : Apache/2.2.15 (Fedora) System : Linux km10.dyndns.org 2.6.31.5-127.fc12.i686.PAE #1 SMP Sat Nov 7 21:25:57 EST 2009 i686 User : apache ( 48) PHP Version : 5.3.3 Disable Function : NONE MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/temp/examples/windbarb-series/ |
Upload File : |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Highcharts Example</title>
<style type="text/css">
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
#csv {
display: none;
}
</style>
</head>
<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/windbarb.js"></script>
<script src="../../code/modules/exporting.js"></script>
<div id="container"></div>
<script type="text/javascript">
// Construct the chart
Highcharts.chart('container', {
title: {
text: 'Highcharts Wind Barbs'
},
xAxis: {
type: 'datetime',
offset: 40
},
plotOptions: {
series: {
pointStart: Date.UTC(2017, 0, 29),
pointInterval: 36e5
}
},
series: [{
type: 'windbarb',
data: [
[9.8, 177.9],
[10.1, 177.2],
[11.3, 179.7],
[10.9, 175.5],
[9.3, 159.9],
[8.8, 159.6],
[7.8, 162.6],
[5.6, 186.2],
[6.8, 146.0],
[6.4, 139.9],
[3.1, 180.2],
[4.3, 177.6],
[5.3, 191.8],
[6.3, 173.1],
[7.7, 140.2],
[8.5, 136.1],
[9.4, 142.9],
[10.0, 140.4],
[5.3, 142.1],
[3.8, 141.0],
[3.3, 116.5],
[1.5, 327.5],
[0.1, 1.1],
[1.2, 11.1]
],
name: 'Wind',
color: Highcharts.getOptions().colors[1],
showInLegend: false,
tooltip: {
valueSuffix: ' m/s'
}
}, {
type: 'area',
keys: ['y', 'rotation'], // rotation is not used here
data: [
[9.8, 177.9],
[10.1, 177.2],
[11.3, 179.7],
[10.9, 175.5],
[9.3, 159.9],
[8.8, 159.6],
[7.8, 162.6],
[5.6, 186.2],
[6.8, 146.0],
[6.4, 139.9],
[3.1, 180.2],
[4.3, 177.6],
[5.3, 191.8],
[6.3, 173.1],
[7.7, 140.2],
[8.5, 136.1],
[9.4, 142.9],
[10.0, 140.4],
[5.3, 142.1],
[3.8, 141.0],
[3.3, 116.5],
[1.5, 327.5],
[0.1, 1.1],
[1.2, 11.1]
],
color: Highcharts.getOptions().colors[0],
fillColor: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[
1,
Highcharts.color(Highcharts.getOptions().colors[0])
.setOpacity(0.25).get()
]
]
},
name: 'Wind speed',
tooltip: {
valueSuffix: ' m/s'
}
}]
});
</script>
</body>
</html>