Google диаграммы получают данные из строки - PullRequest
Новая
       11

Google диаграммы получают данные из строки

2 голосов
/ 06 ноября 2019

У меня есть таблица различных часов (часы обучения, часы работы и исследования), сделанные персоналом. Мне нужно построить гистограмму и круговую диаграмму персонала, но ось X и легенды - это просто повторение часов

Пример данных из sql после оператора sql 

  $query ="SELECT teachinghours ,servicehours ,researchhours 
   FROM staff_hour sh , staff s
   WHERE s.staffid = sh.staffid
   AND `staffperiodyear`= 'FY2018'
   AND s.staffid in (SELECT s.staffid from staff s where s.username = '$staffid1')";
 $res=mysqli_query($connect,$query);

|     teachinghours   |     servicehours | researchhours   |
|---------------------|------------------|-----------------|
|          1379       |         99       |     247         |
|---------------------|------------------|-----------------|

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']}).then(function() {
google.charts.load('current', {'packages':['bar']}).then(function() {
         var barsButton = document.getElementById('b1');
         var pieButton = document.getElementById('b2');
         barsButton.onclick = function() {
           drawSarahChart('ColumnChart');
         }
         pieButton.onclick = function() {
           drawSarahChart('PieChart');
         }
         drawSarahChart('ColumnChart');
       });
       function drawSarahChart(chartType) {
         var chart = new google.visualization.ChartWrapper({
         containerId: 'Sarah_chart_div'});
         var data = google.visualization.arrayToDataTable([
               ['teachinghours','Hour'],
               <?php 
                    while($row=mysqli_fetch_array($res))
                    {
                    echo "['".$row["servicehours"]."', ".$row[1]."],";
                    echo "['".$row["teachinghours"]."', ".$row[0]."],";
                    echo "['".$row["researchhours"]."', ".$row[2]."],";} 
                     ?>]);
         var options = {
           title: 'FY 2018',
           width: 400,
           height: 300,
           legend: { position: 'top', alignment: 'start' },
           tooltip: { isHtml: true }
         };
         chart.setOptions(options);
         chart.setChartType(chartType);
         chart.setDataTable(data);
         chart.draw();

Приведенный мною код показывает снимок экрана ниже enter image description here Ожидаемый результат состоит в том, что на оси X гистограммы должны отображаться часы обучения, часы исследований и часы обслуживания, а легенды круговой диаграммы и диаграммы должныотразить это также

1 Ответ

1 голос
/ 06 ноября 2019

если вы хотите, чтобы слова -> 'teachinghours', 'servicehours', 'researchhours'

находились на оси x, тогда данные должны быть структурированы следующим образом ... 

var data = google.visualization.arrayToDataTable([
  ['Type', 'Hours'],
  ['teachinghours', 1379],
  ['servicehours', 99],
  ['researchhours', 247]
]);

см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Type', 'Hours'],
    ['teachinghours', 1379],
    ['servicehours', 99],
    ['researchhours', 247]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  var options = {
    title: 'FY 2018',
    width: 400,
    height: 300,
    legend: { position: 'top', alignment: 'start' },
    tooltip: { isHtml: true }
  };

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

РЕДАКТИРОВАТЬ

Что касается загрузки таблицы данных, вы можете просто жестко закодировать имя столбца ... 

var data = google.visualization.arrayToDataTable([
  ['teachinghours','Hour'],
  <?php 
    while($row=mysqli_fetch_array($res))
    {
      echo "['servicehours', ".$row["servicehours"]."],";
      echo "['teachinghours', ".$row["teachinghours"]."],";
      echo "['researchhours', ".$row["researchhours"]."],";
    } 
  ?>
]);
...