API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 22nd, 2019
152
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.25 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!