Mikhus / canvas-gauges

HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.
http://canvas-gauges.com/
MIT License
1.58k stars 396 forks source link

Add required gauge.draw() call to example #192

Closed qistoph closed 4 years ago

qistoph commented 4 years ago

Sure. The gauge won't show, unless I'm adding gauge.draw(). Even if I'm just using the sample code like this:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Temps</title>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
        <script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js" integrity="sha384-i97mzZI+SCEReyHBSaYZjZ/SwkC601M8cm2HFCebvPNDv2SW3UGBpDXmhpZ/fgoO" crossorigin="anonymous"></script>

    </head>
    <body>
        <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);
            gauge.draw();
        </script>
    </body>
</html>

Edit I'm using Chrome by the way