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.57k stars 396 forks source link

JavaScript does not initialies all values #193

Closed vkuehn closed 5 years ago

vkuehn commented 5 years ago

just used download for local installation. the html shows I initilised a linear gauge. E.g. the barBeginCircle was not correctly set to false. Once I update the value it redraws correctly. Is that expected ?

<!doctype html>
<html>
<head>
    <title>Gauges as Components</title>
    <script src="gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge" id="myGauge"/>

<script type="text/javascript">
var g2 = new LinearGauge({
    renderTo: document.getElementById('myGauge'),
    width: 600,
    height: 150,
    minValue: 0,
    maxValue: 80,
    majorTicks: [
        "0",
        "20",
        "40",
        "60",
        "80"
    ],
    minorTicks: 2,
    strokeTicks: true,
    highlights: [
        {
            "from": 100,
            "to": 220,
            "color": "rgba(200, 50, 50, .75)"
        }
    ],
    colorPlate: "#fff",
    borderShadowWidth: 0,
    borders: false,
    needleType: "arrow",
    needleWidth: 2,
    animationDuration: 1500,
    animationRule: "linear",
    tickSide: "left",
    numberSide: "left",
    needleSide: "left",
    barBeginCircle: false,
    barStrokeWidth: 5,
    barWidth: 5
}).draw();
</script>
</body>
</html>
vkuehn commented 5 years ago

I have created my own lib, therefore no fix needed anymore