Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Acquaponica</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
- <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- body {
- background-image: url("http://eskipaper.com/images/paper-background-4.jpg");
- }
- .w3-lobster {
- font-family: "Lobster", serif;
- }
- </style>
- </head>
- <body onload="setInterval(reloadPage, 15000);">
- <div class="w3-container w3-lobster">
- <p class="w3-xxxlarge" align="center">HTML/JAVASCRIPT GRAFICO:</p>
- </div>
- <div class="container">
- <canvas id="myChart"></canvas>
- </div>
- <br>
- <div class="page-header-actions" data-toggle="buttons" role="group" align="center">
- <label class="btn btn-outline btn-primary">
- <input id="auto-refresh-checkbox" type="radio" name="options" autocomplete="off" value="autorefreshon" />
- <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON
- </label>
- <label class="btn btn-outline btn-primary">
- <input type="radio" name="options" autocomplete="off" value="autorefreshoff" />
- <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF
- </label>
- </div>
- <script>
- var ctx = document.getElementById('myChart').getContext('2d');
- var myChart = new Chart(ctx, {
- type: 'line',
- data: {
- labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
- datasets: [{
- label: 'temperature',
- fill: false,
- backgroundColor: window.chartColors.red,
- borderColor: window.chartColors.red,
- data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,19,19,19,19,19]
- },
- {
- label: 'Humidity',
- fill: false,
- backgroundColor: window.chartColors.blue,
- borderColor: window.chartColors.blue,
- data: [8, 20, 15, 18, 12, 13]
- },
- {
- label: 'Ph',
- fill: false,
- backgroundColor: window.chartColors.orange,
- borderColor: window.chartColors.orange,
- data: [12, 15, 33, 5, 23, 3]
- },
- {
- label: 'Ec',
- fill: false,
- backgroundColor: window.chartColors.green,
- borderColor: window.chartColors.green,
- data: [32, 1, 3, 15, 13, 32]
- }
- ]
- },
- options: {
- responsive: true,
- }
- });
- function reloadPage(){
- var refreshEnabled = document.getElementById('auto-refresh-checkbox');
- if(refreshEnabled.checked) {
- window.location.reload(60000);
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement