Sunrise Sunset

by gsommer

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
    <div class="container-fluid">
        <div class="row">

            <div class="col-xs-5">
                <h2>Sunrise / Sunset</h2>
                <p>Select a location to see a graph of sunrise and sunset times:</p>
                <select class="form-control" id="dropLocation" >
                    <option value="default" disabled="disabled">Select a location</option>
                </select>
                <br/><br/>
            </div>
        </div>
    </div>
    <div id="chartContainer" style="border: 1px solid black; margin: 0 10px; padding: 20px; border-radius: 20px; background-color: white;display:none;">
        <div id="chartDiv"></div>
        <div id="totalDiv"></div>
    </div>

JavaScript

var locations = [
            { place: 'New York, NY',        lat: 40.712784, lng: -74.005941, tz: -5 },
            { place: 'Miami, FL',           lat: 25.761680, lng: -80.191790, tz: -5 },
            { place: 'Ann Arbor, MI',       lat: 42.280826, lng: -83.743038, tz: -5 },
            { place: 'Chicago, IL',         lat: 41.878114, lng: -87.629798, tz: -6 },
            { place: 'Denver, CO',          lat: 39.739236, lng: -104.990251, tz: -7 },
            { place: 'Los Angeles, CA',     lat: 34.052234, lng: -118.243685, tz: -8 },
            { place: 'San Diego, CA',       lat: 32.715738, lng: -117.161084, tz: -8 },
            { place: 'San Francisco, CA',   lat: 37.774929, lng: -122.419416, tz: -8 },
            { place: 'Seattle, WA',         lat: 47.606209, lng: -122.332071, tz: -8 }
        ];

        var suntimes = [];  // array of sunrise and sunset times per day, as # minutes from midnight
        var chartingIsReady = false;

        // when jQuery is ready, which should be a bit later
        $(document).ready(function () {
            populateLocationDropdown();
            $(window).resize(drawChart);
        });

        // Load the Visualization API immediately, before invoking the jQuery ready function
        google.load('visualization', '1.0', { 'packages': ['corechart'] });
        google.setOnLoadCallback(function () {
            chartingIsReady = true;
        });

        function drawChart() {
            // check if google chart is ready and we have data 
            if (!chartingIsReady) return;
            if (suntimes.length < 365) return;
            
            $("#chartContainer").show();
            
            // resize to take up the remainder of the vertical space
            var height = $(window).height();
            var drawTop = $("#chartDiv").offset().top + 75;    // add buffer from the bottom, which compensates for the browser toolbar

            // Create the data table, indicating first row is data rather than...