Get javascript values from result of php script

Question

I have pie chart webpage (index.html) which is currently getting values from a static .js file.

The original content of the .js file for the pie chart is this:

$( document ).ready(function() {

    var ctx110 = document.getElementById("chart110").getContext("2d");

    var data110 = [ 
        {   
                "value": 40, 
                "color": "#F25656",
                "highlight": "#FD7A7A",
                "label": "Critical"
        },  
        {   
                "value": 63.2452,
                "color": "#22BAA0",
                "highlight": "#36E7C8",
                "label": "Other"
        },  
        {   
                "value": 0,
                "color": "#F2CA4C",
                "highlight": "#FBDB6E",
                "label": "Warning"
        }   
    ];  
    
    var chart110 = new Chart(ctx110).Pie(data110,{
        segmentShowStroke : true,
        segmentStrokeColor : "#fff",
        segmentStrokeWidth : 2,
        animationSteps : 100,
        animationEasing : "easeOutBounce",
        animateRotate : true,
        animateScale : false,
        legendTemplate : "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
        responsive: true
    }); 
    
    
});

However, I need to make the values in the var data110 variable dynamic.

I have a php script that, when run, spits out the required value and my issue is, I'm having problems getting the pie chart to load after I incorporate the php script into the above code.

Here's my attempt (I'm completely new to web development, so please forgive my ineptitude here - i know it's very ugly):

$( document ).ready(function() {

    var ctx110 = document.getElementById("chart110").getContext("2d");
    
    function internal_loadXMLDoc1() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
        }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        document.getElementById("myDivAX1").innerHTML=xmlhttp.responseText;
                }
        }
        xmlhttp.open("POST","getnum.php?os-metrics",true);
        xmlhttp.send();
    }
    var dskmetric = internal_loadXMLDoc1();

    var data110 = [ 
        {   
                "value": dskmetric, 
                "color": "#F25656",
                "highlight": "#FD7A7A",
                "label": "Critical"
        },  
        {   
                "value": 63.2452,
                "color": "#22BAA0",
                "highlight": "#36E7C8",
                "label": "Other"
        },  
        {   
                "value": 0,
                "color": "#F2CA4C",
                "highlight": "#FBDB6E",
                "label": "Warning"
        }   
    ];  
    
    var chart110 = new Chart(ctx110).Pie(data110,{
        segmentShowStroke : true,
        segmentStrokeColor : "#fff",
        segmentStrokeWidth : 2,
        animationSteps : 100,
        animationEasing : "easeOutBounce",
        animateRotate : true,
        animateScale : false,
        legendTemplate : "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
        responsive: true
    }); 
    
    
});

EDIT (based on @AL-zami advice):

$( document ).ready(function() {


    var ctx110 = document.getElementById("chart110").getContext("2d");
    
    function internal_loadXMLDoc1() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
        }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    
                     // Do your work here
                            var data110 = [ 
                                {
                                        **"value": [this needs to be dynamic]**, 
                                        "color": "#F25656",
                                        "highlight": "#FD7A7A",
                                        "label": "Critical"
                                },
                                {
                                        **"value": [this needs to be dynamic]**,
                                        "color": "#22BAA0",
                                        "highlight": "#36E7C8",
                                        "label": "Other"
                                },
                                {
                                        "value": 0,
                                        "color": "#F2CA4C",
                                        "highlight": "#FBDB6E",
                                        "label": "Warning"
                                }
                            ];
    
                            var chart110 = new Chart(ctx110).Pie(data110,{
                                segmentShowStroke : true,
                                segmentStrokeColor : "#fff",
                                segmentStrokeWidth : 2,
                                animationSteps : 100,
                                animationEasing : "easeOutBounce",
                                animateRotate : true,
                                animateScale : false,
                                legendTemplate : "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
                                responsive: true
                            });

                }   
        }
        xmlhttp.open("POST","getnum.php?os-metrics",true);
        xmlhttp.send();
    }   

    internal_loadXMLDoc1();


});

Here's the PHP script getnum.php:

<?php
$allargs = $_SERVER["argv"];
$argscou = $_SERVER["argc"];
if ( $argscou == 0 ) {
    die();
} else {
    $upatterns = var_export($allargs, true) ;
    if (strpos($upatterns, '__') !== false) {
        $type_val = explode("__", $allargs[0]);
    } else {
        $type_val = $allargs;
    }
    $compon1 = $type_val[0];
    if ($compon1== "30day-expirations") {
        $compon2 = $type_val[1];
        echo '<p class="counter">' . "$compon2" . '</p>'. "
";
    } else if ( ($compon1 == "getnum.php") || ($compon1 == "os-disk-usage") ) {
        $duvalue = "400";
        echo "$duvalue";
        file_put_contents('4filename.txt', $duvalue, FILE_APPEND);
    }
}

?>

question from:https://stackoverflow.com/questions/65868496/get-javascript-values-from-result-of-php-script

Answer 1

Your problem statement is not clear. Hard to determine what you are trying to accomplish. If I understand you correctly, your problem lies in you post request handler. XMLHttpRequest is a asynchronous request. Your rest of the code run to completion before the post request is resolved.

var dskmetric = internal_loadXMLDoc1();

The above statement doesn't return anything. Try to run you chart generation code inside the handler function.

    var ctx110 = document.getElementById("chart110").getContext("2d");
    
    function internal_loadXMLDoc1() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
        }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        
                     // Do your work here

                }
        }
        xmlhttp.open("POST","getnum.php?os-metrics",true);
        xmlhttp.send();
    }

    internal_loadXMLDoc1();

If you are not submitting any form try to change the request method to GET