だから最近、私は、ダイナミック原料の束がそうここにある一緒に来て、このページを開始した動的データ(chart.js)との動的なグラフを更新...ロードと
1)ユーザーがフォームに(選択されます)データベーステーブルHYDROからどの列を見たいか(ここでは例としてPM1、PM2、PM3を選択します)
2)その後、ユーザーはライブチャートまたは静的チャートを選択します(ここでは例えば住む)チャートまたは最後の24時間か何かの概要を更新生きる
3)
チャートがロードされます
-
それらをロードする。
は、各列に対して、PHPは(PHPコードは、foreachループで要求列毎にこれを繰り返すChart.js
- からスクリプトに値としてラベルと選択された列の列値として行タイムスタンプを出力します。ページは、すべての初期グラフをロードするために終了したらも
- )重要ではない、などによって値を乗算/除算する数を計算することは、小さなDIVは(DBの最後の行からのすべての列がそれ自体にロード)は、すべての最新のデータを取得します、chart.jsスクリプトは、それがこの隠されたdiv要素から必要な値をロードします。
これは前に働いていたが、私は別のグラフをループするforeach PHPのループに入って、悲しいことにするので、彼らはもう表示されません... 私は$(document).ready(function(){});
を使用してみましたが、それは悲しげに動作しませんでした。
<?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>
私は、これは厄介見なければならない知っているが、単純なことが頻繁にロードされているページの前に入れるthatsのPHPの入力に応じて動的なjQueryのスクリプトをロードしているが、ここで、作業からのjQueryを停止し、サイトのページ ためのリンクですhttp://hmorreels.hol.es/Morreels_App/index.php/charts
私は誰かがこのに見に時間がかかり、私がしようとしようとしてきた希望と、それはロードされません:
PS .... /どんなに私がしようとするもの:私はしようとしていないのです怠け者であり、あなたに私の問題を解決するように頼んでください。ちょうどそのように、私は私の頭をarounにすることはできません。動的にjQueryスクリプトを読み込む理由と、時にはうまく動作しないことがあります。
いくつかの余分な情報: PHPで使用$full
配列は、このように選択した複数の列が含まれています。
そして、ここではすべての値
を含む使用atabaseテーブル構造の写真です
他の情報が必要な場合は、私はそれを提供してうれしいです、それは大きな問題です、私はいつも何かを忘れることができます:) –