jQuery radialIndicator auto (without refreshing page) based on value

Question

I'm using jQuery radialIndicator .

As you can see the function will run after page loaded. But now if I have data from database and I want it show live without refreshing the page. How to do that?

Here is the code:

JS

$(function () {
    var getVal = $('#get').html();

    var radialObj7 = $('#indicatorContainer7').radialIndicator({
        minValue: 0,
        maxValue: 1250
    }).data('radialIndicator').animate(getVal); //to get the value
});

HTML

<div class="prg-cont rad-prg" id="indicatorContainer7"><div id="get"><?php include('load.php'); ?></div></div>

PHP(load.php)

700

JS Autorefresh

var auto_refresh = setInterval
(
    function ()
    {
        $('#get').load('load').fadeIn("slow");
    }, 1000
);

I tried above my code, the value is auto update but the indicator not change based on value.

Answer 1

Firstly, if you need to add animation on every interval then there must be some logic in PHP code so that every time you get a new value from server side, which reflects your UI and you will get animation.

Also, you have to update Indicator value every time when an AJAX call made(use load.php instead of load only ) like,

var auto_refresh = setInterval(function (){
    $('#get').load('load.php',function(val){// load.php instead of load
        // change value in callback
        $('#indicatorContainer7').data('radialIndicator').animate(val); 
    }).fadeIn("slow");
}, 1000);