Add section to annotation chart?

I'm using Google Charts' Annotation Chart to display data. Everything's working but it's not showing the volume section, as seen in this google finance chart that, I believe, uses the same chart.

Here's what I have so far, but I don't know how to include that section:

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Col1');
        data.addColumn('string', 'Col2');
        data.addColumn('string', 'Col3');
        data.addColumn('number', 'Col4');
        data.addColumn('string', 'Col5');
        data.addColumn('string', 'Col6');
        data.addRows([
          [new Date(2017, 2, 15), 85, 'More', 'Even More',
                                  91, undefined, undefined],
          [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                                  99, undefined, undefined],
          [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                                  96, 'Att', 'Good'],
          [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                                  80, 'HR', 'Absences'],
          [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                                  85, 'HR', 'Vacation'],
          [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                                  67, 'HR', 'PTO']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }

	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<div id='chart_div' style='width: 900px; height: 500px;'></div>

This is what the google finance chart looks like, but I can't seem to include the volume section marked in red:

the annotation chart does not include an option for the middle chart / volume section

this could be added manually by drawing another, separate chart

however, the second chart cannot be placed in between the annotation chart and it's range filter

as such, you would need to turn off the annotation's range filter
and draw your own ChartRangeFilter

typically, custom filters are bound to charts using a dashboard

however, while building the example for this answer,
i noticed the annotation chart doesn't re-draw properly

after the filter has been applied, and then removed,
the annotation chart does not return to the original state
to correct, need to create the annotation chart every time it is drawn

see following working snippet,

a column chart is used for the volume section

the range filter is bound manually using the 'statechange' event

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

function drawDashboard() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Col1');
  data.addColumn('string', 'Col2');
  data.addColumn('string', 'Col3');
  data.addColumn('number', 'Col4');
  data.addColumn('string', 'Col5');
  data.addColumn('string', 'Col6');
  data.addRows([
    [new Date(2017, 2, 15), 85, 'More', 'Even More',
                            91, undefined, undefined],
    [new Date(2017, 2, 16), 93, 'Sales', 'First encounter',
                            99, undefined, undefined],
    [new Date(2017, 2, 17), 75, 'Sales', 'Reached milestone',
                            96, 'Att', 'Good'],
    [new Date(2017, 2, 18), 60, 'Sales', 'Low',
                            80, 'HR', 'Absences'],
    [new Date(2017, 2, 19), 95, 'Sales', 'Goals',
                            85, 'HR', 'Vacation'],
    [new Date(2017, 2, 20), 40, 'Sales', 'Training',
                            67, 'HR', 'PTO']
  ]);

  var rangeFilter = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    dataTable: data,
    options: {
      filterColumnLabel: 'Date',
      ui: {
        chartOptions: {
          height: 60,
          width: '100%',
          chartArea: {
            width: '100%'
          },
          chartType: 'AreaChart'
        }
      }
    },
    view: {
      columns: [0, 1, 4]
    }
  });

  google.visualization.events.addListener(rangeFilter, 'ready', drawCharts);
  google.visualization.events.addListener(rangeFilter, 'statechange', drawCharts);

  rangeFilter.draw();

  function drawCharts() {
    var filterState = rangeFilter.getState();
    var filterRows = data.getFilteredRows([{
      column: 0,
      minValue: filterState.range.start,
      maxValue: filterState.range.end
    }]);
    var viewAnn = new google.visualization.DataView(data);
    viewAnn.setRows(filterRows);

    var chartAnn = new google.visualization.AnnotationChart(document.getElementById('chart_ann'));
    var optionsAnn = {
      displayAnnotations: false,
      displayRangeSelector: false
    };
    chartAnn.draw(viewAnn, optionsAnn);

    var viewCol = new google.visualization.DataView(data);
    viewCol.setColumns([0, 1, 4]);
    viewCol.setRows(filterRows);

    var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_col'));
    var optionsCol = {
      hAxis: {
        textStyle: {
          color: 'transparent'
        }
      },
      height: 72,
      legend: 'none',
      theme: 'maximized',
      vAxis: {
        textStyle: {
          color: 'transparent'
        }
      }
    };
    chartCol.draw(viewCol, optionsCol);
  }
}

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

Recommended topics

Hot tags