Диаграмма. js с Vue выберите и PHP - PullRequest
Новая
       5

Диаграмма. js с Vue выберите и PHP

0 голосов
/ 26 марта 2020

Я пытаюсь создать интерактивный график с помощью Chart. js

У меня есть раскрывающийся список с вариантами (видами), выбранными из базы данных MySQL (selectoptions. php)

После выбора вида выбранные значения отправляются в сценарий PHP (data_plot. php)

Затем, когда я нажимаю кнопку «Создать график для ...», Я хочу построить набор данных, соответствующий выбранной ранее опции; но, к сожалению, ничего не происходит ....

Основной скрипт: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Plot</title>
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.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>
<div class="col-xl-8 col-lg-7">
              <div class="card shadow mb-4" id="sp_nume">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between" >
                  <h6 class="m-0 font-weight-bold text-primary">Species: {{ specia }}</h6>
                  </div>

<form>
  <div class="form-group">
      <select class='form-control' v-model='specia' @change='getDENUM()'>
          <option value='' >Please Select Species</option>
          <option v-for='data in specie' :value='data.DENUM'>{{ data.DENUM }}</option>
        </select>            

  </div>

  <button type="submit" class="btn btn-primary" >Generate Plot for {{ specia }}</button>

</form>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="chart-area" style="width:450px;height:400px;">
                    <canvas id="canvas"></canvas>
                  </div>
                </div>
              </div>
<script>

  var app=new Vue({
      el: '#sp_nume',
  data: {
      specia: '',
    specie: ''
  },
  methods: {
        getDENUM: function(){

      axios.get('selectoptions.php', {
        params: {
          request: 1
        }
      })
      .then(function (response) {          
         app.specie = response.data;    
      });

      axios.get('data_plot.php', {
        params: {
          select_specie: this.specia
        }
      })
      .then(function (response) {       
         console.log(response.data);    
      });

    }




    },
created: function(){
    this.getDENUM();
  }

    })
  </script>


</div>



    <script type="text/javascript">



$(document).ready(function () {

  $("form").submit(function(){

  $.ajax({
    url: "data_plot.php",
    method: "GET",
    success: function(output) {
      console.log(output);


  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);
 },
    error: function(data) {
      console.log(data);
    }
  }); // end ajax

});

});


</script>       


  </body>

</html>

Скрипт для выпадающего списка "selectoptions. php": 

<?php

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

$request = $_GET['request'];

// Fetch DENUM
if($request == 1){

  $result = mysqli_query($conn,"SELECT DISTINCT `DENUM` FROM `fpk20082018` WHERE 1");

  $response = array();
  while($row = mysqli_fetch_assoc($result)){
    $DENUM = $row['DENUM'];


    $response[] = array("DENUM"=>$DENUM);
  }

  echo json_encode($response);
  exit;
}


?>

Скрипт, необходимый для генерации набора данных для графика "data_plot. php": 

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

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

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



$select_specie=$_GET["select_specie"];



//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]);

print $output;
?>
...