refresh Morris Chart with AJAX

Question

As the first I would like to apologise for my bad English. Though I understand the English language, but can express myself In writing, unfortunately, very badly. So I use a translator's tool.

Now I come to my question:

With pleasure I would update my charts shown with Morris.js with a button. I already have several hours experimented. Till present here I show you once my code:

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);

    ?>

The Chart it is shown. The renew of the data doesn't work. Why?

I hope somebody here know my mistake?

Thank you very much

Greeting Björn

Answer 1

None of these actually change the graphs values.

Answer 2

I have my script simplified a bit for testing. But unfortunately I do not know, to which I present this must set recharge. This script everything is loaded once at the beginning.

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

Answer 3

Redraw the char using redraw()

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