2018: ICTS Reactietijden Liquid Fill Gauge

Liquid Fill Gauge v1.1 - 7/14/2015

Changes:

Added support for updating the gauge value after loading is complete. The loadLiquidFillGauge method now returns an object with an update method which allows the gauge value to be changed. Click any of the gauges above to randomly update their value.

Configurable features include:

Changeable min/max values.
All colors.
Outer circle thickness.
Gap between the outer circle and inner fill area.
Wave height.
Wave speed.
Wave count.
Wave rise time.
Wave height scaling on/off. Reduces the wave height near the min/max values so that the wave won't make the fill area appear total full or totally empty.
Wave starting offset. Most useful when wave animation is turned off and you want the wave min or max at a specific horizontal position in the fill area.
Wave rising upon load on/off.
Wave animation on/off.
Text height.
Text vertical position.
Text increment from min value upon loading.
Display of % symbol on/off.

Open source under BSD 2-clause
Copyright (c) 2015, Curtis Bratton
All rights reserved.

forked from MisunoKitara's block: 2018: KLASCE: Servicepunt Reactietijden Liquid Fill Gauge

forked from MisunoKitara's block: 2018: KLASCE: Servicepunt Werktijden Liquid Fill Gauge

forked from MisunoKitara's block: 2018: ICTS Reactietijden Liquid Fill Gauge

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://d3js.org/d3.v3.min.js" language="JavaScript"></script>
    <script src="liquidFillGauge.js" language="JavaScript"></script>
    <style>
        .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
    </style>
</head>
<body>
<center><svg id="fillgauge1" width="100%" height="300" onclick="gauge1.update(NewValue());"></svg>/<center>
<svg id="fillgauge2" width="19%" height="100" onclick="gauge2.update(NewValue());"></svg>
<svg id="fillgauge3" width="19%" height="200" onclick="gauge3.update(NewValue());"></svg>
<svg id="fillgauge4" width="19%" height="100" onclick="gauge4.update(NewValue());"></svg>
<svg id="fillgauge5" width="19%" height="100" onclick="gauge5.update(NewValue());"></svg>

config2.textColor = "#000000";
      config2.waveTextColor = "#142f7f";
      config2.textVertPosition = 0.2;
  		config2.textSize = 0.7;
     
    var gauge3 = loadLiquidFillGauge("fillgauge3", 86.49, config2);
  
    var config3 = liquidFillGaugeDefaultSettings();
  	config3.circleColor = "#E68247";
  	config3.waveColor = "#f0b593";
    config3.waveAnimateTime = 2000;
    config3.waveHeight = 0.3;
    config3.waveAnimate = true;
    config3.waveOffset = 0.25;

config3.textColor = "#000000";
  	config3.waveTextColor = "#142f7f";
  	config3.textVertPosition = 0.2;
  	config3.textSize = 0.7;

config3.valueCountUp = true;
    config3.displayPercent = true;
    var gauge4 = loadLiquidFillGauge("fillgauge4", 77.78, config3);
  
    var config4 = liquidFillGaugeDefaultSettings();
    config4.circleColor = "#C00000";
    config4.textColor = "#000000";
    config4.waveTextColor = "#142f7f";
    config4.waveColor = "#ff4747";
    config4.textVertPosition = 0.2;
    config4.waveAnimateTime = 2000;
    config4.waveHeight = 0.03;
    config4.waveAnimate = true;
    config4.waveRise = false;
    config4.waveHeightScaling = false;
    config4.waveOffset = 0.25;
    config4.textSize = 0.7;
    config4.waveCount = 3;
    var gauge5 = loadLiquidFillGauge("fillgauge5", 50, config4);

function NewValue(){
        if(Math.random() > .5){
            return Math.round(Math.random()*100);
        } else {
            return (Math.random()*100).toFixed(1);
        }
    }
</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js