mahesh mahesh - 8 days ago 5
Javascript Question

Dynamic update in Water bubble js

in the below code first time if i (any higher value)gave value = 29 the chart increases, second time if i give value less than 29 it doesn't work, level still stays in 29 but inside data has changed but not represented in chart. i cross checked in console. in waterbubble chart increase by value, but not decreasing by value. once higher value is given it is not reducing to lower value in chart



function s(){
var waterFill = document.getElementById("db01").value;
var fraction = waterFill / 100;
$('#demo-1').waterbubble({
txt: ('' + waterFill).slice(-3).toString() + " %",
data: fraction,
animation: true
});
console.log(waterFill);}
setInterval(function(){ s();// this will run after every 10 seconds
}, 10000);

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas/waterbubble.js"></script>

<input id="db01" onkeyup="s()">
<div class=" col-lg-4">
<canvas id="demo-1"></canvas>
</div>




Answer

i solved it by changing in function NewValue(),

 function NewValue(){
 var data = document.getElementById("db01").value;
       if(data > .5){
            return Math.round(data*100);
        } else {
            return (data*100).toFixed(1);
        }
    }