Category Filter Control for lineChart in Google Chart Tools

Question

Purpose: Show line charts with the option to choose which lines you want to view. In other words, lets say there is a line chart and I have 2 lines so I want 3 options, show both, only the 1st one or only the 2nd one.

Something like the functionality shown here but for line charts: http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control

Code:

    function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}

​

The code can be also found here: http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

How can I achieve this functionality?

Answer 1

Option A: Make Buttons

You can make a button (either using the tag, or , etc.) that runs javascript to filter your data. This means that you can create three buttons (or 3 radio selection boxes, or two check boxes and a button, or whatever) that will run javascript when checked.

That javascript should contain a function that will filter your data (likely using a DataView Class with SetColumns) to contain the proper columns for your selection. There are a trillion ways to go about doing this, and since you are using some generic data and your real application is probably different, I'll let you figure out what works best for your data/users.

Option B: Use Google Visualization Controls

You can also do the same using the Google Visualization Category Filter Control with a little bit of adjustment. There's a great example by asgallant here, with an explanation here. This requires an intermediate table, but works well if you like how the category filter looks/works. It's all up to you!

Since the site wants me to put the code inline, here you are:

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005',  45, 60, 89, 100],
        ['2006',  155, 50, 79, 24],
        ['2007',  35, 31, 140, 53],
        ['2008',  105, 23, 43, 82],
        ['2009',  120, 56, 21, 67],
        ['2010',  65, 19, 34, 134],
        ['2011',  80, 23, 130, 40],
        ['2012',  70, 140, 83, 90]
    ]);

    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        initState.selectedValues.push(data.getColumnLabel(i));
    }

    var chart = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });

    chart.draw();

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    google.visualization.events.addListener(columnFilter, 'statechange', function () {
        var state = columnFilter.getState();
        var row;
        var columnIndices = [0];
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            columnIndices.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        columnIndices.sort(function (a, b) {
            return (a - b);
        });
        chart.setView({columns: columnIndices});
        chart.draw();
    });

    columnFilter.draw();
}