gauge.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.Gauge</title>
  <link rel="stylesheet" href="css/demo.css">
  <style>
    .type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center }
  </style>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.graphics');
    goog.require('goog.graphics.Font');
    goog.require('goog.graphics.LinearGradient');
    goog.require('goog.graphics.SolidFill');
    goog.require('goog.graphics.Stroke');
    goog.require('goog.ui.Gauge');
    goog.require('goog.ui.GaugeTheme');
  </script>
  <script>

    var CustomGaugeTheme = function() {
    }
    goog.inherits(CustomGaugeTheme, goog.ui.GaugeTheme);

    CustomGaugeTheme.prototype.getInternalBorderFill = function(cx, cy, r) {
      return new goog.graphics.SolidFill("#8080ff");
    }

    CustomGaugeTheme.prototype.getExternalBorderFill = function(cx, cy, r) {
      return new goog.graphics.SolidFill("#8080c0");
    }

    CustomGaugeTheme.prototype.getInternalBorderStroke = function() {
      return new goog.graphics.Stroke(2, "#ffff00");
    }

    CustomGaugeTheme.prototype.getMajorTickStroke = function() {
      return new goog.graphics.Stroke(2, "#ffffff");
    }

    CustomGaugeTheme.prototype.getHingeStroke = function() {
      return new goog.graphics.Stroke(1, "#00a000");
    }

    CustomGaugeTheme.prototype.getHingeFill = function(cx, cy, r) {
      return new goog.graphics.SolidFill("#00c000");
    }

    CustomGaugeTheme.prototype.getNeedleStroke = function() {
      return new goog.graphics.Stroke(1, "#008040");
    }

    CustomGaugeTheme.prototype.getNeedleFill = function(cx, cy, r) {
      return new goog.graphics.SolidFill("#008040", 0.7);
    }


    var interactiveGauge;

    function setupGauges() {
      var gauge = new goog.ui.Gauge(120, 120);
      gauge.setValue(33);
      gauge.render(document.getElementById('basic'));

      var gauge = new goog.ui.Gauge(200, 200);
      gauge.addBackgroundColor(50, 60, goog.ui.Gauge.RED);
      gauge.addBackgroundColor(35, 50, goog.ui.Gauge.YELLOW);
      gauge.addBackgroundColor(15, 25, goog.ui.Gauge.GREEN);
      gauge.setMinimum(15);
      gauge.setMaximum(60);
      gauge.setTicks(3, 6);
      gauge.setValue(40);
      gauge.setTitleBottom("RPM");
      gauge.render(document.getElementById('colors'));


      interactiveGauge = new goog.ui.Gauge(300, 200);
      interactiveGauge.addBackgroundColor(0, 30, goog.ui.Gauge.RED);
      interactiveGauge.addBackgroundColor(75, 90, goog.ui.Gauge.YELLOW);
      interactiveGauge.addBackgroundColor(90, 100, goog.ui.Gauge.RED);
      interactiveGauge.setTitleTop("CPU Utilization");
      interactiveGauge.setTicks(5, 2);
      interactiveGauge.setMajorTickLabels(['Idle', '20%', '40%', '60%', '80%', 'Argh']);
      setValue();
      interactiveGauge.render(document.getElementById('interactive'));

      var gauge = new goog.ui.Gauge(200, 200);
      gauge.setMinimum(-30);
      gauge.setMaximum(30);
      gauge.setTicks(10, 0);
      gauge.setValue(20);
      var theme = new CustomGaugeTheme();
      gauge.setTheme(theme);
      gauge.render(document.getElementById('customcolors'));

    }

    function setValue() {
      var sv = document.getElementById("v1").value
      var v = parseInt(sv, 10);
      if (isNaN(v)) {
        v = 0;
      }
      interactiveGauge.setValue(v, v + "%");
    }
  </script>

</head>

<body>
  <h1>goog.ui.Gauge</h1>
  <h2>Note: This component requires vector graphics support</h2>
  <table border="1">
    <tr valign="top">
      <td class="type">
        Basic
      </td>
      <td class="type">
        Background colors, title. custom ticks
      </td>
      <td class="type">
        Value change, formatted value, tick labels
      </td>
      <td class="type">
        Custom colors
      </td>
    </tr>
    <tr>
      <td style="width: 120px">
        <span id="basic"></span>
      </td>
      <td style="width: 200px">
        <span id="colors"></span>
      </td>
      <td style="width: 300px">
        <span id="interactive"></span>
        <center>
          <input type="text" size="3" value="22" id="v1" />
          <input type="button" onclick="setValue()" value="Set" />
        </center>
      </td>
      <td style="width: 200px">
        <span id="customcolors"></span>
      </td>
    </tr>
  </table>
  <script>
  setupGauges();
  </script>
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/gauge.html
