javascript - tipos - ¿Cómo formateo los datos de Google Chart para mostrar un recuento de elementos, pero puedo filtrarlos por año?

options google charts

Question

Espero que esto sea apropiado para stackexchange. Si no, mis disculpas.

De todos modos, tengo un conjunto de datos que es esencialmente una lista de proyectos, la persona vinculada a cada proyecto y un año en el que se inició el proyecto. Lo que me gustaría hacer es generar un gráfico de barras que muestre un recuento total de proyectos por individuo, pero de alguna manera mantener el año en el que se inició un proyecto individual para poder crear un filtro deslizante.

Eso suena confuso, escribiéndolo. Los datos se ven así:

[
    [''Project'',''PM'',''Year''],
    [''PRJ0001'',''John Doe'',''2012''],
    [''PRJ0002'',''John Doe'',''2012''],
    [''PRJ0003'',''Jackie Johnson'',''2013''],
    Etc, etc,
]

No tengo problemas para crear un recuento por nombre de administrador de proyecto, pero "pierdo" el año como una métrica en la que puedo filtrar. ¿Alguien tiene alguna idea?

Answer 1

dibuje cada control por separado

usa data.group para obtener recuentos por persona y dibujar el gráfico

dibujar el control deslizante con los datos originales (necesidad de cambiar el tipo de columna para NumberRangeFilter )

volver a dibujar el gráfico en el deslizador ''statechange''
usar valores slider low / high para construir una vista usando getFilteredRows

ver el siguiente fragmento de trabajo ...

google.charts.load(''current'', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [''Project'',''PM'',''Year''],
      [''PRJ0001'',''John Doe'',2012],
      [''PRJ0002'',''John Doe'',2012],
      [''PRJ0003'',''John Doe'',2012],
      [''PRJ0004'',''John Doe'',2013],
      [''PRJ0005'',''Jackie Johnson'',2012],
      [''PRJ0006'',''Jackie Johnson'',2013],
      [''PRJ0007'',''Jackie Johnson'',2014]
    ]);

    var options = {
      height: 400,
      hAxis: {
        viewWindow: {
          min: 0,
          max: 5
        }
      }
    };

    drawChart(data);

    var slider = new google.visualization.ControlWrapper({
      controlType: ''NumberRangeFilter'',
      containerId: ''filter_div'',
      dataTable: data,
      options: {
        filterColumnIndex: 2,
        ui: {
          format: {pattern: ''0''}
        }
      }
    });

    google.visualization.events.addListener(slider, ''statechange'', function () {
      var range = slider.getState();
      var view = new google.visualization.DataView(data);
      view.setRows(data.getFilteredRows([{
        column: 2,
        minValue: range.lowValue,
        maxValue: range.highValue
      }]));
      drawChart(view);
    });

    slider.draw();

    function drawChart(dataTable) {
      var dataGroup = google.visualization.data.group(
        dataTable,
        [1],
        [{column: 1, aggregation: google.visualization.data.count, type: ''number'', label: ''Count''}]
      );

      var chart = new google.visualization.BarChart(document.getElementById(''chart_div''));
      chart.draw(dataGroup, options);
    }
  },
  packages: [''controls'', ''corechart'']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>