gauge.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../app-imports/gauge-import.html">

<dom-module id="app-widget-wave">

  <template>

  <style include="pages-shared-styles">
     :host {
      display: block;
      box-sizing: border-box;
    }

  </style>

    <canvas id="gaugeWave" style="height:300px;width:120px"></canvas>

  </template>

</dom-module>

<script>
  Polymer({

    is: 'app-widget-wave',

    properties: {
      wave: {
        type: String,
        notify: true,
        observer: '_waveChange'
      },
    },

    _waveChange: function(e) {
      var gaugeWave = document.gauges.get('gaugeWave');
      gaugeWave.value = this.wave;
    },

    attached: function() {

        gaugeWave = new LinearGauge({
          renderTo: 'gaugeWave',
          width: 120,
          height: 300,
          minValue: 0,
          maxValue: 3,
          minorTicks: 10,
          strokeTicks: true,
          colorPlate: "transparent",
          majorTicks: [
            "0",
            "0.5",
            "1",
            "1.5",
            "2",
            "2.5",
            "3"
          ],
          borderShadowWidth: 0,
          borders: false,
          barBeginCircle: false,
          tickSide: "left",
          numberSide: "left",
          needleSide: "left",
          needleType: "line",
          needleWidth: 3,
          colorNeedle: "#222",
          colorNeedleEnd: "#222",
          animationDuration: 1500,
          animationRule: "linear",
          animationTarget: "plate",
          barWidth: 5,
          ticksWidth: 50,
          ticksWidthMinor: 15,
          valueBox: false,
          value: this.wave
        });

        gaugeWave.draw();

    }

  });
</script>