2016-04-18 16 views
0

だから最近、私は、ダイナミック原料の束がそうここにある一緒に来て、このページを開始した動的データ(chart.js)との動的なグラフを更新...ロードと

1)ユーザーがフォームに(選択されます)データベーステーブルHYDROからどの列を見たいか(ここでは例としてPM1、PM2、PM3を選択します)

2)その後、ユーザーはライブチャートまたは静的チャートを選択します(ここでは例えば住む)チャートまたは最後の24時間か何かの概要を更新生きる

3)

チャートがロードされます

  • 、PHPはすべての列と列とテーブルの名前を取得します
      それらをロードする。

    • は、各列に対して、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配列は、このように選択した複数の列が含まれています。

    $Full array

    そして、ここではすべての値

    を含む使用atabaseテーブル構造の写真です

    Database table, HYDRO's structure

  • +0

    他の情報が必要な場合は、私はそれを提供してうれしいです、それは大きな問題です、私はいつも何かを忘れることができます:) –

    答えて

    0

    ご迷惑をおかけして申し訳ございません。あなたの時間の男の子/女の子の一部に申し訳ございません。

    Iどうやらこれはいくつかの他のjQuery変数と競合していたと明らかにアップ全体を台無し 、私が行った方法私のキャンバスを命名しているはずの、これは

    を修正しました(一部は更新システムではマイナーなバグを鉱石それは主に問題が修正されている! :))

    関連する問題