CODEWITHSUNDEEP
javascriptphpjqueryjsonajax
Jay Katira
Jay Katira

Reputation: 181

php-ajax call for json data and pass that data to jguage js for widget to show that value

here i want to pass ajax called value to the another script(widget script) in same file. i have successfully done ajax call and justgage widget on a single page. i can successfully print the data got from ajax call using php echo. instead showing the values using echo, i want to use that same value for justgage widget to show. here i am sharing my code. data.php file is here

<?php
    $selm=1;
?>
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/raphael-2.1.4.min.js"></script>
        <script src="js/justgage.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
        <style type="text/css">
            #divDownloadOuter{
                width: 55%;
                height:50%;
                clear: both;
            }
        </style>
        <script type="text/javascript">
            $(window).load(function () {
                myFunction();
            });
        </script>
        <script>
            var d;
            function myFunction() {
                setInterval(function(){
                    $.ajax({
                        url: "datavalues.php?id=1&selm=<?php echo $selm ?>",
                        success: function(result){
                            ip = JSON.parse(result);
                            sr = parseFloat(ip["srno"]);
                            document.getElementById("demo1").innerHTML = sr;
                            document.getElementById("demo2").innerHTML = sr;
                        }
                    });
                }, 2000);
            }
        </script>
    </head>
    <body>
        <div id="divDownloadOuter">
            <div id="jgDownload1"></div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function(event) {
                var gD1 = new JustGage({
                    id: "jgDownload1",
                    value: 27,
                    decimals: 2,
                    min: 0,
                    max: 100,
                    valueFontFamily: "Georgia",
                    valueFontSize: "150px",
                    valueFontColor: "orange",
                    label: "%",
                    labelFontsize:"10px",
                    labelFontColor:"white",
                    width: 100,
                    height: 100,
                    relativeGaugeSize: true,
                    gaugeWidthScale: 0.8,
                    levelColors: [
                        "#E63454",
                        "#AC001F",
                        "#F6AD37",
                        "#B87200",
                        "#24A081",
                        "#007759",
                        "#026071",
                        "#015C71"
                    ],
                    pointer: true,
                    counter: true,
                });
            });
        </script>
        <h3>value using element by id</h3>
        <span id="demo1"></span>
        <?php echo "<span id=\"demo2\"></span>"; ?>
    </body>
</html>

datavalues.php file is here

<?php
//all values for selected meter encoded and retrive from dashboard 2

    $con=mysqli_connect("localhost","root","digi","gmbg");
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    if (isset($_GET['selm']) ){
        $selm=$_GET['selm'];
        $res3 = mysqli_query($con ,"SELECT * FROM meterstatus where `mtr_no` LIKE '$selm' and did='kirti' order by  srno desc limit 1");
        $row3= mysqli_fetch_assoc($res3);
        echo json_encode($row3);
    }
    mysqli_close($con);
?>

Here i can easily show values in my data.php file with "span id" and "php echo" method. but i want to use that value in justgage widget to show. but i cant pass this ajax call data value to the another js(justgage). i have tried all method but its showing "undefined". Is there any solution regarding this?

Upvotes: 2

Views: 132

Answers (1)

JYoThI
JYoThI

Reputation: 12085

use refresh function gD1.refresh(40) For example i just used setTimeout instead of ajax .

ajax : add this code in ajax success part 

refresh function gD1.refresh(response_data)  // response_data is dynamically 


var gD1 ='';

document.addEventListener("DOMContentLoaded", function(event) {
                 gD1 = new JustGage({
                    id: "jgDownload1",
                    value: 27,
                    decimals: 2,
                    min: 0,
                    max: 100,
                    valueFontFamily: "Georgia",
                    valueFontSize: "150px",
                    valueFontColor: "orange",
                    label: "%",
                    labelFontsize:"10px",
                    labelFontColor:"white",
                    width: 100,
                    height: 100,
                    relativeGaugeSize: true,
                    gaugeWidthScale: 0.8,
                    levelColors: [
                        "#E63454",
                        "#AC001F",
                        "#F6AD37",
                        "#B87200",
                        "#24A081",
                        "#007759",
                        "#026071",
                        "#015C71"
                    ],
                    pointer: true,
                    counter: true,
                });
            });
            
            setTimeout(function(){ gD1.refresh(74);  },1000);
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
<body>
    <div id="divDownloadOuter">
            <div id="jgDownload1"></div>
        </div>
   
</body>

Upvotes: 3

Related Questions