统计页面 - 逐个加载每个统计信息<div>

Question

I want to show some apache statistics within my webpage (cumulated accesses per hour). Therefore I use jQuery with chart.js.

Now I want to fill every chart via ajax (with a loading icon).

First I create alle the div's via php while:

    <?php
        $SQL = $mysqli->query("SELECT * FROM server ORDER BY vname ASC");

        $count = 0;

        while ($row = $SQL->fetch_assoc()){
             $count++;
    ?>
        <div class="col-lg-6">
             <!-- Lines Chart -->
                  <div class="block">
                       <div class="block-header bg-primary">
                           <ul class="block-options">
                               <li>
                                  <button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh" style="color:white;"></i></button>
                                </li>
                           </ul>
                           <h3 class="block-title"><?php echo $row['name'];?> <small style="color: white;"><?php echo $row['vname'];?></small></h3>
                            </div>
                       <div class="block-content block-content-full text-center">
                       <!-- Lines Chart Container -->
                       <div style="height: 330px;"><canvas class="js-chartjs-lines-<?php echo $row['HSID'];?>"></canvas></div>
                        </div>
                   </div>
          </div>
<?php
    }
?>

Now I want to fill every div with the chart.js properties like this:

<script>
$(document).ready(function(){


    var $chartLinesCon  = jQuery('.js-chartjs-lines-2')[0].getContext('2d');

    var $globalOptions = {
        scaleFontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
        scaleFontColor: '#999',
        scaleFontStyle: '600',
        tooltipTitleFontFamily: "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
        tooltipCornerRadius: 3,
        maintainAspectRatio: false,
        responsive: true
    };

    // Chart Data
    var $chartLinesBarsRadarData = {
        labels: [<?php for ($i = 0; $i <= 24; $i++){ echo $i.','; }?>],
        datasets: [
            {
                label: 'This Week',
                fillColor: 'rgba(171, 227, 125, .3)',
                strokeColor: 'rgba(171, 227, 125, 1)',
                pointColor: 'rgba(171, 227, 125, 1)',
                pointStrokeColor: '#fff',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(171, 227, 125, 1)',
                data: [15, 16, 20, 25, 0, 0, 23, 25, 32]
            }
        ]
    };

    $chartLines = new Chart($chartLinesCon).Line($chartLinesBarsRadarData, $globalOptions);


});

How to do this the best way?

A javascript 'for loop' (+ hidden input element in the div for giving the serverID to the ajax script)?

Thanks in advance.

Answer 1

You need to

1. Move / copy the block you have in your $(document).ready above into your AJAX callback.

2. Replace the (currently hardcoded) array with your AJAX result (reformatting if necessary into a flat array)

3. Attach an onclick event handler for your refresh button that

   1. Calls a .destroy() on the corresponding chart instance

   2. Replaces the canvas element with your loading icon

   3. Does the AJAX call (that has the callback from Step 1 above)

4. In Your AJAX callback handler, you replace the loading icon with the canvas before doing the remaining steps (from Step 1 above) to (re)initialize the chart