Will these guages work with Polymer Elements?

[david6076]

It does not work for me. There are no errors on the console. The canvas is visible in css inspector but the
guage is not visible.

[Mikhus]

Hi there!
Can you provide any examples?
Thank you in advance.

[david6076]

Here is the sample I have for radial guage. I know the script tag path is correct.

<script src="../node_modules/canvas-gauges/gauge.min.js"></script> <style include="shared-styles"> :host { display: block;

    padding: 10px;
  }
</style>

<div class="card">
<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
></canvas>

<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
        data-width="400"
        data-height="400"
        data-units="Km/h"
        data-title="false"
        data-value="0"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-animated-value="true"
></canvas>

<script> Polymer({ is: 'my-view2', }); </script>

[pinkflozd]

it works for me if you use javascript to initialize the gauge

[david6076]

<paper-card class="container">
  <div class="card-content">
      <script>
        var gauge = new LinearGauge({
            renderTo: document.createElement('canvas'),
            width: 160,
            height: 600,
            borderRadius: 20,
            borders: 0,
            barStrokeWidth: 20,
            minorTicks: 10,
            majorTicks: [0,10,20,30,40,50,60,70,80,90,100],
            value: 22.3,
            units: "°C",
            colorValueBoxShadow: false
        });
        document.body.appendChild(gauge.options.renderTo);
    </script>
  </div>
</paper-card>

This does not work either. Can you provide the script you used to display a gauge?

[pinkflozd]

here is one example
https://gist.github.com/pinkflozd/0cc67bd4dd96133506a214efe5fef4a6

[david6076]

Interesting. Thanks for the help.

…

On Mon, Jan 23, 2017 at 10:19 AM, Luka Karinja ***@***.***> wrote: here is one example https://gist.github.com/pinkflozd/0cc67bd4dd96133506a214efe5fef4a6 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#100 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMiKzbX7CmBEx1SNA0ZB47zADZoHj2Yaks5rVO9DgaJpZM4LbP7S> .