So vor kurzem begann ich diese Seite, wo eine Reihe von dynamischen Sachen zusammen, so kommt hier ist es ...Laden und Aktualisieren dynamische Diagramme mit dynamischen Daten (chart.js)
1) Ein Benutzer wählt (in einer Form) welche Spalten aus der Datenbanktabelle HYDRO er sehen möchte (sagen wir für das Beispiel hier wählt er PM1, PM2, PM3)
2) Dann wählt der Benutzer Live oder statische Diagramme Ie Live-Charts oder einen Überblick über die letzten 24 Stunden oder etwas Aktualisierung (für das Beispiel hier leben)
3)
Charts geladen werden, PHP das Array mit allen Spalten und den Namen der Tabelle bekommt um sie zu laden.
dann für jede Spalte gibt die Zeilen PHP-Zeitstempel als Etikett und die Spaltenzeile gewählten Wert als Wert für das Skript von Chart.js
- der PHP-Code wiederholt dies für jede Spalte in einer Schleife foreach angefordert (Berechnung der Zahl, um den Wert zu teilen/zu multiplizieren, usw., nicht wichtig)
- Wenn die Seite fertig ist, um alle anfänglichen Diagramme zu laden, erhält ein kleines div die neuesten Daten (jede Spalte aus der letzten Zeile von dB in sich geladen) Das Skript chart.js lädt dann die Werte, die es von diesem versteckten div benötigt.
Dies hat vorher funktioniert aber leider, da ich die foreach PHP-Schleife durch die verschiedenen Graphen eingegeben, sie nicht mehr auftauchen ... ich mit $(document).ready(function(){}); versucht, aber das funktionierte nicht traurig.
<?php
$mysqli = new mysqli("db4free.net", "rafaello104", "06071994", "morreels");
// GET COMPANY NAME THAT WE ARE FEEDING
// ====================================
if (!isset($full["company_identifier"])) {
$company_identifier = 1;
} else { $company_identifier = $full["company_identifier"];}
//die(print_r($full));
$bedrijf = $full['MYSQL_TABLE'];
$result = $mysqli->query("SELECT * FROM $bedrijf WHERE entry_ID ORDER BY updated DESC LIMIT 20");
$row = $result->fetch_assoc();
$current_feed = array();
while ($row = $result->fetch_assoc()) {
$current_feed[] = $row;
}
?>
<div id="cmd" style=""> Entry Counter:
<div class="flip-wrapper">
<div id="data_load">
</div>
</div>
</div>
<?php foreach ($full["columns"] as $column_key => $column_values): ?>
<?php
if ($column_key == "load_live") {
continue;
}
$column_operator = $column_values["operator"];
$column_numerator = $column_values["numerator"];
$column_numer_orig = $column_values["numerator"];
if ($column_operator == "x") {
$column_numerator = 1/$column_numerator;
}
$SQL_name = $column_key;
$display_name = $column_values["value"];
?>
<!--
=======================================================================
=======================================================================
*********************** START <?php echo $display_name ?> *************************
=======================================================================
=======================================================================
-->
<script>
$(document).ready(function(){
var ctx = $('#<?php echo $column_key; ?>').get(0).getContext("2d");
var data = {
labels: [
"<?php echo $display_name . " @: " . substr($current_feed[10]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[8]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[6]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[4]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[2]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($current_feed[0]['updated'], 11); ?>",
"<?php echo $display_name . " @: " . substr($most_recent['updated'], 11); ?>"
],
datasets: [
{
label: "Today:",
fillColor: "rgba(59, 89, 152, 0.4)",
strokeColor: "rgba(59, 89, 152, 0.6)",
pointColor: "#fff",
pointStrokeColor: "rgba(59,89,152,1)",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [
<?php echo round($current_feed[10][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($current_feed[8][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($current_feed[6][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($current_feed[4][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($current_feed[2][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($current_feed[0][$SQL_name]/$column_numerator, 2); ?>,
<?php echo round($most_recent[$SQL_name]/$column_numerator, 2); ?>
]
}
]
};
var <?php echo $column_key; ?>_chart = new Chart(ctx).Line(data, {
bezierCurves: false,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
responsive: true,
animation: false
});
setInterval(function update() {
// Update one of the points in the second dataset
<?php echo $column_key; ?>_chart.datasets[0].points[0].value = <?php echo $column_key; ?>_chart.datasets[0].points[1].value;
<?php echo $column_key; ?>_chart.datasets[0].points[1].value = <?php echo $column_key; ?>_chart.datasets[0].points[2].value;
<?php echo $column_key; ?>_chart.datasets[0].points[2].value = <?php echo $column_key; ?>_chart.datasets[0].points[3].value;
<?php echo $column_key; ?>_chart.datasets[0].points[3].value = <?php echo $column_key; ?>_chart.datasets[0].points[4].value;
<?php echo $column_key; ?>_chart.datasets[0].points[4].value = <?php echo $column_key; ?>_chart.datasets[0].points[5].value;
<?php echo $column_key; ?>_chart.datasets[0].points[5].value = <?php echo $column_key; ?>_chart.datasets[0].points[6].value;
<?php echo $column_key; ?>_chart.scale.xLabels[0] = <?php echo $column_key; ?>_chart.scale.xLabels[1];
<?php echo $column_key; ?>_chart.scale.xLabels[1] = <?php echo $column_key; ?>_chart.scale.xLabels[2];
<?php echo $column_key; ?>_chart.scale.xLabels[2] = <?php echo $column_key; ?>_chart.scale.xLabels[3];
<?php echo $column_key; ?>_chart.scale.xLabels[3] = <?php echo $column_key; ?>_chart.scale.xLabels[4];
<?php echo $column_key; ?>_chart.scale.xLabels[4] = <?php echo $column_key; ?>_chart.scale.xLabels[5];
<?php echo $column_key; ?>_chart.scale.xLabels[5] = <?php echo $column_key; ?>_chart.scale.xLabels[6];
$live_<?php echo $column_key; ?> = $('#live_<?php echo $column_key; ?>').html();
$live_<?php echo $column_key; ?> = parseInt($live_<?php echo $column_key; ?>);
$live_<?php echo $column_key; ?> = $live_<?php echo $column_key; ?>/<?php echo $column_numerator; ?>;
$live_updated = $('#live_updated').html().substr(20);
<?php echo $column_key; ?>_chart.scale.xLabels[6] = $live_updated;
<?php echo $column_key; ?>_chart.datasets[0].points[6].value = $live_<?php echo $column_key; ?>;
console.log('Latest <?php echo $column_key; ?> value = ' + $live_<?php echo $column_key; ?> + ' this has been updated @: ' + $live_updated);
<?php echo $column_key; ?>_chart.update();
}, 10000);
});
</script>
<div class="col colspan-1-of-2" id="pm_charts">
<h3><?php echo $display_name; ?> chart</h3>
<p>This value is calculated by <?php if($column_operator == "/") {echo "dividing";} else { echo "multiplying";}?> the received value by <?php echo $column_numer_orig ?> and then <br/> rounding it up/down to 2 numbers behind the comma.</p>
<canvas id="<?php echo $column_key; ?>" width="650px" height="300px"></canvas>
</div>
<!--
=======================================================================
=======================================================================
*********************** END <?php echo $display_name ?> *************************
=======================================================================
=======================================================================
-->
<?php endforeach; ?>
<script>
$ii = 0;
setInterval(
function update() {
$ii++;
console.log("Checked dB " + $ii + " times.");
$('#data_load').load('/Morreels_App/public/scripts/js/connection_loop.php');
},
2000);
</script>
Ich weiß, das unordentlich aussehen muss, aber die einfache Sache wird geladen dynamische jQuery Skripte nach PHP-Eingang thats, bevor die Seite gestellt in oft stoppt jQuery geladen von der Arbeit, hier ist der Link auf die Seite der Website http://hmorreels.hol.es/Morreels_App/index.php/charts
ich hoffe, dass jemand die Zeit, dies zu prüfen braucht, ich habe versucht, und zu versuchen, und es wird nicht Last:/Egal, was ich versuche ....
PS: ich versuche, nicht zu sei faul und bitte euch Jungs, mir einfach so ein Problem zu lösen, ich kann einfach nicht meinen Kopf rummachen d das ganze dynamisch laden von jQuery-Skripten und warum sie manchmal nicht funktionieren und manchmal tun sie ...
einige zusätzliche Informationen: die $full Array in PHP verwendet wird, enthält mehrere ausgewählte Spalten auf diese Weise:
Und hier ist ein Bild von der ATENBANK Tabellenstruktur verwendet, um alle Werte enthält
Wenn Sie weitere Informationen benötigen, ich bin froh, es zu liefern, Es ist ein großes Problem, und ich kann immer etwas vergessen :) –