D3.js liquid chart version 3
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="fillgauge"
data-role="fillgauge"
data-height="155"
data-width="155"
data-chart-padding-left="0"
data-display-percent=false
data-display-text=false
data-number-current=20
data-number-max=70
data-circle-color="grey"
data-text-color="black"
data-wave-text-color="black"
data-wave-color="gold"
data-text-vert-position=1
data-text-horz-position=20
data-wave-animate-time=1000
data-overlay-image="./beer.png"
data-overlay-image-height="155"
data-overlay-image-width="155"
></div>
<script>
var $this = $('.fillgauge');
var w = $this.data("width");
var h = $this.data("height");
var ir = $this.data("innerradius");
var r = $this.data("radius");
function liquidChart(el, index){
var width = $(el).data("width");
var height = $(el).data("height");
var radius = width/2;
var displayText = $(el).data("display-text");
var numberCurrent = $(el).data("number-current");
var numberMax = $(el).data("number-max");
var displayPercent = $(el).data("display-percent");
var circleColor = $(el).data("circle-color");
var textColor = $(el).data("text-color");
var waveTextColor = $(el).data("wave-text-color");
var waveColor = $(el).data("wave-color");
var textVertPosition = $(el).data("text-vert-position");
var textHorzPosition = $(el).data("text-horz-position");
var waveAnimateTime =...
CSS
.fillgauge{
/*border: 1px solid black;*/
text-align: center;
}
/*
.fillgauge svg.chart{
width: auto;
height: auto;
}*/
.fillgauge text{
font-size:25px;
}