d3.js – D3 Liquid Fill Gauge

http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

HTML

<div class="col-md-4">
  <div class="card">
    <div class="card-header"> 
      <span class="card-title">總水位 - {{ $akey }}</span> 
    </div>
    <div class="card-image">
      <svg id="fillgauge_{{ $akey }}" class="gauge" width="97%" height="250" data-index="{{ $index }}"></svg> 
    </div>
    <div class="card-content">
      <p>{{ $account }}</p>
    </div>
    <div class="card-action clearfix">
      <div class="pull-right"> <a href="#" class="btn btn-link black-text">Link 1</a> <a href="#" class="btn btn-link orange-text">Link 2</a> <a href="#" class="btn btn-link blue-text accent-2">Link 3</a> </div>
    </div>
  </div>
</div>

Javascript

var gauges = [];

$(document).ready(function(){
    account_keys = $.parseJSON(account_keys);

    for(var i = 0; i < account_keys.length; i++){
        akey = account_keys[i];
        var gauge_id = "fillgauge_" + akey;

        var gauge = loadLiquidFillGauge(gauge_id, 55);
        var config = liquidFillGaugeDefaultSettings();
        config.circleColor = "#FF7777";
        config.textColor = "#FF4444";
        config.waveTextColor = "#FFAAAA";
        config.waveColor = "#FFDDDD";
        config.circleThickness = 0.2;
        config.textVertPosition = 0.2;
        config.waveAnimateTime = 1000;

        gauges.push(gauge);
    }

    $('.gauge').on('click', function(){
        var $this = $(this);
        var index = $this.data('index');
        var gauge = gauges[index];
        gauge.update(NewValue());
    });
});

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