Upload files to 'html'
This commit is contained in:
parent
05adf06434
commit
9a8d595938
111
html/README.md
Normal file
111
html/README.md
Normal 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
209
html/chart.js
Normal 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
155
html/db.php
Normal 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
81
html/kurse.css
Normal 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
172
html/show.php
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user