var moment_locale = "$system_locale".replace(/_/g, '-'); // Replace underscore with dash (e.g. "en_US" becomes "en-US") which is a format that moment.js needs for locale
moment.locale(moment_locale);

// http://stackoverflow.com/a/14887961/1177153
var weatherdirection = {
	0: 'N',
	90: 'E',
	180: 'S',
	270: 'W',
	360: 'N'
};

// From the front page
function get_cardinal_direction(degree) {
    if (degree >= 0 && degree <= 11.25) {
        return "N";
    } else if (degree >= 11.26 && degree <= 33.75) {
        return "NNE";
    } else if (degree >= 33.76 && degree <= 56.25) {
        return "NE";
    } else if (degree >= 56.26 && degree <= 78.75) {
        return "ENE";
    } else if (degree >= 78.76 && degree <= 101.25) {
        return "E";
    } else if (degree >= 101.26 && degree <= 123.75) {
        return "ESE";
    } else if (degree >= 123.76 && degree <= 146.25) {
        return "SE";
    } else if (degree >= 146.26 && degree <= 168.75) {
        return "SSE";
    } else if (degree >= 168.76 && degree <= 191.25) {
        return "S";
    } else if (degree >= 191.26 && degree <= 213.75) {
        return "SSW";
    } else if (degree >= 213.76 && degree <= 236.25) {
        return "SW";
    } else if (degree >= 236.26 && degree <= 258.75) {
        return "WSW";
    } else if (degree >= 258.76 && degree <= 281.25) {
        return "W";
    } else if (degree >= 281.26 && degree <= 303.75) {
        return "WNW";
    } else if (degree >= 303.76 && degree <= 326.25) {
        return "NW";
    } else if (degree >= 326.26 && degree <= 348.75) {
        return "NNW";
    } else if (degree >= 348.76 && degree <= 360) {
        return "N";
    }
}

Highcharts.setOptions({
    global: {
        //useUTC: false
        timezoneOffset: $highcharts_timezoneoffset
    },
});

function daily () {

    var optionsTemp = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'temperatureplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Temperature'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            minorGridLineWidth: 0,
            startOnTick: true,
            title: {
            },
			opposite: false
        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                },
            }
        },
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

    var optionsWindchill = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'windchillplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Wind Chill/Heat Index'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            minorGridLineWidth: 0,
            startOnTick: true,
            title: {
            },
            opposite: false
        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                }
            }
        },
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

    var optionsHumidity = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'humidityplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Humidity'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            // startOnTick: true,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            minorGridLineWidth: 0,
            startOnTick: true,
            title:  {
                text: '(%)'
            },
            opposite: false
        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                }
            },
            series: {
                color: '#4242B4'
            }
        },
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

	var optionsBarometer = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'barometerplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Barometer'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
			tickInterval: 0.01, 
            endOnTick: true,
            lineColor: '#555',
            minorGridLineWidth: 0,
            startOnTick: true,
            title: {
            },
			opposite: false
        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                },
            }
        },
		// Define the plot colors in order as they are loaded below
		colors: ['#BECC00'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };
	
	var optionsWind = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'windplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Wind / Gust Speed'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            minorGridLineWidth: 0,
            startOnTick: true,
            title: {
            },
			opposite: false
        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                },
            }
        },
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

    var optionsWindDir = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'winddirplot',
            spacing: [5, 10, 10, 0],
            type: 'scatter',
            zoomType: 'x'
        },

        title: {
            text: 'Wind Direction'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },
		
        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            max: 360,
            min: 0,
            minorGridLineWidth: 0,
            startOnTick: true,
            tickInterval: 90,
			opposite: false,
			showLastLabel: true, 
            title:  {
                //text: '(\u00B0)'
                text: 'Wind Direction'
            }, 
			labels: {
				formatter: function() {
					var value = weatherdirection[this.value];
					return value !== 'undefined' ? value : this.value;
				}
			}
        },

        plotOptions: {
            line: {
                lineWidth: 1,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: true
                }
            },
            series: {
                marker: {
                    radius: 2
                },
                color: '#4242B4'
            }
        },
		
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            //pointFormat: '{series.name}: <b>{point.y}</b>',
            formatter: function() {
                return moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL") +'<br><b>' + get_cardinal_direction( parseFloat(this.point.y).toFixed(2) ) + ' (' + parseFloat(this.point.y).toFixed(2) + '\xBA)';
            },
            valueDecimals: 2,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            }
        },

        series: [{
            marker: {
                lineWidth: 0,
                lineColor: null, // inherit from series
                radius: 10
            }
        }]

    };

    var optionsWindRose = {
        chart: {
            plotShadow: false,
            plotBorderWidth: 0,
            polar: true,
            renderTo: 'windrose',
            type: 'column',
        },

        // Need colors placeholder so we can set it via getJSON
        colors: [
        ],

        legend: {
            align: 'right',
            itemStyle: {
                color: '#555',
                fontSize: '10px'
            },
            layout: 'vertical',
            reversed: true,
            title: {
                style: {
                    fontWeight: 'bold',
                    textAlign: 'center'
                },
                // Need text placeholder so we can set it via getJSON
                text: ""
            },
            verticalAlign: 'middle',
        },

        pane: {
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                    stops: [
                        [0, '#FCFFC5'],
                        [1, '#E0E0FF']
                    ]
                }
            }],
            center: ['50%', '50%'],
        },

        // Need title placeholder so we can set it via getJSON
        title: {
            text: ""
        },

        xAxis: {
            gridLineWidth: 1,
            tickmarkPlacement: 'on',
            // Need categories placeholder so we can set it via getJSON
            categories: []
        },

        yAxis: {
            endOnTick: true,
            labels: {
                formatter: function () {
                    return this.value + '%';
                },
            },
            min: -4,
            minorGridLineColor: '#C5EEFA',
            minorGridLineWidth: 1,
            showLastLabel: true,
            startOnTick: false,
            tickInterval: 10,
        },

        tooltip: {
            valueSuffix: '%',
            followPointer: true
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                groupPadding: 0,
                pointPlacement: 'on'
            },
            pie: {
                borderWidth: 0
            }
        },

        // Need series placeholder so we can set it via getJSON
        series: {},

    };

    var optionsRain = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'rainplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Hourly Rainfall'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            // minRange: 86400000,
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },
		
        yAxis: {
            endOnTick: true,
            lineColor: '#555',
            min: 0,
            minRange: 0.01,
            minorGridLineWidth: 1,
            startOnTick: true,
            title:  {
            },
			opposite: false

        },

        plotOptions: {
            line: {
                lineWidth: 2,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                },
            },
            column: {
                color: '#72B2C4',
                borderWidth: 0,
            },
            series: {
                pointPadding: 0,
                groupPadding: 0,
                borderWidth: 0
            }
        },
		
		// Define the plot colors in order as they are loaded below
		//colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},

        tooltip: {
            enabled: true,
            valueDecimals: 2,
            dateTimeLabelFormats: {
                hour: 'hour to %e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + parseFloat(point.y).toFixed(2);
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

    var optionsRadiation = {
        chart: {
            //plotBackgroundColor: {
            //    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            //    stops: [
            //        [0, '#FCFFC5'],
            //        [1, '#E0E0FF']
            //    ]
            //},
            renderTo: 'radiationplot',
            spacing: [5, 10, 10, 0],
            type: 'line',
            zoomType: 'x'
        },

        title: {
            text: 'Solar Radiation'
        },

        legend: {
            enabled: true
        },

        xAxis: {
            dateTimeLabelFormats: {
                day: '%e %b',
                week: '%e %b',
                month: '%b %y',
            },
            lineColor: '#555',
            minRange: 900000,
            minTickInterval: 900000,
            title: {
                style: {
                    font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
                }
            },
            ordinal: false,
            type: 'datetime'
        },

        yAxis: {
            startOnTick: true,
            endOnTick: true,
            lineColor: '#555',
            min: 0,
            minorGridLineWidth: 0,
			opposite: false,
            title:  {
                text: '(W/m\u00B2)'
            }
        },

        plotOptions: {
            line: {
                lineWidth: 1,
                gapSize: $highcharts_archive_interval, // archive_interval in milliseconds
                gapUnit: 'value',
                marker: {
                    enabled: false
                }
            },
            series: {
                color: '#4242B4'
            }
        },
		
		// Define the plot colors in order as they are loaded below
		colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
		
		scrollbar: {
			enabled: false
        },
		navigator: {
			enabled: false
		},
		rangeSelector: {
			enabled: false
		},


        tooltip: {
            enabled: true,
            dateTimeLabelFormats: {
                hour: '%e %b %H:%M'
            },
            // For locale control with moment.js - https://api.highcharts.com/highcharts/tooltip.split
            formatter: function () {
                // The first returned item is the header, subsequent items are the points
                return [moment.unix( this.x / 1000).utcOffset($moment_js_utc_offset).format("LLL")].concat(
                    this.points.map(function (point) {
                        return "<span style='color:" + point.series.color + "'>\u25CF</span> " + point.series.name + ': ' + point.y;
                    })
                );
            },
            split: true,
        },

        series: [{}]

    };

    jQuery.getJSON('$belchertown_root_url/json/day.json', function(seriesData) {
        optionsWindchill.series[1] = seriesData[0].windchillplot.series.windchill;
        optionsWindchill.series[0] = seriesData[0].windchillplot.series.heatindex;
        //optionsWindchill.series[2] = seriesData[0].windchillplot.series.appTemp;
        optionsWindchill.yAxis.title.text = seriesData[0].windchillplot.yAxisLabel.text;
        optionsHumidity.series[0] = seriesData[0].humidityplot.series.outHumidity;
        optionsBarometer.series[0] = seriesData[0].barometerplot.series.barometer;
        optionsBarometer.yAxis.title.text = seriesData[0].barometerplot.yAxisLabel.text;
        optionsWind.series[0] = seriesData[0].windplot.series.windSpeed;
        optionsWind.series[1] = seriesData[0].windplot.series.windGust;
        optionsWind.yAxis.title.text = seriesData[0].windplot.yAxisLabel.text;
        optionsWindDir.series[0] = seriesData[0].winddirplot.series.windDir;
        optionsRain.series[0] = seriesData[0].rainplot.series.rain;
        optionsRain.series[1] = seriesData[0].rainplottotal.series.rain;
        optionsRain.yAxis.title.text = seriesData[0].rainplot.yAxisLabel.text;
        optionsRain.yAxis.title.text = seriesData[0].rainplottotal.yAxisLabel.text;
        optionsRain.series[0].type = 'line';
        optionsRain.series[1].type = 'line';
        optionsRain.series[1].color = '#000';        
        optionsRadiation.series[0] = seriesData[0].radiationplot.series.radiation;
        
        // Temperature Chart with options to include observations
        #if $Extras.highcharts_graph_1 == 'temperatureplot' or $Extras.highcharts_graph_2 == 'temperatureplot' or $Extras.highcharts_graph_3 == 'temperatureplot' or $Extras.highcharts_graph_4 == 'temperatureplot' or $Extras.highcharts_graph_5 == 'temperatureplot' or $Extras.highcharts_graph_6 == 'temperatureplot'
        
        var i = 2; // Start at 2 to have Temperature and Dew Point as first 2 chart series.
        
        optionsTemp.yAxis.title.text = seriesData[0].temperatureplot.yAxisLabel.text;
        
        optionsTemp.series[0] = seriesData[0].temperatureplot.series.outTemp;
        optionsTemp.series[1] = seriesData[0].temperatureplot.series.dewpoint;
                    
        #if $Extras.has_key('highcharts_show_windchill') and $Extras.highcharts_show_windchill == '1'
        optionsTemp.series[i] = seriesData[0].windchillplot.series.windchill;
        optionsTemp.series[i].color = "#90ed7d"; // Always set wind chill to the green color no matter its order
        i++;
        #end if
        
        #if $Extras.has_key('highcharts_show_heatindex') and $Extras.highcharts_show_heatindex == '1'
        optionsTemp.series[i] = seriesData[0].windchillplot.series.heatindex;
        optionsTemp.series[i].color = "#f7a35c"; // Always set heat to the orange color no matter its order
        i++;
        #end if

        #if $Extras.has_key('highcharts_show_apptemp') and $Extras.highcharts_show_apptemp == '1'
        optionsTemp.series[i] = seriesData[0].temperatureplot.series.appTemp;
        optionsTemp.series[i].color = "#8085e9"; // Always set apptemp to purple no matter its order
        i++;
        #end if
        
        #if $Extras.has_key('highcharts_show_intemp') and $Extras.highcharts_show_intemp == '1'
        optionsTemp.series[i] = seriesData[0].temperatureplot.series.inTemp;
        optionsTemp.series[i].color = "#f47142"; // Always set intemp to orange no matter its order
        i++;
        #end if
        
        var chart = new Highcharts.StockChart(optionsTemp);
                
        #end if
        // End of Temperature Chart
        
        // Load a chart based on whats selected in options
        #if $Extras.highcharts_graph_1 == 'windchillplot' or $Extras.highcharts_graph_2 == 'windchillplot' or $Extras.highcharts_graph_3 == 'windchillplot' or $Extras.highcharts_graph_4 == 'windchillplot' or $Extras.highcharts_graph_5 == 'windchillplot' or $Extras.highcharts_graph_6 == 'windchillplot'
        var chart = new Highcharts.StockChart(optionsWindchill);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'humidityplot' or $Extras.highcharts_graph_2 == 'humidityplot' or $Extras.highcharts_graph_3 == 'humidityplot' or $Extras.highcharts_graph_4 == 'humidityplot' or $Extras.highcharts_graph_5 == 'humidityplot' or $Extras.highcharts_graph_6 == 'humidityplot'
        var chart = new Highcharts.StockChart(optionsHumidity);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'barometerplot' or $Extras.highcharts_graph_2 == 'barometerplot' or $Extras.highcharts_graph_3 == 'barometerplot' or $Extras.highcharts_graph_4 == 'barometerplot' or $Extras.highcharts_graph_5 == 'barometerplot' or $Extras.highcharts_graph_6 == 'barometerplot'
        var chart = new Highcharts.StockChart(optionsBarometer);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'windplot' or $Extras.highcharts_graph_2 == 'windplot' or $Extras.highcharts_graph_3 == 'windplot' or $Extras.highcharts_graph_4 == 'windplot' or $Extras.highcharts_graph_5 == 'windplot' or $Extras.highcharts_graph_6 == 'windplot'
        var chart = new Highcharts.StockChart(optionsWind);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'winddirplot' or $Extras.highcharts_graph_2 == 'winddirplot' or $Extras.highcharts_graph_3 == 'winddirplot' or $Extras.highcharts_graph_4 == 'winddirplot' or $Extras.highcharts_graph_5 == 'winddirplot' or $Extras.highcharts_graph_6 == 'winddirplot'
        var chart = new Highcharts.StockChart(optionsWindDir);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'rainplot' or $Extras.highcharts_graph_2 == 'rainplot' or $Extras.highcharts_graph_3 == 'rainplot' or $Extras.highcharts_graph_4 == 'rainplot' or $Extras.highcharts_graph_5 == 'rainplot' or $Extras.highcharts_graph_6 == 'rainplot'
        var chart = new Highcharts.StockChart(optionsRain);
        #end if
        
        #if $Extras.highcharts_graph_1 == 'radiationplot' or $Extras.highcharts_graph_2 == 'radiationplot' or $Extras.highcharts_graph_3 == 'radiationplot' or $Extras.highcharts_graph_4 == 'radiationplot' or $Extras.highcharts_graph_5 == 'radiationplot' or $Extras.highcharts_graph_6 == 'radiationplot'
        var chart = new Highcharts.StockChart(optionsRadiation);
        #end if        
                
    });

};