Google Charts, Line Chart with Date Range Filter

Question

I am using a line chart, which allows selective visibility of the Y series data on the chart by clicking the legend. Something like the Google Finance charts which allows you to add different stocks onto the chart.

I want to add a date range filter like at the bottom of the Annotation Chart in this example: https://developers.google.com/chart/interactive/docs/gallery/annotationchart

but it just displays a blank screen.

Here's my code for the Line Chart:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script>
<script type='text/javascript'>
  google.load("visualization", "1", {packages:["corechart"]});
  google.load('visualization', '1', { packages : ['controls'] } );

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Date', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2014',  1230,      40]
    ]);

var options = {
    width: 900,
    height: 600,
    title: 'Company Performance',
    displayAnnotations: true,
    series: series
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); //line chart
chart.draw(data, options);

var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
        series[i - 1] = {};
    }
}

google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
        // if row is null, we clicked on the legend
        if (sel[0].row == null) {
            var col = sel[0].column;
            if (columns[col] == col) {
                // hide the data series
                columns[col] = {
                    label: data.getColumnLabel(col),
                    type: data.getColumnType(col),
                    calc: function () {
                        return null;
                    }
                };

                // grey out the legend entry
                series[col - 1].color = '#CCCCCC';
            }
            else {
                // show the data series
                columns[col] = col;
                series[col - 1].color = null;
            }
            var view = new google.visualization.DataView(data);
            view.setColumns(columns);
            chart.draw(view, options);
        }
    }
});
  }
</script>
</head>

<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>

Dan Dan · Accepted Answer · 2014-11-02T11:02:03

You should use a dashboard with a chartwrapper for the LineChart and a daterangefilter as a ControlWrapper instead of initializing the chart as you do (You aren't even calling the daterangefilter).

Google Charts, Line Chart with Date Range Filter

1 Answers