обновить карту Морриса с AJAX

Question

В качестве первого я хотел бы извиниться за мой плохой английский. Хотя я понимаю английский язык, но могу выразить себя. В письменной форме, к сожалению, очень плохо. Поэтому я использую инструмент переводчика.

Теперь я перехожу к вопросу:

С удовольствием бы обновить свои графики, показанные с 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); 

    ?> 

Диаграмма показано. Обновление данных не работает. Зачем?

Я надеюсь, что кто-то здесь знает мою ошибку?

Большое спасибо

Приветствие Бьорн

Answer 1

перерисовки полукокса с помощью redraw()

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

Answer 2

У меня есть мой сценарий немного упрощен для тестирования. Но, к сожалению, я не знаю, к чему я это предъявляю, должен установить перезарядку. Этот скрипт загружается один раз в начале.

  <!-- 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>