JavaScript: BarChart заполняет данные с помощью цикла - PullRequest
Новая
       10

JavaScript: BarChart заполняет данные с помощью цикла

0 голосов
/ 27 августа 2018

Здравствуйте, у меня возникла проблема с заполнением javascript barchart из моей базы данных. Я использую morris.js barchart код моего HTML ниже: 

<div class="chart" id="bar-chart" style="height: 300px;"></div>

JavaScript: 

  <script>


$(function () {
  "use strict";    
  //BAR CHART
  var month = <?php echo json_encode($result_array, JSON_HEX_TAG); ?>;
  var salary = <?php echo json_encode($result_array2, JSON_HEX_TAG); ?>;
  var bar = new Morris.Bar({
      element: 'bar-chart',
      resize: true,
      data: [
        {y: month, a: salary},

       ]
      ,
      barColors: ['#00a65a', '#f56954'],
      xkey: 'y',
      ykeys: ['a'],
      labels: ['Date', 'Total'],
      hideHover: 'auto'

  });


});

Код PHP: 

  <?php 
   $q  = mysqli_query($con,"SELECT * FROM salary_logs 
   ORDER BY id ASC LIMIT 5");
    $result_array = array();
    while($row = mysqli_fetch_assoc($q))
   {
     $result_array[] = $row['month'];
     $result_array2[] = $row['salary'];
     echo json_encode($result_array, JSON_HEX_TAG);
   }
  ?>

Данные в моей базе данных:

месяц: январь, февраль

зарплата: 1000,2000

Есть ли способ создать цикл, который будет автоматически добавлять эти данные? Пример данных следующего месяца будет:

месяц: январь, февраль, март

зарплата: 1000, 2000, 3000

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

Простой способ сделать это (возможно, не идеальное решение, но прекрасно работает и легко обрабатывается) -

Объявите переменную php для данных диаграммы (над циклом while), например - $chart_data = '';

Далее внутри цикла while do - 

$chart_data = ''; // variable for chart data

while($row = mysqli_fetch_assoc($q))
{
    $chart_data .= "{ y: '" . $row['month'] . "', a: " . $row['salary'] . " },";
}

Теперь echo $chart_data внутри функции JavaScript. как- 

data: [ <?php echo $chart_data; ?> ],

Полная функция JavaScript 

$(function() {
    "use strict";
    //BAR CHART
    var month = <?php echo json_encode($result_array, JSON_HEX_TAG); ?>;
    var salary = <?php echo json_encode($result_array2, JSON_HEX_TAG); ?>;
    var bar = new Morris.Bar({
        element: 'bar-chart',
        resize: true,

        data: [ <?php echo $chart_data; ?> ],

        barColors: ['#00a65a', '#f56954'],
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Date', 'Total'],
        hideHover: 'auto'

    });    

});
0 голосов
/ 27 августа 2018

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

Так что без части php это будет примерно так:

var month = ["январь", "февраль"]; вар зарплата = [1000, 2000];

...