Liquid Fill Gauge v1.1 - 7/14/2015
Changes:
Configurable features include:
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
xxxxxxxxxx
<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>
<script language="JavaScript">
var gauge1 = loadLiquidFillGauge("fillgauge1", 86.36);
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#92D050";
config1.waveColor = "#DEF1CA";
config1.waveAnimateTime = 1000;
config1.textColor = "#4268fe";
config1.waveTextColor = "#142f7f";
config1.textVertPosition = 0.2;
config1.textSize = 0.7;
var gauge2= loadLiquidFillGauge("fillgauge2", 70.42, config1);
var config2 = liquidFillGaugeDefaultSettings();
config2.circleColor = "#FFC000";
config2.waveColor = "#ffdf7f";
config2.waveAnimateTime = 2000;
config2.waveHeight = 0.3;
config2.waveCount = 1;
config2.circleFillGap = 0.05;
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