Google Bar Chart w/ weather of time

by jacobwsmith

HTML

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
</div>
<script>
        /*
 (c) 2011-2014, Vladimir Agafonkin
 SunCalc is a JavaScript library for calculating sun/mooon position and light phases.
 https://github.com/mourner/suncalc
*/

(function () { 'use strict';

// shortcuts for easier to read formulas

var PI   = Math.PI,
    sin  = Math.sin,
    cos  = Math.cos,
    tan  = Math.tan,
    asin = Math.asin,
    atan = Math.atan2,
    acos = Math.acos,
    rad  = PI / 180;

// sun calculations are based on http://aa.quae.nl/en/reken/zonpositie.html formulas


// date/time constants and conversions

var dayMs = 1000 * 60 * 60 * 24,
    J1970 = 2440588,
    J2000 = 2451545;

function toJulian(date) { return date.valueOf() / dayMs - 0.5 + J1970; }
function fromJulian(j)  { return new Date((j + 0.5 - J1970) * dayMs); }
function toDays(date)   { return toJulian(date) - J2000; }


// general calculations for position

var e = rad * 23.4397; // obliquity of the Earth

function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); }
function declination(l, b)    { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); }

function azimuth(H, phi, dec)  { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); }
function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); }

function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; }


// general sun calculations

function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); }

function eclipticLongitude(M) {

    var C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center
        P = rad * 102.9372; // perihelion of the Earth

    return M + C + P + PI;
}

function sunCoords(d) {

    var M = solarMeanAnomaly(d),
        L = eclipticLongitude(M);

    return {
        dec: declination(L, 0),
        ra: rightAscension(L, 0)
    };
}


var...

CSS

#chart_div {
    width: 100vw;
    height: 100vh;
}

JavaScript

// =========================================
// Single line chart (working)
// =========================================
google.load('visualization', '1', {
    packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
    
    var lat = 45.6834528,
        lon= -121.397295,
        times = SunCalc.getTimes(new Date("2015-06-10T04:00:00-07:00"), lat, lon);
    
    console.log(times);
    console.log(times.sunrise);
    console.log(times.sunset);
    
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Days');
    data.addColumn('number', 'Wind');
    data.addColumn('number', 'Night Time');
    data.addRows([
        [new Date("2015-06-10T04:00:00-07:00"), 0, null],
        [new Date("2015-06-10T06:00:00-07:00"), 10, null],
        [new Date("2015-06-10T18:00:00-07:00"), 23, null],
        [new Date("2015-06-16T06:00:00-07:00"), 17, null]
    ]);
    
    // Sunrise/Sunset Test
    // TODO: 
    // 1. Find Max Value
    // 2. Find Day Ranges
    // 3. Calculate Sunrise & Sunset for each day
    // 4. For first day add in night time if needed
    // 5. For last day add in night if needed
    // 6. Area chart for night time?
    data.addRows([
        [new Date("2015-06-10T00:00:00-07:00"), null, 23],
        [times.sunrise, null, 23],
        
        // Day time begins
        // Add one minute to sunrise
        [new Date("2015-06-10T05:17:00-07:00"), null, null],
        
        [times.sunset, null, 23],
        [new Date("2015-06-10T23:59:00-07:00"), null, 23],
    ]);
    
    var options = {
        hAxis: {
            title: 'Date'
        },
        vAxis: {
            title: 'Wind'
        }
    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}