PHP - Google Charts - PullRequest
Новая
       12

PHP - Google Charts

0 голосов
/ 05 сентября 2018

Я пытаюсь использовать Google Charts и у меня возникли проблемы с созданием массива для API. https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts

Мой источник данных имеет 3 столбца, в которых указаны количество, дата и имя пользователя. (вы можете увидеть в приложении).

Как преобразовать его форму массива для использования с Google Charts API (линейные диаграммы)?

Я думаю, что мне нужно преобразовать каждое другое значение из столбца "responseavel" в новый столбец и установить для этого столбца значение столбца "qt_pedido" В этом примере конечный массив должен выглядеть примерно так:

Дата | user1 | user2
-------------------------------
03.09.2008 | 58 | 19
05.09.2009 | 23 | 5

Результат с сервера sql

1 Ответ

0 голосов
/ 05 сентября 2018

было бы проще использовать методы таблицы данных Google для преобразования строк в столбцы,
см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  // create data table
  var data = google.visualization.arrayToDataTable([
    ['Date', 'responsavel', 'qt_pedido'],
    ['20/10/2018', 'user1', 10],
    ['20/10/2018', 'user2', 20],
    ['20/10/2018', 'user3', 30],
    ['20/11/2018', 'user1', 40],
    ['20/11/2018', 'user2', 50],
    ['20/11/2018', 'user3', 60],
    ['20/12/2018', 'user1', 70],
    ['20/12/2018', 'user2', 80],
    ['20/12/2018', 'user3', 90],
  ]);

  // create data view
  var view = new google.visualization.DataView(data);

  // column arrays
  var aggColumns = [];
  var viewColumns = [0];

  // build view & agg columns for each responsibility
  data.getDistinctValues(1).forEach(function (responsibility, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === responsibility) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: responsibility,
      type: 'number'
    });

    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: responsibility,
      type: 'number'
    });
  });

  // set view columns
  view.setColumns(viewColumns);

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(aggData);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...