Страница статистики — загрузите каждую статистику & lt; div & gt; по одному

Я хочу показать некоторую статистику apache на моей веб-странице (накопленный доступ в час).
Поэтому я использую jQuery с chart.js.

Теперь я хочу заполнить каждый график с помощью ajax (со значком загрузки).

Сначала я создаю все div’ы через php:

    <?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
}
?>

Теперь я хочу заполнить каждый div свойствами chart.js следующим образом:

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


});

Как это сделать лучше всего?

Javascript ‘for loop’ (+ скрытый элемент ввода в div для предоставления serverID для сценария ajax)?

Заранее спасибо.

0

Решение

Вам нужно

  1. Переместить / скопировать блок в вашем $(document).ready выше в ваш обратный вызов AJAX.

  2. Замените (в настоящее время жестко закодированный) массив результатом AJAX (при необходимости переформатируйте в плоский массив)

  3. Прикрепите обработчик события onclick для кнопки обновления, которая

    1. Вызывает .destroy() на соответствующий экземпляр диаграммы

    2. Заменяет элемент canvas на значок загрузки

    3. Вызывает ли AJAX (который имеет обратный вызов из шага 1 выше)

  4. В вашем обработчике обратного вызова AJAX вы заменяете значок загрузки на холст, прежде чем выполнять оставшиеся шаги (из шага 1 выше), чтобы (повторно) инициализировать диаграмму

1

Другие решения

Других решений пока нет …