Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Disclaimer: I hate HTML/CSS/JS
        Hours spent on this dumb assignment: 3
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabyName SQL Chart PL</title>
    <link rel="stylesheet" href="./css/BabyNamesMobile.css">
    <!-- This is not a secure content policy, should be locked down for prod -->
    <meta http-equiv="Content-Security-Policy"
        content="default-src 'self' data: gap: 'unsafe-inline'
                    https://ssl.gstatic.com
                    https://*.phonegap.com;
                style-src 'self' 'unsafe-inline';
                script-src  'self' 'unsafe-inline' 'unsafe-eval'
                    http://mysqljs.com
                    https://cdnjs.cloudflare.com
                    https://*.phonegap.com ;
                media-src *" />
    <!-- ======================================================================================== -->
    <!-- script for chart -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<style>
    /* portrait/landscape styles */
        * {
            box-sizing    : border-box;
            margin        : 0;
            font-family   : sans-serif;
        }

        html, body  {
            height        : 100vh;
            width         : 100vw;
        }

        @media (orientation: portrait) {
            /* h2::after { content: "Portrait Mode"                    }
            h3::after { content: "Height: Head: 20vh, Main: 80vh"   }
            h4::after { content: "Width: Head: 100vw, Main: 100vw"  } */
            #head { height: 20vh;   }
            #main { height: 80vh;   }
            #head { width:  100vw;  }
            #main { width:  100vw;  }
            #head { float:  none;   }
            #main { float:  none;   }
        }
        /* NOT WORKING Landscape mode, not sure why and super frustrating */
        @media (orientation: landscape) {
            /* h2::after { content: "Landscape Mode"                   }
            h3::after { content: "Height: Head: 100vh, Main: 100vh" }
            h4::after { content: "Width: Head: 50vw, Main: 50vw"    } */
            #head { height: 100vh;  }
            #main { height: 100vh;  }
            #head { width:  50vw;   }
            #main { width:  50vw;   }
            #head { float:  left;   }
            #main { float:  left;   }
        }

        #head { background-color: cadetblue;
        height: 30vh; }
        #main { background-color: cornsilk;
        height: 70vh; }

/* ===================================== style for chart ======================================= */

/* style for baby names dropdown boxes */
* {
            box-sizing          : border-box;
            margin              : 0;
            font-family         : sans-serif;
        }

        body, html  {
            height                  : 100vh;
            width                   : 100vw;
        }

        #head    {
            background-color    : cadetblue;
            height: vh;
        }


        #sqlDebug  {
            margin              : 3vh;
        }

        #sqlDebug pre {
            background-color    : lightblue;
            border              : 1px solid black;
            border-radius       : 2vw;
            padding             : 0.5vw;
            font-size           : 2vw;
        }

        pre span, pre {
            font-family         : monospace;
        }

        h1 {
            text-align          : center;
        }

        #controlDiv {
            width               : 100vw;
            margin              : 0 auto;
            text-align          : center;
            padding-top         : 1vw;
        }

        #controlDiv button, select {
            width               : 20vw;
            height              : 6vw;
            font-size           : 3vw;
            vertical-align      : middle;
        }


    </style>
</head>

<body onload="initialize()">


    <div id="head">
        <div id="controlDiv">
            <h1>Top Baby Names</h1>
            <select name="state" id="stateId" onchange="updateState(value)">
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="DC">District Of Columbia</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
            </select>

            <select name="sex" id="sexId" onchange="updateSex(value)">
                <option value="girl">Girl</option>
                <option value="boy">Boy</option>
            </select>

            <select name="year" id="yearId" onchange="updateYear(value)">
                <option value="1960">1960</option>
                <option value="1961">1961</option>
                <option value="1962">1962</option>
                <option value="1963">1963</option>
                <option value="1964">1964</option>
                <option value="1965">1965</option>
                <option value="1966">1966</option>
                <option value="1967">1967</option>
                <option value="1968">1968</option>
                <option value="1969">1969</option>
                <option value="1970">1970</option>
                <option value="1971">1971</option>
                <option value="1972">1972</option>
                <option value="1973">1973</option>
                <option value="1974">1974</option>
                <option value="1975">1975</option>
                <option value="1976">1976</option>
                <option value="1977">1977</option>
                <option value="1978">1978</option>
                <option value="1979">1979</option>
                <option value="1980">1980</option>
                <option value="1981">1981</option>
                <option value="1982">1982</option>
                <option value="1983">1983</option>
                <option value="1984">1984</option>
                <option value="1985">1985</option>
                <option value="1986">1986</option>
                <option value="1987">1987</option>
                <option value="1988">1988</option>
                <option value="1989">1989</option>
                <option value="1990">1990</option>
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
                <option value="1994">1994</option>
                <option value="1995">1995</option>
                <option value="1996">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
                <option value="2000">2000</option>
                <option value="2001">2001</option>
                <option value="2002">2002</option>
                <option value="2003">2003</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
            </select>

            <!-- <button type="button" onclick="runQuery()">Run</button> -->
        </div>
        <div id="sqlDebug">
            <pre><span id="queryStingId"></span></pre>
        </div>
    </div>


    <!-- ==================================== chart main canvas div ========================================== -->
    <div id="main">
            <canvas id="chartCanvasId"></canvas>

    <!-- chart scripting  -->
    <script>
        // NOT WORKING not sure how to add a border around the chart bar

        </script>
    </div>


    <script src="cordova.js"></script>
    <script src="http://mysqljs.com/mysql.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script src="./js/BabyNamesMobile.js"></script>

    <!-- BabyNameWebApp sql script -->
    <script src="http://mysqljs.com/mysql.js"></script>
    <script>
        // default query values
        var state       = "AL"
        var sex         = "girl"
        var year        = "1960"
        var queryString = ""

        function updateState(value) {
            state = value
            updateQueryString()
            runQuery()
        }

        function updateSex(value)   {
            sex = value
            updateQueryString()
            runQuery()
        }

        function updateYear(value)  {
            year = value
            updateQueryString()
            runQuery()
        }

        function initialize() {
            updateQueryString()
            runQuery()
        }

        function updateQueryString() {
            queryString =

              "SELECT name, number, state, sex, year \n"
            + "FROM   NamesNumberByStateYear \n"
            + "WHERE\n "
            + " state = "    + "'" + state   + "'"
            + " AND sex = "  + "'" + sex     + "'"
            + " AND year = " + "'" + year    + "'\n"
            + "ORDER BY number DESC LIMIT 5;"
            document.getElementById('queryStingId').innerHTML = queryString;
        }

        function runQuery() {
            MySql.Execute(
                "sql.wpc-is.online",    // mySQL server
                "demo",                 // login name
                "demo12345",            // login password
                "BabyNames",            // database to use
                                        // SQL query string:
                queryString,
                function (data) {
                    processQueryResult(data);
                }
            );
        }

        function processQueryResult(queryReturned) {
            if (!queryReturned.Success) {
                alert(queryReturned.Error)
            } else {
            let names   = ["Mary", "Lisa", "Patricia", "Linda", "Susan"]
            let numbers = [407, 250, 245, 241, 214]
            data = queryReturned.Result;
            names = [];
            number = [];

            for (let i=0; i<data.length;i++) {
            names.push(data[i].name)
            numbers.push(data[i].number)
        }

            let chartCanvas  = document.getElementById('chartCanvasId')
            let chartContext = chartCanvas.getContext('2d')

        let myChart = new Chart(chartContext, {
            type: 'bar',
            data: {
                labels: names,
                datasets: [{
                    // NOT WORKING cant get label to disappear
                    label: 'Number of Babies Named...',
                    data: numbers,
                    backgroundColor:[
                        'blue',
                        'red',
                        'grey',
                        'yellow',
                        '#eee',
                    ]
                }]
            },
            options: {
                title: {
                    display: true,
                    // NOT WORKING cant get this text to update
                    text: "Most Popular " + sex + " Names from " + state + " in " + year + "."
                    // "Most Popular Girl Names from Alabama in 1960"
                    // "Most Popular" + sex + "Names from" + state + "in " + year + "."
                },
                responsive: true,           // chartjs RWD requirement
                maintainAspectRatio: false,  // chartjs RWD requirement
                legend: false
            }
        });
                document.getElementById("output").innerHTML =
                    JSON.stringify(queryReturned.Result, null, 2);
            }
        }
    </script>
</body>

</html>
<!-- NOT WORKING no idea how to populate the JSON data into the chart, no clue where to even put this in the code -->
<!-- NOT WORKING no idea how to perform a search dynamically without a run button, no idea where to put this in the code -->