masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Buat carta dengan Carta Google menggunakan HTML <form>
P粉135799949
P粉135799949 2024-02-17 13:27:20
0
1
433

Baru-baru ini, saya telah cuba memasukkan analitik visual ke dalam projek yang telah saya usahakan, dan saya mahu dapat mencipta graf daripada UI dalam HTML form. Kod halaman HTML saya adalah seperti berikut: 

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

Fail yang memproses borang ialah 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>";
          }
        }
?>

Matlamat saya adalah untuk membenarkan pengguna memasukkan jenis carta dan sifat yang dia inginkan dalam bentuk html pada halaman pertama, dan kemudian meminta halaman kedua mengendalikan permintaan dan mencetak carta.

Saya tahu saya menyiarkan banyak kod tetapi saya telah bergelut dengan isu ini selama 3 hari dan sebarang bantuan dialu-alukan!

Edit Saya menambah bahagian yang mentakrifkan $_SESSION['LAST_ACTIVITY'] = time(); 和 $usersid.

Masalahnya ialah saya tidak dapat mencari cara untuk mendapatkan data daripada borang dan menggunakannya untuk mencipta carta. Apabila saya mencipta 

<?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']."],";
}?>
Tanda di dalam fungsi

drawChart() menjadikan seluruh halaman getData.php saya menjadi putih sepenuhnya. Saya tahu ini bukan cara yang baik untuk menjelaskan masalah saya, tetapi saya cuba yang terbaik. Sila tanya saya untuk sebarang penjelasan yang anda perlukan.

Edit 2

Selepas perubahan jawapan @Profesor Abronsius, saya boleh mencetak carta pai, malangnya ia kelihatan seperti ini:

Apabila saya cuba melihat trafik rangkaian untuk mengetahui rupa fail json, fail itu kelihatan baik: 

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

Ini bermakna carta pai dengan bahagian yang sama perlu dicetak.. Ada idea?

Edit 3

Tiada ralat dalam konsol semasa menjana carta, dan selepas menambah console.log() pada baris berikut: 

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

Keluaran dalam konsol adalah seperti berikut (saya tidak faham sama ada betul atau salah): 

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

Dalam lapisan:wf->0->c && cache, saya dapat melihat data yang saya jangkakan untuk mengisi dataTbl, tetapi saya tidak tahu apa yang lain...

Terima kasih terlebih dahulu!

getData.php Pautan PasteBin ke fail

html-form.php Pautan PasteBin ke fail

P粉135799949
P粉135799949

membalas semua(1)
P粉615886660
P粉6158866602024-02-18 09:07:48 Tingkat 1

Tiada satu pun daripada yang berikut telah diuji, tetapi boleh membantu anda mencari penyelesaian. Saya mengesyorkan agar anda tidak menghantar borang secara tradisional, tetapi menggunakan getData.php 和 HTML/javascript 完全分开。 getData.php 应该只运行 SQL 查询并将数据发送回 ajax 回调，然后调用 drawChart untuk membina carta.

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

?>

dan slim versi halaman HTML, tanpa perpustakaan luaran atau CSS, hanya untuk demonstrasi: 


    
        
        
        
        sssccc
        sssccc
Type of Chart Select an Attribute
sssccc

Membuat perubahan kecil dan membina halaman ujian, menjalankan apl yang dihasilkan:

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan