CODEWITHSUNDEEP
javascriptphphtmljson
user46510
user46510

Reputation: 63

How to pass a variable contained in the HTML page to the PHP and then display it with JS - Chart.js

I need to display a chart (from SQL data) on my website. So I decide to use chart.js. I found an exemple on internet. But I have a problem :

I would like to know how to pass a variable contained in the HTML page to the PHP(to make a request sql) and then display it with JS. I can not find this information. Can you help me please ?

This the exemple code:

HTML:

<html>
  <head>
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/Chart.min.js"></script>
    <script type="text/javascript" src="assets/js/linegraph.js"></script>
  </head>

 <body>
   <header>
   </header>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>
  </body>
</html>

PHP:

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '*****');
define('DB_NAME', 'Michel');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = 'SELECT heure, payload FROM reception ORDER BY date DESC LIMIT 10';

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>

JS:

$(document).ready(function(){
    $.ajax({
        url : "graphdata.php",
        type : "GET",
        success : function(data){
            console.log(data);

            var heure = [];
            var payload = [];

            for(var i in data) {
                heure.push("Heure " + data[i].heure);
                payload.push(data[i].payload);
            }

            var chartdata = {
                labels: heure,
                datasets: [
                    {
                        label: "payload",
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: "rgba(59, 89, 152, 0.75)",
                        borderColor: "rgba(59, 89, 152, 1)",
                        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
                        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
                        data: payload
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var LineGraph = new Chart(ctx, {
                type: 'line',
                data: chartdata
            });
        },
        error : function(data) {

        }
    });
});

Upvotes: 0

Views: 87

Answers (2)

dkasipovic
dkasipovic

Reputation: 6120

Are you talking about something like this?

On the JS side:

$.ajax({
  url: 'test.php',
  method: 'POST',
  data: {
    filter: '<?php echo $Variable; ?>',
  },
  success: function(r) {
    console.log(r);
  }
});

Then, on the PHP side you can use

<?php
  echo $_POST['filter']; //outputs someValue

Is this what you had in mind?

Upvotes: 1

user46510
user46510

Reputation: 63

@Damir Kasipovic Nop, it's not really that, I would like to get a variable form this part (HTML):

<html>
  <head>
   <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/Chart.min.js"></script>
    <script type="text/javascript" src="assets/js/linegraph.js"></script>
  </head>

 <body>
   <header>
   </header>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
      
      <?php
        $Variable ='1'; // Exemple
    </div>
  </body>

And I would like to use it on the PHP file. To add a WHERE on my request SQL:

<?php
//setting header to json
header('Content-Type: application/json');

//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '*****');
define('DB_NAME', 'Michel');

//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
}

//query to get data from the table
$query = 'SELECT heure, payload FROM reception WHERE variable ='".variable.'" ORDER BY date DESC LIMIT 10';

//execute query
$result = $mysqli->query($query);

//loop through the returned data
$data = array();
foreach ($result as $row) {
    $data[] = $row;
}

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);
?>

Upvotes: 0

Related Questions