用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图表

回答

相关问题