Plot dataset from MySQL with Chart.js and PHP

Question

I want to plot some values fetched from MySQL database, with PHP and Chart.js in a single page. I trying the suggestions from here: Chart with json data

Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Demo Charts</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Page level plugins -->
  <script src="vendor/chart.js/Chart.min.js"></script>

  </head>
<body>
<?php


error_reporting(E_ALL);
$conn = new mysqli('localhost', 'root', 'geo777', 'regime_shift');

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }



$select_specie="Specia1";



//query to get data from the table
$query  = 'SELECT  AVG(`CARBON`) AS MedieCarbon, `Year` FROM `fpk20082018` where DENUM="'.$select_specie.'" GROUP BY `Year`';

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

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

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

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

$output = json_encode(['jsonarray' => $jsonfile]);
//now print the data
//print $output;

//var_dump($output);
?>
<div class="card-body">
                  <div class="chart-area">
                    <canvas id="canvas"></canvas>
                  </div>
                </div>
              </div>


<script type="text/javascript">

    const useAJAX = false;

$(document).ready(function () {
  if (useAJAX) $.getJSON('data_plot.php').then(showGraph);
  else showGraph(<?= $output ?>);
});

function showGraph(data) {
  console.log(data);
  var labels = output.jsonarray.map(function(e) {
   return e.Year;
});
var data = output.jsonarray.map(function(e) {
   return e.MedieCarbon;
});

var ctx = canvas.getContext('2d');


var config = {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Medie anuala Carbon',
         data: data,         
         backgroundColor: "rgba(78, 115, 223, 0.05)",
         borderColor: "rgba(78, 115, 223, 1)",
         pointRadius: 3,
         pointBackgroundColor: "rgba(78, 115, 223, 1)",
         pointBorderColor: "rgba(78, 115, 223, 1)",
         pointHoverRadius: 3,
         pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
         pointHoverBorderColor: "rgba(78, 115, 223, 1)",
         pointHitRadius: 10,
         pointBorderWidth: 2
      }]
   }
};

var chart = new Chart(ctx, config);
}


</script>

</body>
</html>

In console the error is:

Uncaught ReferenceError: output is not defined

The jsonarray looks like this:

{
    "jsonarray":[
        {
            "MedieCarbon":"0.5194997435897436",
            "Year":"2008"
        },
        {
            "MedieCarbon":"0.04090933333333334",
            "Year":"2010"
        },
        {
            "MedieCarbon":"0.01656",
            "Year":"2011"
        },
        {
            "MedieCarbon":"0.009573333333333335",
            "Year":"2012"
        },
        {
            "MedieCarbon":"0.020583333333333332",
            "Year":"2017"
        }
    ]
}

You've defined `$output` as a variable in PHP and are trying to use it in JavaScript. That won't work. — The Codesee, Mar 26 '20 at 10:50
Does this answer your question? [Pass a PHP array to a JavaScript function](https://stackoverflow.com/questions/4885737/pass-a-php-array-to-a-javascript-function) — The Codesee, Mar 26 '20 at 10:53

score 0 · Accepted Answer · answered Mar 26 '20 at 10:52

0

You've defined $output as a variable in PHP and are trying to use it in JavaScript. That won't work. Try adding this in your JavaScript:

var object = <?php echo json_encode($object); ?>;

answered Mar 26 '20 at 10:52

The Codesee

3,714
5
38
78

Plot dataset from MySQL with Chart.js and PHP

1 Answers1