用AJAX刷新Morris圖表

作爲第一個我想爲我的壞英語道歉。雖然我理解英語，但可以用書面表達自己，不幸的是，非常糟糕。所以我使用翻譯工具。用AJAX刷新Morris圖表

現在我來我的問題：

有了快感我會更新與Morris.js顯示一個按鈕我的圖表。我已經有幾個小時的實驗。直到目前我在這裏告訴你一次我的代碼：

data_statistik.php

<div id="data_statistik" class="col-md-12"> 

     <div class="box box-primary"> 
     <div class="box-header with-border"> 
      <h3 class="box-title">Icecast Statistik</h3> 
      <button id="ReLoadData" type="button" class="btn btn-primary">Statistik refresh</button> 
     </div> 
     <!-- /.box-header --> 
     <div class="box-body"> 

      <div class="row"> 

      <div class="col-md-12"> 

       <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
       <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
       <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
       <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 

       <div id="IcecastGraph"></div> 

       <?php 

       $sth = $pdo->prepare("SELECT * FROM statistik"); 
       $sth->execute(); 
       $result = $sth->fetchAll(); 

       ?> 

       <script> 

       var graph = Morris.Line({ 
          element: 'IcecastGraph', 
          data: <?php echo json_encode($result); ?>, 
          xkey: 'listener_timestamp', 
          ykeys: ['listener_count'], 
          labels: ['Hörer'] 
          }); 

       $(document).ready(function(){ 

        $("#ReLoadData").click(function() { 

        $.ajax({ 
        url: "pages/management/data_statistik_content.php", 
        type: "POST", 
        dataType: "json", 
        success: function (data) { 

         var data = JSON.stringify(data); 

         graph.setData(data); 

        }, 

        }); 

        }); 

       }); 

       </script> 

      </div> 
      </div> 

     </div> 
     </div> 

    </div>

data_statistik_content.php

<?php 

    session_start(); 

    include("../../inc/config.inc.php"); 
    include("../../inc/functions.inc.php"); 

    $user = check_user(); 

    $sth = $pdo->prepare("SELECT * FROM statistik"); 
    $sth->execute(); 
    $result = $sth->fetchAll(); 

    header('Content-Type: application/json'); 

    echo json_encode($result); 

    ?>

它顯示圖表。數據的更新不起作用。爲什麼？

我希望有人知道我的錯誤嗎？

非常感謝您

問候比約恩

來源

2016-09-30 Björn E.

重繪使用redraw()

graph.setData(data); 
graph.redraw();

來源

2016-09-30 04:06:40 madalinivascu

我有我的腳本簡化了一下測試的字符。但不幸的是，我不知道，我目前必須設置充值。這個腳本一開始就加載一次。

  <!-- jQuery 2.2.3 --> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> 

      <button id="ReLoadData">Daten erneut laden</button> 
      <div id="IcecastGraph"></div> 

      <script> 

      $("#IcecastGraph").html(""); 

      $.ajax({ 
      url: "TEST_01.php", 
      type: "POST", 
      dataType: "json", 
      success: function (data) { 

       ShowGrpah(data); 

      }, 

      }); 

      function ShowGrpah(data) { 

      new Morris.Line({ 
       element: 'IcecastGraph', 
       data: data, 
       xkey: '2', 
       ykeys: ['1'], 
       labels: ['Hörer'] 
       }); 

      } 

      </script>

來源

2016-09-30 06:24:00

用AJAX刷新Morris圖表

回答

相關問題