Как я могу использовать группу данных и отображать результаты в столбчатой диаграмме? Является ли это возможным?

Question

Как я могу использовать группу данных и отображать результаты в столбчатой диаграмме? Является ли это возможным?

1

У меня есть это:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8"/>

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

        <script type="text/javascript">


            google.charts.load('current', {'packages':['corechart', 'controls']});

            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {

                var data = new google.visualization.DataTable();
                  data.addColumn('number', 'ID');
                  data.addColumn('string', 'Customer_Name');
                  data.addColumn('number', 'Credits');
                  data.addColumn('string', 'Date');
                  data.addColumn('string', 'Seller');
                  data.addColumn('string', 'Branch');

                  data.addRows([
                    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
                    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch1'],
                    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
                ]);

                var groupedData = google.visualization.data.group(data, [5], [{
                    column: 0,
                    type: 'number',
                    label: data.getColumnLabel(0),
                    aggregation: google.visualization.data.count
                }]);

        var t2 = new google.visualization.columnChart(document.getElementById('#t2'));
                t2.draw(groupedData);

            }
    </script>

  </head>

    <div id="t2"></div>

</html>

Фактически отображается пустая страница.

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

Является ли это возможным? Не знаю, что я делаю неправильно

Raul Amorim 12 июль 2018, в 00:33

Источник

Теги:

javascript

filter

charts

google-visualization

graphing

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2018-07-12T15-51-00.000Z

во-первых, идентификатор контейнера,
при использовании getElementById, не включайте # он должен быть...

document.getElementById('t2')

Далее, класс диаграммы должен заглавными → ColumnChart

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

google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch1'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedData = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var t2 = new google.visualization.ColumnChart(document.getElementById('t2'));
  t2.draw(groupedData);
}

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

Это сработало :) Спасибо большое @WhiteHat !!