Example of wrapping an external component in a polymer element

justgage-element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<script src="../3rdparty/justgage-1.2.9/raphael-2.1.4.min.js"></script>
<script src="../3rdparty/justgage-1.2.9/justgage.js"></script>
<dom-module id="justgage-element">
  <template>
    <div id="gauge"></div>
  </template>

  <script>
    Polymer({
      is: 'justgage-element',

      properties: {
        value: {
          type: Number,
          observer: '_valueChanged'
        }
      },

      ready: function() {
        this.g = new JustGage({
          parentNode: this.$$('#gauge'),
          value: 110,
          min: 60,
          max: 160,
          startAnimationTime: 10,
          refreshAnimationTime: 20,
          gaugeWidthScale: 0.4,
          title: "tick",
          customSectors: {
            length: 1,  // TEMP workaround for bug in JustGage
            ranges: [{
              color : "#ff0000",
              lo : 0,
              hi : 99
            },{
              color : "#00ff00",
              lo : 100,
              hi : 120
            },{
              color : "#ff0000",
              lo : 121,
              hi : 220
            }]
          }
        });

        console.log(this.g);
      },

      _valueChanged: function() {
        this.g.refresh(this.value & 0xff);
      }
    });
  </script>
</dom-module>