Несколько точек данных за дату в Google Charts - PullRequest
Новая
       5

Несколько точек данных за дату в Google Charts

0 голосов
/ 01 февраля 2019

Я использую стандартный массив php, который извлекает данные из базы данных в обратном порядке для создания Google Chart.Примерно так ... 

$graph_data = array(array('Date', 'Amount'));
foreach (array_reverse($transactions) as $transaction) 
{ 
    array_push($graph_data, array(date("d M", strtotime(substr($transaction->createdOn, 0, 10))), $transaction->balanceAfter + 0));
    }

Работает нормально.

Этот процесс создает новую точку данных на диаграмме для каждой строки массива.У меня проблема, когда есть несколько событий ($ транзакция) на дату.Каждое событие отображается как новая точка графика, тогда как я хотел бы построить график последней точки данных для каждой даты.(постоянный временной ряд)

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

Существует ли простая настройка диаграммы Google для использования последней точки данных на дату?Я искал, но ничего не нашел по этому поводу.

Спасибо

1 Ответ

0 голосов
/ 06 февраля 2019

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

var dataLast = google.visualization.data.group(
  data,  // data table
  [0],   // group by column
  [{     // aggregated column
    column: 1,
    type: 'number',
    label: data.getColumnLabel(1),
    // aggregation function
    aggregation: function (values) {
      // return the last value for the group
      return values[values.length - 1];
    }
  }]
);

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

в этом случае мы просто возвращаем последнее значение в массиве.

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

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Amount'],
    ['09 Jan', 13],
    ['29 Jan', 11],
    ['29 Jan', 9],
    ['29 Jan', 4],
    ['29 Jan', -3],
    ['29 Jan', 0],
    ['29 Jan', -3],
    ['30 Jan', -5],
    ['30 Jan', 0],
    ['30 Jan', -1],
    ['30 Jan', -2],
    ['30 Jan', -3],
    ['30 Jan', -4],
    ['30 Jan', -5]
  ]);

  var dataLast = google.visualization.data.group(
    data,  // data table
    [0],   // group by column
    [{     // aggregated column
      column: 1,
      type: 'number',
      label: data.getColumnLabel(1),
      // aggregation function
      aggregation: function (values) {
        // return the last value for the group
        return values[values.length - 1];
      }
    }]
  );

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataLast);  // use grouped data to draw the chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...