SHARE
TWEET

Untitled

a guest Nov 22nd, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>BabyName SQL Chart PL</title>
  7.     <link rel="stylesheet" href="./css/BabyNamesMobile.css">
  8.     <!-- This is not a secure content policy, should be locked down for prod -->
  9.     <meta http-equiv="Content-Security-Policy"
  10.         content="default-src 'self' data: gap: 'unsafe-inline'
  11.                    https://ssl.gstatic.com
  12.                    https://*.phonegap.com;
  13.                 style-src 'self' 'unsafe-inline';
  14.                 script-src  'self' 'unsafe-inline' 'unsafe-eval'
  15.                    http://mysqljs.com
  16.                    https://cdnjs.cloudflare.com
  17.                     https://*.phonegap.com ;
  18.                 media-src *" />
  19.     <!-- ======================================================================================== -->
  20.     <!-- script for chart -->
  21.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  22.    
  23. <style>
  24.     /* portrait/landscape styles */
  25.         * {
  26.             box-sizing    : border-box;
  27.             margin        : 0;
  28.             font-family   : sans-serif;
  29.         }
  30.        
  31.         html, body  {
  32.             height        : 100vh;
  33.             width         : 100vw;
  34.         }
  35.  
  36.         @media (orientation: portrait) {
  37.             /* h2::after { content: "Portrait Mode"                    }
  38.             h3::after { content: "Height: Head: 20vh, Main: 80vh"   }
  39.             h4::after { content: "Width: Head: 100vw, Main: 100vw"  } */
  40.             #head { height: 30vh;   }
  41.             #main { height: 70vh;   }
  42.             #head { width:  100vw;  }
  43.             #main { width:  100vw;  }
  44.             #head { float:  none;   }
  45.             #main { float:  none;   }
  46.            
  47.         }
  48.        
  49.         @media (orientation: landscape) {
  50.             /* h2::after { content: "Landscape Mode"                   }
  51.             h3::after { content: "Height: Head: 100vh, Main: 100vh" }
  52.             h4::after { content: "Width: Head: 50vw, Main: 50vw"    } */
  53.             #head { height: 100vh;  }
  54.             #main { height: 100vh;  }
  55.             #head { width:  50vw;   }
  56.             #main { width:  50vw;   }
  57.             #head { float:  left;   }
  58.             #main { float:  left;   }
  59.  
  60.         }
  61.  
  62.         #head { background-color: cadetblue;}
  63.         #main { background-color: cornsilk;}
  64.  
  65. /* ===================================== style for chart ======================================= */
  66.  
  67. /* style for baby names dropdown boxes */
  68. * {
  69.             box-sizing          : border-box;
  70.             margin              : 0;
  71.             font-family         : sans-serif;
  72.             overflow            : hidden;
  73.         }
  74.  
  75.         body, html  {
  76.             height                  : 100vh;
  77.             width                   : 100vw;
  78.            
  79.         }
  80.  
  81.         #head    {
  82.             background-color    : cadetblue;
  83.             /* height: vh; */
  84.         }
  85.  
  86.        
  87.         #sqlDebug  {
  88.             margin              : 3vh;
  89.  
  90.         }
  91.  
  92.         #sqlDebug pre {
  93.             background-color    : lightblue;
  94.             border              : 1px solid black;
  95.             border-radius       : 2vw;
  96.             padding             : 0.5vw;
  97.             font-size           : 2vw;
  98.  
  99.  
  100.         }
  101.  
  102.         pre span, pre {
  103.             font-family         : monospace;
  104.         }
  105.  
  106.         h1 {
  107.             text-align          : center;
  108.         }
  109.  
  110.         #controlDiv {
  111.             margin              : 0 auto;
  112.             text-align          : center;
  113.             padding-top         : 1vw;
  114.         }
  115.  
  116.         #controlDiv button, select {
  117.             width               : 15vw;
  118.             height              : 4vw;
  119.             font-size           : 2vw;
  120.             vertical-align      : middle;
  121.         }        
  122.  
  123.  
  124.     </style>
  125. </head>
  126.  
  127. <body onload="initialize()">
  128.  
  129. <!-- ========================================  head ======================================== -->
  130.     <!-- includes the drop down boxes options -->
  131.     <div id="head">
  132.         <div id="controlDiv">
  133.             <h2>Top Baby Names</h2>
  134.             <select name="state" id="stateId" onchange="updateState(value)">
  135.                 <option value="AL">Alabama</option>
  136.                 <option value="AK">Alaska</option>
  137.                 <option value="AZ">Arizona</option>
  138.                 <option value="AR">Arkansas</option>
  139.                 <option value="CA">California</option>
  140.                 <option value="CO">Colorado</option>
  141.                 <option value="CT">Connecticut</option>
  142.                 <option value="DE">Delaware</option>
  143.                 <option value="DC">District Of Columbia</option>
  144.                 <option value="FL">Florida</option>
  145.                 <option value="GA">Georgia</option>
  146.                 <option value="HI">Hawaii</option>
  147.                 <option value="ID">Idaho</option>
  148.                 <option value="IL">Illinois</option>
  149.                 <option value="IN">Indiana</option>
  150.                 <option value="IA">Iowa</option>
  151.                 <option value="KS">Kansas</option>
  152.                 <option value="KY">Kentucky</option>
  153.                 <option value="LA">Louisiana</option>
  154.                 <option value="ME">Maine</option>
  155.                 <option value="MD">Maryland</option>
  156.                 <option value="MA">Massachusetts</option>
  157.                 <option value="MI">Michigan</option>
  158.                 <option value="MN">Minnesota</option>
  159.                 <option value="MS">Mississippi</option>
  160.                 <option value="MO">Missouri</option>
  161.                 <option value="MT">Montana</option>
  162.                 <option value="NE">Nebraska</option>
  163.                 <option value="NV">Nevada</option>
  164.                 <option value="NH">New Hampshire</option>
  165.                 <option value="NJ">New Jersey</option>
  166.                 <option value="NM">New Mexico</option>
  167.                 <option value="NY">New York</option>
  168.                 <option value="NC">North Carolina</option>
  169.                 <option value="ND">North Dakota</option>
  170.                 <option value="OH">Ohio</option>
  171.                 <option value="OK">Oklahoma</option>
  172.                 <option value="OR">Oregon</option>
  173.                 <option value="PA">Pennsylvania</option>
  174.                 <option value="RI">Rhode Island</option>
  175.                 <option value="SC">South Carolina</option>
  176.                 <option value="SD">South Dakota</option>
  177.                 <option value="TN">Tennessee</option>
  178.                 <option value="TX">Texas</option>
  179.                 <option value="UT">Utah</option>
  180.                 <option value="VT">Vermont</option>
  181.                 <option value="VA">Virginia</option>
  182.                 <option value="WA">Washington</option>
  183.                 <option value="WV">West Virginia</option>
  184.                 <option value="WI">Wisconsin</option>
  185.                 <option value="WY">Wyoming</option>
  186.             </select>  
  187.            
  188.             <select name="sex" id="sexId" onchange="updateSex(value)">
  189.                 <option value="girl">Girl</option>
  190.                 <option value="boy">Boy</option>
  191.             </select>
  192.  
  193.             <select name="year" id="yearId" onchange="updateYear(value)">
  194.                 <option value="1960">1960</option>
  195.                 <option value="1961">1961</option>
  196.                 <option value="1962">1962</option>
  197.                 <option value="1963">1963</option>
  198.                 <option value="1964">1964</option>
  199.                 <option value="1965">1965</option>
  200.                 <option value="1966">1966</option>
  201.                 <option value="1967">1967</option>
  202.                 <option value="1968">1968</option>
  203.                 <option value="1969">1969</option>
  204.                 <option value="1970">1970</option>
  205.                 <option value="1971">1971</option>
  206.                 <option value="1972">1972</option>
  207.                 <option value="1973">1973</option>
  208.                 <option value="1974">1974</option>
  209.                 <option value="1975">1975</option>
  210.                 <option value="1976">1976</option>
  211.                 <option value="1977">1977</option>
  212.                 <option value="1978">1978</option>
  213.                 <option value="1979">1979</option>
  214.                 <option value="1980">1980</option>
  215.                 <option value="1981">1981</option>
  216.                 <option value="1982">1982</option>
  217.                 <option value="1983">1983</option>
  218.                 <option value="1984">1984</option>
  219.                 <option value="1985">1985</option>
  220.                 <option value="1986">1986</option>
  221.                 <option value="1987">1987</option>
  222.                 <option value="1988">1988</option>
  223.                 <option value="1989">1989</option>
  224.                 <option value="1990">1990</option>
  225.                 <option value="1991">1991</option>
  226.                 <option value="1992">1992</option>
  227.                 <option value="1993">1993</option>
  228.                 <option value="1994">1994</option>
  229.                 <option value="1995">1995</option>
  230.                 <option value="1996">1996</option>
  231.                 <option value="1997">1997</option>
  232.                 <option value="1998">1998</option>
  233.                 <option value="1999">1999</option>
  234.                 <option value="2000">2000</option>
  235.                 <option value="2001">2001</option>
  236.                 <option value="2002">2002</option>
  237.                 <option value="2003">2003</option>
  238.                 <option value="2004">2004</option>
  239.                 <option value="2005">2005</option>
  240.                 <option value="2006">2006</option>
  241.                 <option value="2007">2007</option>
  242.                 <option value="2008">2008</option>                
  243.             </select>
  244.  
  245.             <!-- <button type="button" onclick="runQuery()">Run</button> -->
  246.         </div>
  247.         <div id="sqlDebug">
  248.             <pre><p id="queryStingId"></p></pre>
  249.         </div>
  250.     </div>
  251.  
  252.  
  253.     <!-- ==================================== chart main canvas div ========================================== -->
  254.     <div id="main">
  255.             <canvas id="chartCanvasId"></canvas>
  256.    
  257.     <!-- chart scripting  -->
  258.     <script>
  259.         // NOT WORKING not sure how to add a border around the chart bar
  260.        
  261.         </script>
  262.     </div>
  263.  
  264.    
  265.  
  266.     <script src="cordova.js"></script>
  267.     <script src="http://mysqljs.com/mysql.js"></script>
  268.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  269.     <script src="./js/BabyNamesMobile.js"></script>
  270.  
  271.     <!-- BabyNameWebApp sql script -->
  272.     <script src="http://mysqljs.com/mysql.js"></script>
  273.     <script>
  274.         // default query values
  275.         var state       = "AL"
  276.         var sex         = "girl"
  277.         var year        = "1960"
  278.         var queryString = ""
  279.    
  280.         function updateState(value) {
  281.             state = value
  282.             updateQueryString()
  283.             runQuery()
  284.         }
  285.  
  286.         function updateSex(value)   {
  287.             sex = value
  288.             updateQueryString()
  289.             runQuery()
  290.         }
  291.  
  292.         function updateYear(value)  {
  293.             year = value
  294.             updateQueryString()
  295.             runQuery()
  296.         }
  297.  
  298.         function initialize() {
  299.             updateQueryString()
  300.             runQuery()
  301.         }
  302.        
  303.         function updateQueryString() {
  304.             queryString =
  305.  
  306.               "SELECT name, number, state, sex, year \n"
  307.             + "FROM   NamesNumberByStateYear \n"
  308.             + "WHERE\n "
  309.             + " state = "    + "'" + state   + "'"
  310.             + " AND sex = "  + "'" + sex     + "'"
  311.             + " AND year = " + "'" + year    + "'\n"
  312.             + "ORDER BY number DESC LIMIT 5;"
  313.             document.getElementById('queryStingId').innerHTML = queryString;
  314.         }
  315.  
  316.         function runQuery() {
  317.             MySql.Execute(
  318.                 "sql.wpc-is.online",    // mySQL server
  319.                 "demo",                 // login name
  320.                 "demo12345",            // login password
  321.                 "BabyNames",            // database to use
  322.                                         // SQL query string:
  323.                 queryString,
  324.                 function (data) {
  325.                     processQueryResult(data);
  326.                 }
  327.             );
  328.         }
  329.  
  330.         function processQueryResult(queryReturned) {
  331.             if (!queryReturned.Success) {
  332.                 alert(queryReturned.Error)
  333.             } else {
  334.             let namesDefault   = ["Mary", "Lisa", "Patricia", "Linda", "Susan"]
  335.             let numbersDefault = [407, 250, 245, 241, 214]
  336.             data = queryReturned.Result;
  337.             names = [];
  338.             numbers = [];
  339.  
  340.             for (let i=0; i<data.length;i++) {
  341.            names.push(data[i].name)
  342.            numbers.push(data[i].number)
  343.        }
  344.  
  345.            let chartCanvas  = document.getElementById('chartCanvasId')
  346.            let chartContext = chartCanvas.getContext('2d')
  347.  
  348.        let myChart = new Chart(chartContext, {
  349.            type: 'bar',
  350.            data: {
  351.                labels: names,
  352.                datasets: [{
  353.                    label: 'Number of Babies Named...',
  354.                    data: numbers,
  355.                    borderColor: "black",
  356.                    borderWidth: 3,
  357.                    backgroundColor:[
  358.                        'blue',
  359.                        'red',
  360.                        'white',
  361.                        'yellow',
  362.                        'green'
  363.                    ],
  364.                }]
  365.            },
  366.            options: {
  367.                title: {
  368.                    display: true,
  369.                    text: "Most Popular " + sex + " Names from " + state + " in " + year + "."
  370.                    // "Most Popular Girl Names from Alabama in 1960"
  371.                    // "Most Popular" + sex + "Names from" + state + "in " + year + "."
  372.                },
  373.                showTooltips : false,
  374.                responsive: true,           // chartjs RWD requirement
  375.                maintainAspectRatio: false,  // chartjs RWD requirement
  376.                legend: false
  377.            }
  378.        });
  379.                 document.getElementById("output").innerHTML =
  380.                     JSON.stringify(queryReturned.Result, null, 2);
  381.            }
  382.         }
  383.     </script>
  384. </body>
  385.  
  386. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top