communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Créez des graphiques avec Google Charts en utilisant HTML <form>
P粉135799949
P粉135799949 2024-02-17 13:27:20
0
1
431

Récemment, j'ai essayé d'insérer des analyses visuelles dans un projet sur lequel je travaille et je voulais pouvoir créer des graphiques à partir de l'interface utilisateur en HTML form. Le code de ma page HTML est le suivant : 

<!DOCTYPE html>
<html>

<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">

  <title>Charts</title>

  <!-- Bootstrap CSS CDN -->
  
  <!-- Our Custom CSS -->
  <!-- Font Awesome JS -->
  <!--Load the AJAX --> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

  <div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
    // standard sidebar stuff
    </nav>

    <!-- Page Content  -->
    <div id="content">

      <form action="getData.php" method="POST" id="form">
        <table class="" id="chart-searching">

          <tr id="type_of_chart_row">
            
            <th>Type of Chart</th>
            <td colspan="3" class="">
              <select id="type_of_chart" name="charts">
                <option value="Pie_chart">Pie chart</option> 
                <option value="Bar_chart">Bar chart</option> 
                <option value="Col_chart">Column chart</option> 
                <option value="Area_chart">Area</option>
                <option value="Line_chart">Line chart</option>
                
              </select>
            </td>
          
            <th>Select an Attribute</th>

            <td colspan="3" id="attribute_row">
              <select id="attributes" name="attributes">
                <option value="Patient_name">Name</option>
                <option value="Patient_id">ID</option>
                <option value="Sex">Sex</option>
                <option value="Race">Race</option>
                <option value="Age">Age</option>
                <option value="Comorbidities">Comorbidities</option>
                <option value="Email">Email</option>
                <option value="eddsscore">EDSS Score</option>
                <option value="Phonenum">Phone Number</option>
                <option value="onsetsymptoms">Onset Symptoms</option>
                <option value="Onsetlocalisation">Onset Localisation</option>
                <option value="smoker">Smoker</option>
                <option value="Pregnant">Pregnant</option>
                <option value="MRIenhancing">MRI Enhanced Lesions</option>
                <option value="MRInum">MRI Enhanced Lesions Number</option>
                <option value="MRIonsetlocalisation">MRI Onset Localisation</option>
              </select>
            </td>

          </tr>
        </table>

        <button type="submit" name="makeGraph" value="Create Graph" id="test" onclick="">Create Graph</button>
      
      </form>
      
      
      <div id="chart_div"></div>

    </div>
  </div>
      
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  
  <script type="text/javascript">//sidebarCollapse
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>  
</body>
</html>

Le fichier qui traite le formulaire est getData.php

<?php
session_start();
error_reporting(0);
if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 18000)) {
  // last request was more than 30 minutes ago
  session_unset();     // unset $_SESSION variable for the run-time
  session_destroy();   // destroy session data in storage
  $scripttimedout = file_get_contents('timeout.js');
  echo "<script>" . $scripttimedout . "</script>";
} 
$_SESSION['LAST_ACTIVITY'] = time(); // update last activity time stamp?>
<!DOCTYPE html>
<html>
<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">
  <title>charts</title>
  <!-- Bootstrap CSS CDN -->
  <!-- Our Custom CSS -->
  <!-- Font Awesome JS -->
    <!--Load AJAX-->
    <script src="/MSR/application/jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      // google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.arrayToDataTable([
            
            ['Patient_name','number'],
            <?php 
              $sql = "SELECT Patient_name, count(*) as number FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
              $result = $pdo->query($sql);
              $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
              while($row = $result->fetch()){
                // $array[] = $row;
                  echo "['".$row['Patient_name']."',".$row['number']."],";
              }
            ?>
        ]);
        // data.addColumn('string', 'Topping');
        // data.addColumn('number', 'Slices');
        // data.addRows([
        //   ['Mushrooms', 3],
        //   ['Onions', 1],
        //   ['Olives', 1],
        //   ['Zucchini', 1],
        //   ['Pepperoni', 2]
        // ]);
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>

  <div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
    </nav>

    <!-- Page Content  -->
    <div id="content">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav ml-auto">
              <li class="navbar-nav">
                <a class="nav-link" id="">
                  <i class="fas fa-user"></i>
                  Doctor: <u><?php $user_name = $_SESSION['user'];
                                    
                              echo $user_name.$usersid; ?></u>
                </a>
                <a href="logout.php" onclick="return confirm('Are you sure to logout?');">
                  <button type="button" id="logoutBtn" class="navbar-btn btn btn-info">
                    <!-- <i class="fa fa-sign-out"></i> -->
                    <span>Logout</span>
                  </button>
                </a>
              </li>
            </ul>
          </div>

        <div id="chart_div"></div>

      <footer>
      </footer>
    </div>
  </div>
     
  <!-- Popper.JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap JS -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  
  <script type="text/javascript">//sidebarCollapse
    $(document).ready(function() {
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });
    });
  </script>
     
</body>

</html>

<?php

    //database connection info (this part works fine)
            
      $pdo = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
      // set the PDO error mode to exception
      $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


    // get data from the form
        $createGraph = $_POST['makeGraph'];
        $attributes = $_POST['attributes'];
        $charts = $_POST['charts'];

        if (isset($_POST['makeGraph'])) {
          try {
              $array = array();
              if ($charts == 'Pie_chart'){
                  if($attributes == 'Patient_name'){
                      $sql = "SELECT Patient_name, count(*) as number 
                      FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum 
                      WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
                      $result = $pdo->query($sql);
                      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
                      while($row = $result->fetch()){
                        $array[] = $row;
                      }
                      $jsonArray = json_encode($array,JSON_PRETTY_PRINT);
                      echo $jsonArray;  
                  }
             // hoping to make something similar in the if statements with the rest of the attributes (email-sex-Race etc...)
              
          } catch (PDOException $e) {
            echo"<div class='error'>";
              echo $statement . "<br>" . $e->getMessage();
              die("ERROR: Could not able to execute $sql. " . $e->getMessage());
            echo "</div>";
          }
        }
?>

Mon objectif est de permettre à l'utilisateur de saisir le type de graphique et les propriétés qu'il souhaite dans le formulaire HTML sur la première page, puis de laisser la deuxième page gérer la demande et imprimer le graphique.

Je sais que j'ai posté beaucoup de code mais je suis aux prises avec ce problème depuis 3 jours et toute aide est la bienvenue !

Modifier J'ai ajouté la partie qui définit $_SESSION['LAST_ACTIVITY'] = time(); 和 $usersid.

Le problème est que je n'arrive pas à trouver un moyen d'obtenir les données du formulaire et de les utiliser pour créer un graphique. Quand je crée 

<?php 
$sql = "SELECT Patient_name, count(*) as number FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum WHERE Doctor_ID = '$usersid' GROUP BY Patient_name";
$result = $pdo->query($sql);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
while($row = $result->fetch()){
// $array[] = $row;
   echo "['".$row['Patient_name']."',".$row['number']."],";
}?>
La marque à l'intérieur de la fonction

drawChart() rend toute ma getData.php page complètement blanche. Je sais que ce n'est pas une bonne façon d'expliquer mon problème, mais j'ai fait de mon mieux. Veuillez me demander toute explication dont vous avez besoin.

Edit 2

Après le changement dans la réponse du @Professeur Abronsius, je peux imprimer le diagramme circulaire, malheureusement il ressemble à ceci :

Lorsque j'essaie de regarder le trafic réseau pour savoir à quoi ressemble le fichier json, le fichier semble correct : 

0   Object { name: "Name1", number: "1" }
1   Object { name: "Name2", number: "1" }
2   Object { name: "Name3", number: "1" }
3   Object { name: "Name4", number: "1" }
4   Object { name: "Name5", number: "1" }
5   Object { name: "name6", number: "1" }
6   Object { name: "Name7", number: "1" }
7   Object { name: "Name8", number: "1" }

Cela signifie qu'un diagramme circulaire à parts égales doit être imprimé. Des idées ?

Edit 3

Il n'y a aucune erreur dans la console lors de la génération du graphique, et après avoir ajouté console.log() à la ligne suivante : 

Object.keys( json ).forEach(key=>{
                console.log(dataTbl.addRow( [ json[ key ].name, json[ key ].number ] ));
                
            })

Le résultat dans la console est le suivant (je ne comprends pas si c'est vrai ou faux) : 

Object { cq: null, bf: (2) […], Wf: (1) […], Br: null, cache: [], version: "0.6" }
​
Br: null
​
Wf: Array(8) [ {…}, {…}, {…}, … ]
​​
0: Object { c: (2) […] }
​​​
c: Array [ {…}, {…} ]
​​​​
0: Object { v: "Athanasia Moutlia" }
​​​​
1: Object { v: "1" }
​​​​
length: 2
​​​​
<prototype>: Array []
​​​
<prototype>: Object { … }
​​
1: Object { c: (2) […] }
​​
2: Object { c: (2) […] }
​​
3: Object { c: (2) […] }
​​
4: Object { c: (2) […] }
​​
5: Object { c: (2) […] }
​​
6: Object { c: (2) […] }
​​
7: Object { c: (2) […] }
​​
length: 8
​​
<prototype>: Array []
​
bf: Array [ {…}, {…} ]
​
cache: Array(8) [ (2) […], (2) […], (2) […], … ]
​
cq: null
​
version: "0.6"
​
<prototype>: Object { constructor: gvjs_M(a, b), ca: ca(), "$": $()
, … }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (2) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (3) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (4) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (5) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (6) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (7) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13
Object { cq: null, bf: (2) […], Wf: (8) […], Br: null, cache: [], version: "0.6" }
visual_analytics_google.php:203:13

Dans la couche :wf->0->c && cache, je peux voir les données que je m'attends à remplir dataTbl, mais je ne sais pas ce qu'est le reste...

Merci d'avance !

getData.php Lien PasteBin vers le fichier

html-form.php Lien PasteBin vers le fichier

P粉135799949
P粉135799949

répondre à tous(1)
P粉615886660
P粉6158866602024-02-18 09:07:48 1 plancher

Aucun des éléments suivants n'a été testé, mais peut vous aider à trouver une solution. Je recommande de ne pas soumettre le formulaire de manière traditionnelle, mais d'utiliser getData.php 和 HTML/javascript 完全分开。 getData.php 应该只运行 SQL 查询并将数据发送回 ajax 回调，然后调用 drawChart pour créer le graphique.

getData.php

 18000 ) ) ) {
        session_unset();
        session_destroy();
        exit( header('Location: ?timeout=true') );
    } 
    $_SESSION['LAST_ACTIVITY'] = time();
    
    
    
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
        $_POST['attributes'],
        $_POST['charts']
    )){
        $pdo = new PDO( "mysql:host=$servername;dbname=$dbname", $username, $password );
        $pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
        
        $args=array(); # default, empty array if there are no placeholders
        $attributes = $_POST['attributes'];
        $charts = $_POST['charts'];
        
        /*
            create suitable SQL statement and $args array
            for each $attribute that you wish to plot on a chart.
            
            Use a Prepared statement to mitigate SQL injection attacks.
        */
        switch( $attributes ){
            case 'Patient_name':
                $sql='SELECT Patient_name, count(*) as number 
                          FROM patients JOIN MSR ON patients.Patient_id = MSR.NDSnum 
                          WHERE Doctor_ID = :userid
                          GROUP BY Patient_name';
                $args=array(
                    ':userid'   =>  $userid
                );
            break;
            
            
            /*
                test cases...
            */
            case 'maps':
                $sql='select `county` as `name`, count(*) as `number` from `vwmaps`
                        group by `county`';
            break;
            case 'fish':
                $sql='select `family` as `name`, count(*) as `number` from `vwfishspecies`
                        group by `species_order_id`';
            break;
            
            /*
                etc etc
            */
        }
        
        if( isset( $sql, $args ) ){
            $stmt=$pdo->prepare( $sql );
            if( $stmt ) {
                $stmt->execute( $args );
            
                http_response_code( 200 );
                exit( json_encode( $stmt->fetchAll( PDO::FETCH_OBJ ) ) );
            }
            exit( http_response_code( 400 ) );
        }
        
        # no sql to run...
        http_response_code( 400 );
    }
    
    # only allow POST requests
    http_response_code( 404 );

?>
Version

et slim de la page HTML, sans bibliothèques externes ni CSS, juste à titre de démonstration : 


    
        
        
        
        sssccc
        sssccc
Type of Chart Select an Attribute
sssccc

Modifications mineures apportées et création d'une page de test, exécutant l'application produite :

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal