Calling reusable PHP code in Javascript

Question

Currently I have a index.php file, containing PHP and Javascript code.

The PHP code accesses an SQLite database, and gets the data into two arrays, which I then use in the Javascript code to populate a bar chart.

I now wish to call the PHP code whenever I want within the Javascript, but do not know the correct way and my attempts at examples have failed.

Also I think ideally I will need to change the PHP code so that it returns the arrays, so that I can use them for comparisons etc.

This is my first foray into PHP and Javascript.

Code:

<?php
        $db = new SQLite3('/var/www/html/newdb.db');
        $result = ($db->query('SELECT * FROM NUMBERS'));
        $avg_stack = array();
        $name_stack = array();
        while ($res = $result->fetchArray(SQLITE3_ASSOC)){
                $avg = $res["AVG"];
                $name = $res["NAME"];
                array_push($avg_stack, $avg);
                array_push($name_stack, $name);
        }
        $db->close();
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss">
  <title>My Chart.js Chart</title>
</head>
<body>
    <div id="demo" class="container">
    <canvas id="myChart"></canvas>
    <input type="button" value="Update Table" onclick="updatetable()">
  </div>

  <script>

  var data_array = [];
  var name_array = [];
  var colour_array = [];
  var dynamicColour = function() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
  };
  var massPopChart = Chart;

  function createchart() {

    data_array = [<?php echo '"'.implode('","', $avg_stack).'"' ?>];
    name_array = [<?php echo '"'.implode('","', $name_stack).'"' ?>];

    for (var i in data_array) {
        colour_array.push(dynamicColour());
    }

    let myChart = document.getElementById('myChart').getContext('2d');
        massPopChart = new Chart(myChart, {
                  type:'bar',
                  data:{
                        labels:name_array, // This to be replaced by return result of PHP
                        datasets:[{
                          label:'Population',
                          data:data_array, // This to be replaced by return result of PHP
                          backgroundColor:colour_array,
                          borderWidth:1,
                          borderColor:'#777',
                          hoverBorderWidth:3,
                          hoverBorderColor:'#000'
                        }]
                  },
                  options:{
                  }
                });
  }

  function updatetable() {
        window.location.reload(true);
        setInterval(function(){

                // HERE I WANT TO RUN THE PHP CODE AGAIN

                var newposition = data_array.length;
                data_array.push(Math.floor(Math.random() * 700000) + 5000);
                colour_array.push(dynamicColour());
                massPopChart.data.datasets[0].data[newposition] = data_array[newposition];
                massPopChart.data.labels[newposition] = "Newly Added";
                massPopChart.update();
        }, 3000);
  }

  createchart();

  </script>

</body>
</html>

Use AJAX. Without that, you cannot call PHP from within javascript/HTML code — Penguine, Aug 09 '18 at 11:14
@Penguine Hi, I have seen suggestions to use AJAX, and have tried to follow them, however when trying to make them work within my situation I cannot get them to work at all. I have got an example of using AJAX to get a PHP file to echo to a
, but I need it to pass an array and then use that array to do things with. — chivs688, Aug 09 '18 at 11:29
@Penguine My code is in the OP. Been reading through the AJAX website now with all of its examples, but none seem to be running a PHP file, returning a variable (array in my case), and then using that variable. — chivs688, Aug 10 '18 at 11:28
@Penguine I have also added this to my index.php file, as I work through the AJAX pages: function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("GET", "ajax.php", true); xhttp.send(); } — chivs688, Aug 10 '18 at 11:35

Calling *reusable* PHP code in Javascript

0 Answers0

Calling reusable PHP code in Javascript