Upload files to 'html'

This commit is contained in:
Walter Gussmann 2018-06-30 10:47:13 +02:00
parent 05adf06434
commit 9a8d595938
5 changed files with 728 additions and 0 deletions

111
html/README.md Normal file
View File

@ -0,0 +1,111 @@
# Anzeigen der Wechselkurse
Die Daten werden in aus einer MySQL-Datenbank gelesen und in Tabellenform angezeigt. Für eine Währung wird die Kursentwicklung grafisch veranschaulicht. Die Darstellung basiert auf der Bibliothek https://d3js.org/d3.v3.min.js.
## Datenbankroutinen
Für den Datenbankzugriff wird die Klasse db.php verwendet. Der Konstruktor
verlangt nach dem Namen der Datenbank ("wechselkurse") sowi den Benutzerdaten
(username+password).
Folgende Schnittstellen stehen zur Verfügung:
```
class DB {
function getDBName() // liefert den Namen der Datenbank
// Liefert ein Array.
// Jeder Eintrag stelt eine Datenzeile dar, die ein assoziatives Array ist.
// wird intern verwendet
function get_Query($sql)
// liefert Abfrage im JSON-Format
function getJSON_Data($sql)
// Für eine sql-Abfrage mit einer Spalte wird der Quelltext für
// eine HTML-Dropbox generiert.
// - sql-Abfrage
// - Zu jeder Option ein Link erzeugt
// - es kann ein vordefinierter Wert ausgewählt werden
// - der Name der Select-Box
function getQueryAsHTMLDropDownBox($sql, $link, $default, $dropdownName)
// Eine SQL-Abfrage wird in einer Texttabelle erzeugt
// Das Format der Tabelle muss übergeben werden
function getQueryAsTEXTTable($sql,$format)
// Eine SQL-Abfrage wird als HTML-Tabelle zurückgegeben
function getQueryAsHTMLTable($sql)
}
```
Beispielaufrufe:
```
/*------------------------------------------------------ */
echo $db->getJSON_Data("SELECT * from kurse LIMIT 2;") . "\n";
print_r ( $db->get_Query("SELECT * from kurse LIMIT 2;") );
echo "getQueryAsDropDownBox \n";
print_r ($db->getQueryAsHTMLDropDownBox("SELECT DISTINCT(waehrung) from kurse ORDER BY waehrung", "https://server.de/show.php?waehrung=", "JPY", "myDDF") );
echo "getQueryAsTEXTTable \n";
print_r ($db->getQueryAsTEXTTable("SELECT * from kurse LIMIT 4","%-4s %-12s %-5s %10f") );
echo "getQueryAsHTMLTable \n";
print_r ($db->getQueryAsHTMLTable("SELECT * from kurse LIMIT 4") );
/*------------------------------------------------------ */
```
## Grafische Anzeige des Kursverlaufs
Für die Bibliothek https://d3js.org/d3.v3.min.js wird eine angepasste Datei
chart.js verwendet, die das Format auf deutsch umstellt und im Wesentlichen
eine Methode enthält, die für die Anzeige verwendet wird.
```
// ************************************************************
// Funktion zur Erzeugung einer Grafik (Linie)
// Die Daten müssen zwei Spalten enthalten: (zeit | value)
//
// Parameter:
// o titel Diagrammtitel oben
// o sql wird z.Zt. nicht genutzt
// o textX Beschrfitung der x-Achse
// o textY Beschriftung der y-Achse
// o breite Breite des Diagramms
// o hoehe Höhe des Diagramms
// o data Daten im JSON-Format
// o scaleY 0=automatisch skalieren, 1=Prozent 0..100
// o units Einheiten für die Tooltipps
// o id id in css-Klasse
// #id ............ Breite, Rand/farbe)
// #id .title ...... Farbe, Größe des Titels
// #id .y .......... Farbe der y-Beschriftung
// #id .linecolor .. Linienfarbe
// #id .tooltip .... Frarbe Tooltipps
// ***********************************************************
function showDiagram1Line(titel, sql, textX, textY, breite, hoehe, data, scaleY, units, id)
```
Beispielaufruf ("waehrung" wird als Parameter beim Aufruf mitgegen und muss
zuvor mit $_GET oder $_POST gelesen werden):
```
<script>
<?php
$sqlW = "SELECT datum as zeit, kurs as value from kurse WHERE waehrung='$waehrung' ORDER BY datum DESC";
$json_data = $db->getJSON_Data($sqlW);
echo "data=".$json_data.";"
?>
showDiagram1Line("Währung","","Zeit", "", 600, 300, data, 0, "<?php echo $waehrung; ?><br>=1 Euro", "#graphCurrency");
</script>
```

209
html/chart.js Normal file
View File

@ -0,0 +1,209 @@
// ***********************************************************
//
// Globale Einstellungen
// gültig für alle Diagramme
//
// ***********************************************************
// Parse the date / time
//var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var parseDate = d3.time.format("%Y-%m-%d").parse;
// Einstellung auf deutsche Formate
var de_DE = d3.locale({
"decimal": ",",
"thousands": ".",
"grouping": [3],
"currency": ["", "€"],
"dateTime": "%a %b %e %X %Y",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
"months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "July", "August", "September", "Oktober", "November", "Dezember"],
"shortMonths": ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
});
// Zeit auf deutsches Format einstellen
d3.time.format = de_DE.timeFormat;
// Benutzerdefiniertes Zeitformat
var customTimeFormat = d3.time.format.multi([
[".%L", function(d) { return d.getMilliseconds(); }],
[":%S", function(d) { return d.getSeconds(); }],
["%H:%M", function(d) { return d.getMinutes(); }],
["%H:%M", function(d) { return d.getHours(); }],
["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
["%b %d", function(d) { return d.getDate() != 1; }],
["%b", function(d) { return d.getMonth(); }],
["%Y", function() { return true; }]
]);
// Zeitformat für Tooltipps
var formatTimeTooltipp = d3.time.format("%e %B %H:%M");
// ************************************
// define grid line functions
// ************************************
function make_x_axis1(x) {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(15)
}
function make_y_axis1(yy) {
return d3.svg.axis()
.scale(yy)
.orient("left")
.ticks(5)
}
// ************************************************************
// Funktion zur Erzeugung einer Grafik (Linie)
// Die Daten müssen zwei Spalten enthalten: (zeit | value)
//
// Parameter:
// o titel Diagrammtitel oben
// o sql wird z.Zt. nicht genutzt
// o textX Beschrfitung der x-Achse
// o textY Beschriftung der y-Achse
// o breite Breite des Diagramms
// o hoehe Höhe des Diagramms
// o data Daten im JSON-Format
// o scaleY 0=automatisch skalieren, 1=Prozent 0..100
// o units Einheiten für die Tooltipps
// o id id in css-Klasse
// #id ............ Breite, Rand/farbe)
// #id .title ...... Farbe, Größe des Titels
// #id .y .......... Farbe der y-Beschriftung
// #id .linecolor .. Linienfarbe
// #id .tooltip .... Frarbe Tooltipps
// ***********************************************************
function showDiagram1Line(titel, sql, textX, textY, breite, hoehe, data, scaleY, units, id) {
var margin = {top: 30, right: 55, bottom: 30, left: 60},
width = breite - margin.left - margin.right,
height = hoehe - margin.top - margin.bottom;
document.write ("<div class='title'>" + titel + "</div>");
// specify the scales for each set of data
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// dynamische Werte anzeigen
var div = d3.select("body").append("div")
.attr("class", "tooltip tooltippfarbe")
.style("opacity", 0);
// axis formatting
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(6).tickFormat(customTimeFormat);;
var yAxis = d3.svg.axis().scale(y)
.tickFormat(d3.format(".4f"))
.orient("left").ticks(5);
// line functions
var valueLine = d3.svg.line()
.x(function(d) { return x(d.zeit); })
.y(function(d) { return y(d.value); });
// setup the svg area
var svg = d3.select(id)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// wrangle the data into the correct formats and units
data.forEach(function(d) {
d.zeit = parseDate(d.zeit);
d.value = +d.value;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.zeit; }));
if ( scaleY == 0 ) {
y.domain([
d3.min(data, function(d) {return Math.min(d.value); }),
d3.max(data, function(d) {return Math.max(d.value); })]);
//d3.min(data, function(d) {return Math.min(d.value); })-.25,
//d3.max(data, function(d) {return Math.max(d.value); })+.25]);
}
else {
y.domain([ 0,100 ]);
}
svg.append("path") // Add the value line.
.attr("class", "linecolor")
.attr("d", valueLine(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the value axis
.attr("class", "y axis")
//.style("fill", "steelblue")
.call(yAxis);
svg.append("text") // Add the text label for the value axis
.attr("class", "y")
.attr("transform", "rotate(-90)")
.attr("x", 0)
.attr("y", -40)
//.style("fill", "steelblue")
.style("text-anchor", "end")
.text(textY);
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis1(x)
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.append("g")
.attr("class", "grid")
.call(make_y_axis1(y)
.tickSize(-width, 0, 0)
.tickFormat("")
)
// dynamische Wertanzeige
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3)
.attr("cx", function(d) { return x(d.zeit); })
.attr("cy", function(d) { return y(d.value); })
.on("mouseover", function(d) {
div.transition()
.duration(100)
.style("opacity", .9);
div .html(formatTimeTooltipp(d.zeit) + "<br/>" + d.value + units)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
return true;
}

155
html/db.php Normal file
View File

@ -0,0 +1,155 @@
<?php
/*
* Klasse für Datenbankverbindungen
* mit der Bibliothek d3js.org
* Die Daten werden aus einer Datenbank gelesen
*
* * Tabelle: kurse (id*, datum, Waehrung, kurs)
*
*
* April 2017
*/
class DB {
private $connected = false;
private $hostname = "localhost"; // anpassen
private $username = "username"; // anpassen
private $password = "password"; // anpassen
private $db = "wechselkurse"; // anpassen
function __construct($db, $u, $pw) {
$this->db = $db;
$this->username = $u;
$this->password = $pw;
}
function getDBName() {
return $this->dbname;
}
// Liefert ein Array.
// Jeder Eintrag stelt eine Datenzeile dar, die ein assoziatives Array ist.
function get_Query($sql) {
try {
$dbh = new PDO("mysql:host=" . $this->hostname.";dbname=".$this->db, $this->username, $this->password);
$statement = $dbh->prepare($sql);
$statement->execute();
$dbh = null; // ** close the database connection *** /
}
catch(PDOException $e) {
echo $e->getMessage();
}
return $statement->fetchAll(PDO::FETCH_ASSOC);
}
// liefert Abfrage im JSON-Format
function getJSON_Data($sql) {
$result = $this->get_Query($sql);
$json_data = json_encode($result);
return $json_data;
}
function getQueryAsHTMLDropDownBox($sql, $link, $default, $dropdownName) {
$result = $this->get_Query($sql);
$html = "";
if ($result != null) {
$html .= "<select name='$dropdownName' onchange=\"window.open(this.options[this.selectedIndex].value,'_top')\" >\n";
foreach ($result as $i => $value) {
$row = $result[$i]; // Ein Datensatz (Hasharray)
$k = array_values($row)[0]; // Wert ist immer in Spalte 0
if ( $k == $default ) { $sel="selected"; }
else { $sel=""; }
$html .= " <option VALUE='$link$k' $sel>$k</option>\n";
}
$html .= "</select>\n";
return $html;
}
else {
return "Error beim erstellen der Dropdown-Box.";
}
}
function getQueryAsTEXTTable($sql,$format) {
$result = $this->get_Query($sql);
$html = "<div style='border:1px solid gray;padding 10px; width:350px;'>\n";
$html .= "<pre style='padding-left:10px;'>\n";
if ($result != null) {
foreach($result as $zeile) {
$html .= vsprintf($format, $zeile) . "\n";
}
$html .= "</pre>\n";
$html .= "</div>\n";
}
else $html = "error";
return $html;
}
function getQueryAsHTMLTable($sql) {
$result = $this->get_Query($sql);
$styleHeader = "style='background-color: #4D72D6; color:white;'";
$styleRowLow = "style='background-color:white;'";
$styleRowHigh = "style='background-color:#E1EFF5;'";
if ($result != null) {
$html = "<table style='border: 1px solid gray; padding:2'>\n";
// Tasbellenüberschrift
$zeile = $result[0];
$html .= "<tr $styleHeader>";
foreach($zeile as $k => $v) {
$html .= "<td>$k</td>" ;
}
$html .= "</tr>\n";
// Tabelleninhalt
$high = false;
foreach($result as $zeile) {
if ($high) { $st = $styleRowHigh; $high=false; }
else { $st = $styleRowLow; $high=true; }
$html .= "<tr $st>";
foreach($zeile as $k => $v) {
$html .= "<td>$v</td>" ;
}
$html .= "</tr>\n";
}
$html .= "</table>\n";
}
else $html = "error";
return $html;
}
}
/*
* ------------------------------------------------------
* Testder Methoden
* ------------------------------------------------------
$db = new DB("euro","dollar","wechselkurse");
echo "Datenbank " . $db->getDBName() . "\n";
echo "JSON \n";
echo $db->getJSON_Data("SELECT * from kurse LIMIT 2;") . "\n";
echo "PDO \n";
//print_r ( $db->get_Query("SELECT * from kurse LIMIT 2;") );
echo "getQueryAsDropDownBox \n";
//print_r ($db->getQueryAsHTMLDropDownBox("SELECT DISTINCT(waehrung) from kurse ORDER BY waehrung", "https://server.de/show.php?waehrung=", "JPY", "myDDF") );
echo "getQueryAsTEXTTable \n";
//print_r ($db->getQueryAsTEXTTable("SELECT * from kurse LIMIT 4","%-4s %-12s %-5s %10f") );
echo "getQueryAsHTMLTable \n";
print_r ($db->getQueryAsHTMLTable("SELECT * from kurse LIMIT 4") );
*/
?>

81
html/kurse.css Normal file
View File

@ -0,0 +1,81 @@
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/*
* **************************************************
* Darstellung Tooltipp Grundfarbe: lightsteelblue
* **************************************************
* */
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 40px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 1px solid lightgray;
border-radius: 8px;
pointer-events: none;
}
/*
* **************************************************
* Darstellung Währungen Grundfarbe: lindgrün
* **************************************************
* */
#graphCurrency {
float:left;
border: 3px solid #BDE7BD;
width: 600px;
}
#graphCurrency .title {
background: #BDE7BD;
color: gray;
font-size:2em;
text-align:center;
}
#graphCurrency .y {
fill: green;
}
#graphCurrency .linecolor {
stroke: green;
stroke-width: 2;
fill: none;
}
#graphCurrency .tooltip {
background: #BDE7BD;
}

172
html/show.php Normal file
View File

@ -0,0 +1,172 @@
<?php
/*
* Anzeige der Wechselkurse
* mit Auswahl des Tages
* und Grafik für eine Währung
*
* Datenbank: wechselkurse
* Tabelle: kurse (id*, datum, waehrung, kurs)
*
* April 2017
*/
include_once("./db.php");
$db = new DB("wechselkurse", "username","password");
$anzahl = 7;
if (isset($_GET["dauer"])) $anzahl = $_GET["dauer"];
$anzahl1 = $anzahl*4; // pro Tag 4 Zeilen
$datum = "";
$filter = "";
if (isset($_GET["datum"])) {
$datum = $_GET["datum"];
$filter = " WHERE datum='$datum'";
$anzahl = 0;
}
$waehrung = "USD";
if (isset($_GET["waehrung"])) $waehrung = $_GET["waehrung"];
$server = "https://gussmann-berlin.de/wechselkurs";
$table = "kurse";
$max = 0;
$min = 0;
$avg = 0;
function calculateMinMaxAvg($waehrung) {
global $min;
global $max;
global $avg;
global $db;
$sql = "SELECT min(kurs) as MIN1, max(kurs) as MAX1, avg(kurs) as AVG1 from kurse WHERE waehrung='$waehrung' ORDER BY datum DESC";
$result = $db->get_Query($sql);
if ($result != null) {
$zeile = $result[0];
$min = $zeile["MIN1"];
$max = $zeile["MAX1"];
$avg = $zeile["AVG1"];
}
}
function getMax() {
global $max;
return $max;
}
function getMin() {
global $min;
return $min;
}
function getAvg() {
global $avg;
return $avg;
}
?>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="kurse.css">
<style> /* set the CSS */
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="chart.js"></script>
<h2>Wechselkurse der europäischen Zentralbank</h2>
<div style="float:left; width:350px;">
<h3> Wechselkurse für <?php echo "$datum"; ?></h3>
Datum:
<?php echo $db->getQueryAsHTMLDropDownBox("SELECT DISTINCT(datum) from kurse ORDER BY datum desc", "$server/show.php?datum=", "", "datum") ?>
<br />
<br />
<?php
$sql = "SELECT datum, waehrung, kurs FROM $table $filter ORDER BY datum DESC LIMIT $anzahl1";
echo $db->getQueryAsTEXTTable($sql,"%-12s %-5s %10f")
?>
</div>
<div style="float:left;margin-left:20px; width:350px;">
<h3> Kursentwicklung für</h3>
Währung:
<?php
$sqlW = "SELECT DISTINCT(waehrung) from kurse ORDER BY waehrung";
echo $db->getQueryAsHTMLDropDownBox($sqlW, "$server/show.php?waehrung=", "JPY", "waehrung");
?>
<br />
<br />
<?php
$sqlW = "SELECT * from kurse WHERE waehrung='$waehrung' ORDER BY datum DESC";
echo $db->getQueryAsTEXTTable($sqlW,"%-5s %-12s %-5s %10f");
?>
</div>
<br />
<!--*****************************************************
* Beginn Ausgabe der Kursentwicklung als Diagramm
***************************************************** -->
<div style="float:left;margin-left:20px; padding-top:80px;">
<div id="graphCurrency">
<script>
<?php
$sqlW = "SELECT datum as zeit, kurs as value from kurse WHERE waehrung='$waehrung' ORDER BY datum DESC";
$json_data = $db->getJSON_Data($sqlW);
echo "data=".$json_data.";"
?>
showDiagram1Line("Währung","","Zeit", "", 600, 300, data, 0, "<?php echo $waehrung; ?><br>=1 Euro", "#graphCurrency");
</script>
<?php
calculateMinMaxAvg($waehrung);
$min1 = getMin();
$max1 = getMax();
$avg1 = getAvg();
$median = ($max1+$min1)/2;
$dmin = ($avg1-$min1)/$avg1*100;
$dmax = ($max1-$avg1)/$avg1*100;
?>
<pre>
min ..... <?php echo sprintf("%01.4f",$min1)."<br>" ?>
max ..... <?php echo sprintf("%01.4f",$max1)."<br>" ?>
avg ..... <?php echo sprintf("%01.4f",$avg1)."<br>" ?>
median ... <?php echo sprintf("%01.4f",$median)."<br>" ?>
dmin ..... <?php echo sprintf("%01.2f ",$dmin)."%" ?>
dmax ..... <?php echo sprintf("%01.2f ",$dmax)."%" ?>
</pre>
</div>
</div>
</div>
</body>
</html>