suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Erstellen Sie Diagramme mit Google Charts mit HTML <form>

Vor kurzem habe ich versucht, visuelle Analysen in ein Projekt einzufügen, an dem ich gearbeitet habe, und ich wollte in der Lage sein, Diagramme über die Benutzeroberfläche in HTML zu erstellen form. Der Code meiner HTML-Seite lautet wie folgt: 

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

Die Datei, die das Formular verarbeitet, ist 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>";
          }
        }
?>

Mein Ziel ist es, dem Benutzer die Eingabe des gewünschten Diagrammtyps und der gewünschten Eigenschaften in das HTML-Formular auf der ersten Seite zu ermöglichen und dann die zweite Seite die Anfrage bearbeiten und das Diagramm ausdrucken zu lassen.

Ich weiß, dass ich viel Code gepostet habe, aber ich kämpfe seit drei Tagen mit diesem Problem und jede Hilfe ist willkommen!

Bearbeiten Ich habe den Teil hinzugefügt, der $_SESSION['LAST_ACTIVITY'] = time(); 和 $usersid definiert.

Das Problem ist, dass ich anscheinend keine Möglichkeit finde, die Daten aus dem Formular abzurufen und sie zum Erstellen eines Diagramms zu verwenden. Wenn ich erschaffe 

<?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']."],";
}?>
Die Markierung in der Funktion

drawChart() macht meine gesamte getData.php Seite komplett weiß. Ich weiß, dass dies keine gute Möglichkeit ist, mein Problem zu erklären, aber ich habe mein Bestes gegeben. Bitte fragen Sie mich nach einer Erklärung, die Sie benötigen.

Edit 2

Nach der Änderung in der Antwort von @Professor Abronsius kann ich das Kreisdiagramm ausdrucken, leider sieht es so aus:

Wenn ich versuche, mir den Netzwerkverkehr anzusehen, um herauszufinden, wie die JSON-Datei aussieht, sieht die Datei gut aus: 

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

Das bedeutet, dass ein Kreisdiagramm mit gleichen Teilen gedruckt werden sollte. Irgendwelche Ideen?

Bearbeiten 3

Es gibt keine Fehler in der Konsole beim Generieren des Diagramms und nach dem Hinzufügen von console.log() in der folgenden Zeile: 

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

Die Ausgabe in der Konsole ist wie folgt (ich verstehe nicht, ob sie richtig oder falsch ist): 

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

Im Layer:wf->0->c && Cache kann ich die Daten sehen, die dataTbl voraussichtlich füllen werden, aber ich weiß nicht, was der Rest ist...

Vielen Dank im Voraus!

getData.php PasteBin-Link zur Datei

html-form.php PasteBin-Link zur Datei

P粉135799949P粉135799949283 Tage vor410

Antworte allen(1)Ich werde antworten

  • P粉615886660

    P粉6158866602024-02-18 09:07:48

    以下内容均未经过测试，但可能会帮助您找到解决方案。我建议不要以传统方式提交表单，而是将 getData.php 和 HTML/javascript 完全分开。 getData.php 应该只运行 SQL 查询并将数据发送回 ajax 回调，然后调用 drawChart 来实际构建图表。

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

?>

    以及 slim 版本的 HTML 页面，没有外部库或 CSS，仅用于演示：

    

    
        
        
        
        
        
    
    
      
    
        
    
          
    
            Type of Chart
            
              
            
            Select an Attribute

    进行了微小的更改并构建了测试页面，运行应用程序产生了：

    Antwort
    0
  • StornierenAntwort