Search code examples
javascriptchartsfiltergoogle-visualizationgraphing

How can I use data group and exhibit the results in a Column Chart? Is it possible?

I have this:

    <!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>

Actually displays a blank page.

I need to group this data because later i'll need to use multiple charts and tables with the same data source to be controlled by the only string filter in page, that will filter all the charts by the column "Branch".

Is it possible? Dont know what I'm doing wrong

Solution

  • first, the container id,
    when using getElementById, do not include # it should be... 

    document.getElementById('t2')

    next, the chart class should capitalized --> ColumnChart

    see following working snippet... 

    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>