+ function start_windrose() {
+
+ // Load the fonts
+ Highcharts.createElement('link', {
+ href: '//fonts.googleapis.com/css?family=Dosis:400,600',
+ rel: 'stylesheet',
+ type: 'text/css'
+ }, null, document.getElementsByTagName('head')[0]);
+
+ Highcharts.theme = {
+ colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+ "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+ chart: {
+ backgroundColor: null,
+ style: {
+ fontFamily: "Dosis, sans-serif"
+ }
+ },
+ title: {
+ style: {
+ fontSize: '16px',
+ fontWeight: 'bold',
+ textTransform: 'uppercase'
+ }
+ },
+ tooltip: {
+ borderWidth: 0,
+ backgroundColor: 'rgba(219,219,216,0.8)',
+ shadow: false
+ },
+ legend: {
+ itemStyle: {
+ fontWeight: 'bold',
+ fontSize: '13px'
+ }
+ },
+ xAxis: {
+ gridLineWidth: 1,
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ yAxis: {
+ minorTickInterval: 'auto',
+ title: {
+ style: {
+ textTransform: 'uppercase'
+ }
+ },
+ labels: {
+ style: {
+ fontSize: '12px'
+ }
+ }
+ },
+ plotOptions: {
+ candlestick: {
+ lineColor: '#404048'
+ }
+ },
+
+
+ // General
+ background2: '#F0F0EA'
+
+ };
+
+ // Apply the theme
+ Highcharts.setOptions(Highcharts.theme);
+
+ windrose = new Highcharts.Chart({
+ chart: {
+ polar: true,
+ renderTo: 'windrose'
+ },
+
+ title: {
+ text: 'Wind Rose'
+ },
+
+ pane: {
+ startAngle: 0,
+ endAngle: 360
+ },
+
+ xAxis: {
+ tickInterval: 15,
+ min: 0,
+ max: 360,
+ labels: {
+ formatter: function () {
+ return this.value + '°';
+ }
+ }
+ },
+
+ yAxis: {
+ min: 0
+ },
+
+ plotOptions: {
+ series: {
+ pointStart: 0,
+ pointInterval: 15
+ },
+ column: {
+ pointPadding: 0,
+ groupPadding: 0
+ }
+ },
+ exporting: {
+ buttons: {
+ contextButton: {
+ enabled: false
+ }
+ }
+ },
+
+ series: [ {
+ type: 'scatter',
+ name: 'Wind mph',
+ data: [
+ <% my ($d, $w);
+ $s = "";
+ $d = 0; $w = 0;
+ for (@main::last10minsr) {
+ my $r = $main::json->decode($_);
+ if ($r) {
+ $r->{r}->{Dir} ||= $d;
+ $r->{r}->{Wind} ||= $w;
+ $s .= "[" . $r->{r}->{Dir} . "," . main::nearest(0.1, $r->{r}->{Wind}*2.23694) . "],";
+ $d = $r->{r}->{Dir};
+ $w = $r->{r}->{Wind};
+ }
+ }
+ chop $s if length $s;
+ %><%= $s %>
+ ]
+ }]
+ });
+ }
+
+ function start_windspeed() {
+ windspeed = new Highcharts.Chart({
+ chart: {
+ type: 'gauge',
+ renderTo: 'windspeed',
+ plotBackgroundColor: null,
+ plotBackgroundImage: null,
+ plotBorderWidth: 0,
+ plotShadow: false
+ },
+
+ title: {
+ text: 'Wind Speed'
+ },
+
+ pane: {
+ startAngle: -150,
+ endAngle: 150,
+ background: [{
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#FFF'],
+ [1, '#333']
+ ]
+ },
+ borderWidth: 0,
+ outerRadius: '109%'
+ }, {
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#333'],
+ [1, '#FFF']
+ ]
+ },
+ borderWidth: 1,
+ outerRadius: '107%'
+ }, {
+ // default background
+ }, {
+ backgroundColor: '#DDD',
+ borderWidth: 0,
+ outerRadius: '105%',
+ innerRadius: '103%'
+ }]
+ },
+
+ // the value axis
+ yAxis: {
+ min: 0,
+ max: 50,
+
+ minorTickInterval: 'auto',
+ minorTickWidth: 1,
+ minorTickLength: 10,
+ minorTickPosition: 'inside',
+ minorTickColor: '#666',
+
+ tickPixelInterval: 30,
+ tickWidth: 2,
+ tickPosition: 'inside',
+ tickLength: 10,
+ tickColor: '#666',
+ labels: {
+ step: 2,
+ rotation: 'auto'
+ },
+ title: {
+ text: 'mph'
+ },
+ plotBands: [{
+ from: 0,
+ to: 15,
+ color: '#55BF3B' // green
+ }, {
+ from: 16,
+ to: 29,
+ color: '#DDDF0D' // yellow
+ }, {
+ from: 30,
+ to: 50,
+ color: '#DF5353' // red
+ }]
+ },
+ exporting: {
+ buttons: {
+ contextButton: {
+ enabled: false
+ }
+ }
+ },
+
+ series: [{
+ name: 'Speed',
+ data: [0],
+ tooltip: {
+ valueSuffix: ' mph'
+ }
+ }]
+ });
+ }
+
+ function start_winddir() {
+ winddir = new Highcharts.Chart({
+ chart: {
+ type: 'gauge',
+ renderTo: 'winddir',
+ plotBackgroundColor: null,
+ plotBackgroundImage: null,
+ plotBorderWidth: 0,
+ plotShadow: false
+ },
+
+ title: {
+ text: 'Wind Direction'
+ },
+
+ pane: {
+ startAngle: 0,
+ endAngle: 360,
+ background: [{
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#FFF'],
+ [1, '#333']
+ ]
+ },
+ borderWidth: 0,
+ outerRadius: '109%'
+ }, {
+ backgroundColor: {
+ linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+ stops: [
+ [0, '#333'],
+ [1, '#FFF']
+ ]
+ },
+ borderWidth: 1,
+ outerRadius: '107%'
+ }, {
+ // default background
+ }, {
+ backgroundColor: '#DDD',
+ borderWidth: 0,
+ outerRadius: '105%',
+ innerRadius: '103%'
+ }]
+ },
+
+ // the value axis
+ yAxis: {
+ min: 0,
+ max: 359,
+
+ minorTickInterval: 'auto',
+ minorTickWidth: 1,
+ minorTickLength: 10,
+ minorTickPosition: 'inside',
+ minorTickColor: '#666',
+
+ tickPixelInterval: 15,
+ tickWidth: 2,
+ tickPosition: 'inside',
+ tickLength: 10,
+ tickColor: '#666',
+ labels: {
+ step: 2,
+ rotation: 'auto'
+ },
+ title: {
+ text: '° deg'
+ },
+ },
+ exporting: {
+ buttons: {
+ contextButton: {
+ enabled: false
+ }
+ }
+ },
+
+ series: [{
+ name: 'Direction',
+ data: [0],
+ tooltip: {
+ valueSuffix: ' ° deg'
+ }
+ }]
+ });
+ }
+
+ function fill_daychart(js, days) {
+ var rainfall = daychart.series[0].data.length > (days * 48);
+ var pressure = daychart.series[1].data.length > (days * 48);
+ var temp = daychart.series[2].data.length > (days * 48);