title: Create an average line for Google Charts
body: <p>I am learning to use Google Charts and I'm trying to get an average of all values and show a line on the chart to represent the average.</p>
  
  <p>Below is an of how my chart looks but I need an average line for all the values.</p>
  
  <p>thanks in advance for your attention.</p>
  
  <pre><code>    &lt;html&gt;
  &lt;body style="font-family: Arial;border: 0 none;"&gt;
  &lt;script src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
          &lt;div id="dashboard" style="width:1300px;overflow:scroll;"&gt;
              &lt;div id="chart" style="position: relative; width: 1300px; height: 300px;"&gt;&lt;/div&gt;
              &lt;div id="control" style="position: relative; width: 1300px; height: 30px;"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
  
      &lt;script type="text/javascript"&gt;
  
  
  
      google.charts.load('current', {
        callback: function () {
          var query = new google.visualization.Query('xxxxxxx');
          query.setQuery('select A,B,C,D');
          query.send(function (response) {
            if (response.isError()) {
              console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
              return;
            }
  
            var control = new google.visualization.ControlWrapper({
              controlType: 'ChartRangeFilter',
              containerId: 'control',
              options: {
                filterColumnIndex: 0,
                ui: {
                  chartType: 'ScatterChart',
                  chartOptions: {
                   pointSize: 2,
                    chartArea: {width: '90%'},
                    hAxis: {format: 'dd/MM/yyyy'}
                  },
                  chartView: {
                    columns: [ 0, 1, 2]
                  }
                }
              }
            });
  
            var chart = new google.visualization.ChartWrapper({
              chartType: 'SteppedAreaChart',
              containerId: 'chart',
              options: {
                filterColumnIndex: 0,
                pointSize: 2,
                chartArea: {height: '80%', 'width': '90%'},
                hAxis: {format: 'E dd/MMM','textStyle':{'fontSize': 11, 'color': 'black','bold':true},'minTextSpacing': 0, 'slantedText': false},
                vAxis: {format: '0'},          
                legend: {position: 'top'},
                bar: {groupWidth: '100%'},
                isStacked: false
              },
              view: {
                columns: [ 0, 1,2]
  
              }
            });
  
  
  
          var proxyTable = new google.visualization.ChartWrapper({
              chartType: 'Table',
              containerId: 'TableProxy',
              options: {
                  page: 'enable',
                  pageSize: 1
              },
              view: {
                  columns: [0]
              }
          });
  
  
  
          google.visualization.events.addListener(proxyTable, 'ready', function () {
              var dt = proxyTable.getDataTable();
              var groupedData = google.visualization.data.group(dt, [0], [{
                  column: 2,
                  type: 'number',
                  aggregation: google.visualization.data.avg
              }]);
              chart.setDataTable(groupedData);
              chart.draw();
          });
  
  
          google.visualization.events.addListener(proxyTable, 'ready', function () {
              var group = google.visualization.data.group(proxyTable.getDataTable(), [{
                  column: 0,
                  type: 'date',
                  modifier: function () {
                      return 1;
                  }
              }], [{
                  column: 2,
                  type: 'number',
                  aggregation: google.visualization.data.avg
              }]);
  
            });
  
  
  
            dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
            dashboard.bind(control, chart);
            dashboard.draw(response.getDataTable());
          });
        },
        packages: ['controls', 'corechart', 'table'], 'language': 'pt-br'
      });
  
  
  
      &lt;/script&gt;
  
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>It's possible to group by date (code bellow)...but the main difficult thing to do is how to use the controlType: 'ChartRangeFilter'. Anyone has any idea??</p>
  
  <pre><code>        function floorDate(datetime) {
        var newDate = new Date(datetime);
        newDate.setHours(0);
        newDate.setMinutes(0);
        newDate.setSeconds(0);
        return newDate;
      }
  
      var columnChart1 = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'chart3'
      });
      //      columnChart1.draw();
  
      // Create the dashboard.
      new google.visualization.Dashboard(document.getElementById('dashboard')).
        // Configure &amp; bind the controls 
  
      bind(divPicker, [table, columnChart]).
        // Draw the dashboard
      draw(data);
  
      google.visualization.events.addListener(divPicker, 'ready',
  
        function(event) {
          // group the data of the filtered table and set the result in the pie chart.
          columnChart1.setDataTable(google.visualization.data.group(
            // get the filtered results
            table.getDataTable(), [{
              'column': 0,
              'modifier': floorDate,
              'type': 'date'
            }], [{
              'column': 2,
              'aggregation': google.visualization.data.sum,
              'type': 'number'
            }]
          ));
          // redraw the pie chart to reflect changes
          columnChart1.draw();
        });
  
      google.visualization.events.addListener(divPicker, 'statechange',
  
        function(event) {
          // group the data of the filtered table and set the result in the pie chart.
          columnChart1.setDataTable(google.visualization.data.group(table.getDataTable(), [0], [{
            'column': 2,
            'aggregation': google.visualization.data.avg,
            'type': 'number'
          }]));
          // redraw the pie chart to reflect changes
          columnChart1.draw();
        });
  
    }
  
    google.setOnLoadCallback(drawVisualization);
  
  &lt;/script&gt;
  </code></pre>