Google Charts-Code for Category Filter

问题

Was trying out the Google Chart function codes. I'm currently trying to create a line chart with a category filter. Here's my code:

function drawVisualization() {
// Prepare the data.
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]
]);

// Define a category picker for the 'category' column.
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
  'filterColumnLabel': 'item',
  'ui': {
    'allowTyping': false,
    'allowMultiple': true,
    'selectedValuesLayout': 'belowStacked'
  }
},
// Define an initial state, i.e. a set of metrics to be initially selected.
'state': {'selectedValues': ['Cats', 'Blanket 1', 'Blanket 2']}
});

// Define a line chart.
var LineChart = new google.visualization.ChartWrapper({
'chartType': "Line",
'containerId': 'chart1',
'options': {
  'width': 500,
  'height': 400,
  'vAxis': {maxValue: 10}
}
});

// Create the dashboard.
var dashboard = new           google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the category picker to affect the line chart
bind(categoryPicker, LineChart).
// Draw the dashboard
draw(data);
}

Can anyone tell me why my graph is not displaying inside the Google Playground. I know it must be a simple mistake, but I'm drawing a blank.

Thanks for any help! ​

回答1:

The CategoryFilter only filters values in a DataTable column, and it looks like in your example that you want to filter by column name (indicated by the values you entered into the state.selectedValues property). In order to make the CategoryFilter behave as a column selector, you need to give it a list of columns to work on, which you can create automatically like this:

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));
}

You then pass this DataTable and state to the CategoryFilter constructor:

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
});

You need to register a "statechange" event handler for the filter to get a list of the selected columns and use that to build a list of column indices for the chart's view.columns parameter:

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();
});

See the whole thing working here: http://jsfiddle.net/asgallant/WaUu2/.

回答2:

Hope this will help you. Sample code:

        var categoryPicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'BrandName',
        options: {
            filterColumnIndex: 3, // filter by brand name
            ui: {
                caption: 'Choose a brand',
                sortValues: true,
                allowNone: true,
                allowMultiple: false,
                allowTyping: true
            }
        },  

Here is the working sample for category filter jqfaq.com

来源：https://stackoverflow.com/questions/17967387/google-charts-code-for-category-filter