Можно ли упорядочить данные в Google Charts по хронологическому названию месяца? - PullRequest
1 голос
/ 01 мая 2019

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

Я попытался передать дату вместо строкового названия месяца, но затем я больше не могу группировать по месяцам - вместо этого она группируется по дате.

Я также попытался передать обаномер месяца и название месяца {v: monthNum, f: monthName}, но кажется, что это где-то теряется, когда я выполняю агрегацию.

Этот код в основном основан на многих примерах, которые я нашел здесь на SO в ответахWhiteHat (https://stackoverflow.com/users/5090771/whitehat).

var heading = ["Month", "Category"];
arrOutside[0] = heading;

for (var i = 0; i < dataJson.length; i++) {
     var arr = [dataJson[i].ReportMonth, dataJson[i].Category];                        
     arrOutside[i + 1] = arr;
}

var data = new google.visualization.arrayToDataTable(arrOutside);

var groupData = google.visualization.data.group(
    data,
    [1, 0],
    [{
        column: 1,
        aggregation: google.visualization.data.count,
        type: 'number'
     }]
);

var view = new google.visualization.DataView(groupData);

var aggColumns = [];

var viewColumns = [0];

groupData.getDistinctValues(1).forEach(function (category, index) {
     viewColumns.push({
          calc: function (dt, row) {
              if (dt.getValue(row, 1) === category) {
                   return dt.getValue(row, 2);
              }
              return null;
          },
          label: category,
          type: 'number'
     });

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

view.setColumns(viewColumns);

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

var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(aggData);

Этот код приводит к такой таблице: Категория | Апр | Фев | Ян | Мар

, но я хотел бы показать: Категория | Янв |Фев | Март | Апр.

Возможно ли это?

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

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

function (dataJson) {

    var arrOutside = new Array();

    var heading = ["Month", "Category"];
    arrOutside[0] = heading;

    for (var i = 0; i < dataJson.length; i++) {                        

          var arr = [new Date(dataJson[i].ReportDate), dataJson[i].Category];                        
          arrOutside[i + 1] = arr;
    }                                        

    var data = new google.visualization.arrayToDataTable(arrOutside);

    var formatDate = new google.visualization.DateFormat({ pattern: 'MMM' });

    var dataGroup = google.visualization.data.group(
        data,
        [{
            column: 0,
            label: 'Month',
            modifier: function (val) {
            return formatDate.formatValue(val);
            },
            type: 'string'
        }],

        [{
            aggregation: google.visualization.data.count,
            column: 1,
            label: "Category Count",
            type: 'number'
        }]
    );

    var view = new google.visualization.DataView(dataGroup);
    view.setRows([2, 1, 3, 0]);

    var chart = new google.visualization.ChartWrapper({
         chartType: 'ColumnChart',
         containerId: 'chart_div',
         dataTable: view
    });
    chart.draw();

    var table = new google.visualization.ChartWrapper({
         chartType: 'Table',
         containerId: 'table_div',
         dataTable: view
    });
    table.draw()

}

1 Ответ

0 голосов
/ 03 мая 2019

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

var dataGroup = google.visualization.data.group(
  data,
  [1, {  // <-- add index for category
    column: 0,
    label: 'Month',
    modifier: function (val) {
      return formatDate.formatValue(val);
    },
    type: 'string'
  }],
  [{
    aggregation: google.visualization.data.count,
    column: 1,
    label: "Category Count",
    type: 'number'
  }]
);

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

// create columns for each month
var view = new google.visualization.DataView(dataGroup);
var aggColumns = [];
var viewColumns = [0];
dataGroup.getDistinctValues(1).forEach(function (category, index) {
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 1) === category) {
        return dt.getValue(row, 2);
      }
      return null;
    },
    label: category,
    type: 'number'
  });

  aggColumns.push({
    aggregation: google.visualization.data.sum,
    column: index + 1,
    label: category,
    type: 'number'
  });
});
view.setColumns(viewColumns);
var aggData = google.visualization.data.group(
  view,
  [0],
  aggColumns
);

тогда мы можем установить хронологический порядок.

// set columns in chron order
var view = new google.visualization.DataView(aggData);
var viewColumns = [0];
var monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
monthOrder.forEach(function (month, index) {
  for (var i = 1; i < aggData.getNumberOfColumns(); i++) {
    if (aggData.getColumnLabel(i) === month) {
      viewColumns.push(i);
    }
  }
});
view.setColumns(viewColumns);

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

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  // process json data
  var dataJson = [
    {ReportDate: '04/01/2019', Category: 'A'},
    {ReportDate: '04/02/2019', Category: 'A'},
    {ReportDate: '04/03/2019', Category: 'A'},
    {ReportDate: '05/04/2019', Category: 'A'},
    {ReportDate: '05/05/2019', Category: 'A'},
    {ReportDate: '05/06/2019', Category: 'A'},
    {ReportDate: '06/07/2019', Category: 'A'},
    {ReportDate: '06/08/2019', Category: 'A'},
    {ReportDate: '06/09/2019', Category: 'A'},
    {ReportDate: '07/10/2019', Category: 'A'},
    {ReportDate: '04/01/2019', Category: 'B'},
    {ReportDate: '04/02/2019', Category: 'B'},
    {ReportDate: '04/03/2019', Category: 'B'},
    {ReportDate: '05/04/2019', Category: 'B'},
    {ReportDate: '05/05/2019', Category: 'B'},
    {ReportDate: '05/06/2019', Category: 'B'},
    {ReportDate: '06/07/2019', Category: 'B'},
    {ReportDate: '06/08/2019', Category: 'B'},
    {ReportDate: '06/09/2019', Category: 'B'},
    {ReportDate: '07/10/2019', Category: 'B'}
  ];
  var arrOutside = new Array();
  var heading = ['Month', 'Category'];
  arrOutside[0] = heading;
  for (var i = 0; i < dataJson.length; i++) {
    var arr = [new Date(dataJson[i].ReportDate), dataJson[i].Category];
    arrOutside[i + 1] = arr;
  }
  var data = new google.visualization.arrayToDataTable(arrOutside);
  var formatDate = new google.visualization.DateFormat({pattern: 'MMM'});
  var dataGroup = google.visualization.data.group(
    data,
    [1, {
      column: 0,
      label: 'Month',
      modifier: function (val) {
        return formatDate.formatValue(val);
      },
      type: 'string'
    }],
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: "Category Count",
      type: 'number'
    }]
  );

  // create columns for each month
  var view = new google.visualization.DataView(dataGroup);
  var aggColumns = [];
  var viewColumns = [0];
  dataGroup.getDistinctValues(1).forEach(function (category, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === category) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: category,
      type: 'number'
    });

    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: category,
      type: 'number'
    });
  });
  view.setColumns(viewColumns);
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // set columns in chron order
  var view = new google.visualization.DataView(aggData);
  var viewColumns = [0];
  var monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  monthOrder.forEach(function (month, index) {
    for (var i = 1; i < aggData.getNumberOfColumns(); i++) {
      if (aggData.getColumnLabel(i) === month) {
        viewColumns.push(i);
      }
    }
  });
  view.setColumns(viewColumns);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: view
  });
  chart.draw();

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    dataTable: view
  });
  table.draw()
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>
...