API tools faq
paste
BROTH3RCAST

Sito web con il grafico

BROTH3RCAST
May 27th, 2021 (edited)
1,007
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.86 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>Grafici SQL settimana</title>
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  7.     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  8.     <link rel="stylesheet" href="index.css">
  9. </head>
  10.  
  11. <body>
  12.     <div class="page-wrap">
  13.         <div class="top">
  14.             <div class="logo">
  15.                 <img src="https://imgur.com/DQ952ML.png" alt="Logo non disponibile" width="100%" height="auto">
  16.             </div>
  17.         </div>
  18.         <div class="selezione">
  19.             <div class="stazione"><label for="stazione">Inserisci il codice della stazione:</label>
  20.                 <input type="text" id="stazione" name="stazione" value="3C:61:05:1D:92:4C">
  21.             </div>
  22.             <div class="date"><label for="date">Inserisci la data:</label>
  23.                 <input type="date" id="date" name="date" value="2020-09-30">
  24.             </div>
  25.             <div class="tipo"><label for="tipo">Scegli l'arco temporale::</label>
  26.                 <select name="tipo" id="tipo">
  27.                     <option value="1">Giornaliero</option>
  28.                     <option value="2">Settimana min</option>
  29.                     <option value="3">Settimana avg</option>
  30.                     <option value="4">Settimana max</option>
  31.                     <option value="5">Mensile min</option>
  32.                     <option value="6">Mensile avg</option>
  33.                     <option value="7">Mensile max</option>
  34.                     <option value="8">Annuale min</option>
  35.                     <option value="9">Annuale avg</option>
  36.                     <option value="10">Annuale max</option>
  37.                 </select>
  38.             </div>
  39.             <div class="rap">
  40.                 <label for="rap">Tipo di grafico:</label>
  41.                 <select name="rap" id="rap">
  42.                     <option value="bar">Barre</option>
  43.                     <option value="line">Linee</option>
  44.                 </select>
  45.             </div>
  46.             <div class="applica"><input type="button" onclick="grafico()" value="Applica" /></div>
  47.  
  48.            
  49.  
  50.         </div>
  51.         <div class="grafico">
  52.             <canvas id="graficov" width="100%" height="50%"></canvas>
  53.         </div>
  54.     </div>
  55.     <script>
  56.         var graficov
  57.  
  58.         function grafico() {
  59.             update();
  60.             $.ajax({
  61.                 type: "POST",
  62.                 url: "data.php",
  63.                 data: {
  64.                     'stazione': $("#stazione").val(),
  65.                     'date': $("#date").val(),
  66.                     'tipo': document.getElementById("tipo").value,
  67.                 },
  68.                 success: function(response) {
  69.                     console.log(response);
  70.                     var time = [];
  71.                     var timeg = [];
  72.                     var times = [];
  73.                     var timem = [];
  74.                     var timea = [];
  75.                     var temperatura = [];
  76.                     var umidita = [];
  77.                     var pressione = [];
  78.                     var altitudine = [];
  79.                     var lng = [];
  80.                     var lat = [];
  81.                     var noise = [];
  82.                     var co2 = [];
  83.                     var tvoc = [];
  84.                     var uv = [];
  85.  
  86.                     for (var i in response) {
  87.                         time.push(response[i].orarilevazione);
  88.                         timem.push(response[i].anno + "-" + response[i].mese + "-" + response[i].giorno);
  89.                         timea.push(response[i].anno + "-" + response[i].mese);
  90.                         temperatura.push(response[i].temperatura);
  91.                         umidita.push(response[i].umidita);
  92.                         pressione.push(response[i].pressione);
  93.                         altitudine.push(response[i].altitudine);
  94.                         lng.push(response[i].lng);
  95.                         lat.push(response[i].lat);
  96.                         noise.push(response[i].noise);
  97.                         co2.push(response[i].co2);
  98.                         tvoc.push(response[i].tvoc);
  99.                         uv.push(response[i].uv);
  100.                     }
  101.                     var ctx = document.getElementById('graficov').getContext('2d');
  102.                     var rap = document.getElementById("rap").value;
  103.                    
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.                     var test;
  111.  
  112.                     graficov = new Chart(ctx, {
  113.                                 type: rap,
  114.                                 data: {
  115.                                     datasets: [{
  116.                                             label: 'temperatura',
  117.                                             data: temperatura,
  118.                                             backgroundColor: '#ff0000',
  119.                                             fill: false,
  120.                                             borderColor: '#ff0000',
  121.                                         }, {
  122.                                             label: 'umidita',
  123.                                             data: umidita,
  124.                                             backgroundColor: '#ff8000',
  125.                                             fill: false,
  126.                                             borderColor: '#ff8000',
  127.                                         }, {
  128.                                             label: 'pressione',
  129.                                             data: pressione,
  130.                                             backgroundColor: '#ffff00',
  131.                                             fill: false,
  132.                                             borderColor: '#ffff00',
  133.                                         },
  134.  
  135.                                         {
  136.                                             label: 'altitudine',
  137.                                             data: altitudine,
  138.                                             backgroundColor: '#80ff00',
  139.                                             fill: false,
  140.                                             borderColor: '#80ff00',
  141.                                         }, {
  142.                                             label: 'lng',
  143.                                             data: lng,
  144.                                             backgroundColor: '#00ff40',
  145.                                             fill: false,
  146.                                             borderColor: '#00ff40',
  147.                                         }, {
  148.                                             label: 'lat',
  149.                                             data: lat,
  150.                                             backgroundColor: '#00ffff',
  151.                                             fill: false,
  152.                                             borderColor: '#00ffff',
  153.                                         },
  154.  
  155.                                         {
  156.                                             label: 'noise',
  157.                                             data: noise,
  158.                                             backgroundColor: '#0000ff',
  159.                                             fill: false,
  160.                                             borderColor: '#0000ff',
  161.                                         },
  162.  
  163.                                         {
  164.                                             label: 'CO2',
  165.                                             data: co2,
  166.                                             backgroundColor: '#8000ff',
  167.                                             fill: false,
  168.                                             borderColor: '#8000ff',
  169.                                         }, {
  170.                                             label: 'TVOC',
  171.                                             data: tvoc,
  172.                                             backgroundColor: '#ff00bf',
  173.                                             fill: false,
  174.                                             borderColor: '#ff00bf',
  175.                                         }, {
  176.                                             label: 'UV',
  177.                                             data: uv,
  178.                                             backgroundColor: '#008744',
  179.                                             fill: false,
  180.                                             borderColor: '#008744',
  181.                                         }
  182.                                     ],
  183.                                     labels: time
  184.                                 },
  185.                                 options: {
  186.                                     legend: {
  187.                                         labels: {
  188.                                             fontColor: 'white',
  189.                                             defaultFontSize: '10'
  190.                                         }
  191.                                     },
  192.                                     scales: {
  193.                                         yAxes: [{
  194.                                             ticks: {
  195.                                                 fontColor: 'white',
  196.                                                 beginAtZero: true,
  197.                                                 fontSize: test
  198.                                             }
  199.                                         }],
  200.                                         xAxes: [{
  201.                                             ticks: {
  202.                                                 fontColor: 'white',
  203.                                                 beginAtZero: true,
  204.                                                 fontSize: test
  205.                                             }
  206.                                         }]
  207.                                     }
  208.                                 }
  209.                             });
  210.                 }
  211.             })
  212.         }
  213.  
  214.         function update() {
  215.             if (graficov) {
  216.                 graficov.destroy();
  217.             }
  218.         }
  219.     </script>
  220. </body>
  221.  
  222. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!