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
