adamabernathy · August 31, 2021 11:23
diff --git a/plot-js-windrose.html b/plot-js-windrose.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Wind Rose Example</title>

    <!-- You need to import these -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- Local Script to make this happen -->
    <script type="text/javascript">
        /* Kick off! */
        var api_token = "eecfc0259e2946a68f41080021724419";
        $(document).ready(function() {
            getQuery("WBB", 1440, api_token);
        });

        /*
         * Helper function
         * scalarMultiply(array, scalar)
         */
        function scalarMultiply(arr, scalar) {
            for (var i = 0; i < arr.length; i++) {
                arr[i] = arr[i] * scalar;
            }
            return arr;
        }


        /*
         * getQuery(station, api_token)
         */
        function getQuery(station, mins, api_token) {

            $.getJSON('http://api.mesowest.net/v2/stations/timeseries?callback=?', {
                    /* Specify the request parameters here */
                    stid: station,
                    recent: mins, /* How many mins you want */
                    obtimezone: "local",
                    vars: "wind_speed,wind_direction,wind_gust",
                    jsonformat: 2, /* for diagnostics */
                    token: api_token
                },
                function(data) {

                    try {
                        windSpeed = data.STATION[0].OBSERVATIONS.wind_speed_set_1;
                        windDir = data.STATION[0].OBSERVATIONS.wind_direction_set_1;
                        windGust = data.STATION[0].OBSERVATIONS.wind_gust_set_1;
                    } catch (err) {
                        console.log("Data is invalid. Check your API query");
                        console.log(this.url);
                        exit();
                    }

                    /* Convert from knots to mph */
                    windSpeed = scalarMultiply(windSpeed, 1.15078);
                    //windGust = scalarMultiply(windGust, 1.15078);

                    /* Create and populate array for plotting */
                    windData = [];
                    for (i = 0; i < windSpeed.length; i++) {
                        windData.push([windDir[i], windSpeed[i]]);
                    }

                    /* Debug */
                    // console.log(windData);
                    console.log(this.url);

                    plotWindRose(windData, mins);
                })
        };


        /*
         * Plot the wind rose
         * plotWindRose([direction, speed])
         */
        function plotWindRose(windData, mins) {

            /*
             * Note:
             * Because of the nature of the data we will accept the HighCharts Error #15.
             * --> Highcharts Error #15 (Highcharts expects data to be sorted).
             *     This only results in a performance issue.
             */
            var categories = ["0", "45", "90", "135", "180", "225", "270", "315"];

            $('#wind-rose').highcharts({
                series: [{
                    name: "Wind Speed",
                    color: '#cc3000',
                    data: windData
                }],
                chart: {
                    type: 'column',
                    polar: true
                },
                title: {
                    text: 'Wind Direction vs. Frequency (Last ' + mins/60. + ' hours)'
                },
                pane: {
                    size: '90%',
                },
                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    y: 100,
                    text: "Wind Direction"
                },
                xAxis: {
                    min: 0,
                    max: 360,
                    type: "",
                    tickInterval: 45,
                    tickmarkPlacement: 'on',
                    labels: {
                        formatter: function() {
                            return categories[this.value / 45] + '\u00B0';
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    endOnTick: false,
                    showLastLabel: true,
                    title: {
                        text: 'Frequency (%)'
                    },
                    labels: {
                        formatter: function() {
                            return this.value + '%';
                        }
                    },
                    reversedStacks: false
                },
                tooltip: {
                    valueSuffix: '%'
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        shadow: false,
                        groupPadding: 20,
                        pointPlacement: 'on'
                    }
                }
            });
        }
    </script>

    <!-- Local CSS -->
    <style>
        h1 {
            text-align: center;
        }

        #wind-rose {
            max-width: 50%;
            padding: 1em;
            margin: auto;
            text-align: center;
        }
    </style>
 </head>

 <body>
    <h1>Wind Rose Example</h1>
    <div id="wind-rose"></div>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Wind Rose Example</title>

	<!-- You need to import these -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/highcharts-more.js"></script>
	<script src="https://code.highcharts.com/modules/data.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>

	<!-- Local Script to make this happen -->
	<script type="text/javascript">
	/* Kick off! */
	var api_token = "eecfc0259e2946a68f41080021724419";
	$(document).ready(function() {
	getQuery("WBB", 1440, api_token);
	});

	/*
	* Helper function
	* scalarMultiply(array, scalar)
	*/
	function scalarMultiply(arr, scalar) {
	for (var i = 0; i < arr.length; i++) {
	arr[i] = arr[i] * scalar;
	}
	return arr;
	}


	/*
	* getQuery(station, api_token)
	*/
	function getQuery(station, mins, api_token) {

	$.getJSON('http://api.mesowest.net/v2/stations/timeseries?callback=?', {
	/* Specify the request parameters here */
	stid: station,
	recent: mins, /* How many mins you want */
	obtimezone: "local",
	vars: "wind_speed,wind_direction,wind_gust",
	jsonformat: 2, /* for diagnostics */
	token: api_token
	},
	function(data) {

	try {
	windSpeed = data.STATION[0].OBSERVATIONS.wind_speed_set_1;
	windDir = data.STATION[0].OBSERVATIONS.wind_direction_set_1;
	windGust = data.STATION[0].OBSERVATIONS.wind_gust_set_1;
	} catch (err) {
	console.log("Data is invalid. Check your API query");
	console.log(this.url);
	exit();
	}

	/* Convert from knots to mph */
	windSpeed = scalarMultiply(windSpeed, 1.15078);
	//windGust = scalarMultiply(windGust, 1.15078);

	/* Create and populate array for plotting */
	windData = [];
	for (i = 0; i < windSpeed.length; i++) {
	windData.push([windDir[i], windSpeed[i]]);
	}

	/* Debug */
	// console.log(windData);
	console.log(this.url);

	plotWindRose(windData, mins);
	})
	};


	/*
	* Plot the wind rose
	* plotWindRose([direction, speed])
	*/
	function plotWindRose(windData, mins) {

	/*
	* Note:
	* Because of the nature of the data we will accept the HighCharts Error #15.
	* --> Highcharts Error #15 (Highcharts expects data to be sorted).
	* This only results in a performance issue.
	*/
	var categories = ["0", "45", "90", "135", "180", "225", "270", "315"];

	$('#wind-rose').highcharts({
	series: [{
	name: "Wind Speed",
	color: '#cc3000',
	data: windData
	}],
	chart: {
	type: 'column',
	polar: true
	},
	title: {
	text: 'Wind Direction vs. Frequency (Last ' + mins/60. + ' hours)'
	},
	pane: {
	size: '90%',
	},
	legend: {
	align: 'right',
	verticalAlign: 'top',
	y: 100,
	text: "Wind Direction"
	},
	xAxis: {
	min: 0,
	max: 360,
	type: "",
	tickInterval: 45,
	tickmarkPlacement: 'on',
	labels: {
	formatter: function() {
	return categories[this.value / 45] + '\u00B0';
	}
	}
	},
	yAxis: {
	min: 0,
	endOnTick: false,
	showLastLabel: true,
	title: {
	text: 'Frequency (%)'
	},
	labels: {
	formatter: function() {
	return this.value + '%';
	}
	},
	reversedStacks: false
	},
	tooltip: {
	valueSuffix: '%'
	},
	plotOptions: {
	series: {
	stacking: 'normal',
	shadow: false,
	groupPadding: 20,
	pointPlacement: 'on'
	}
	}
	});
	}
	</script>

	<!-- Local CSS -->
	<style>
	h1 {
	text-align: center;
	}

	#wind-rose {
	max-width: 50%;
	padding: 1em;
	margin: auto;
	text-align: center;
	}
	</style>
	</head>

	<body>
	<h1>Wind Rose Example</h1>
	<div id="wind-rose"></div>
	</body>

	</html>
No results found