File manager - Edit - /home/jardides/www/Jardi-design/CodePerso/Javascript/justgage-1.2.2/justgage-1.2.2/examples/custom-sectors.html
Back
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Custom Sectors</title> <meta name="viewport" content="width=device-width"> <style> .container { width: 450px; margin: 0 auto; text-align: center; } .gauge { width: 450px; height: 450px; } a:link.button, a:active.button, a:visited.button, a:hover.button { margin: 30px 5px 0 2px; padding: 7px 13px; } </style> </head> <body> <div class="container"> <div id="gg1" class="gauge"></div> <p id="gg1_text">0-50 is green, 51-100 is red</p> <a href="#" id="gg1_refresh" class="button grey">Random Refresh</a> <a href="#" id="gg1_update" class="button grey">Update Sectors</a> </div> <script src="../raphael-2.1.4.min.js"></script> <script src="../justgage.js"></script> <script> document.addEventListener("DOMContentLoaded", function(event) { var gg1 = new JustGage({ id: "gg1", value : 72.15, min: 0, max: 100, decimals: 2, gaugeWidthScale: 0.6, customSectors: [{ color : "#00ff00", lo : 0, hi : 50 },{ color : "#ff0000", lo : 50, hi : 100 }], counter: true }); document.getElementById('gg1_refresh').addEventListener('click', function() { gg1.refresh(getRandomInt(0, 100)); }); document.getElementById('gg1_update').addEventListener('click', function() { gg1.update({ value: getRandomInt(0, 100), customSectors: [{ color : "#00ff00", lo : 0, hi : 25 },{ color : "#ff0000", lo : 25, hi : 100 }] }); document.getElementById('gg1_text').innerHTML = "<b>UPDATE</b>: 0-25 is green, 26-100 is red" }); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0 |
proxy
|
phpinfo
|
Settings