How search multiple values(controls) to create multi-series chart

[Missy]

Hi,

I am writing to seek help, in how can I search multiple(2) [names] using some control, which I can then drop the select names into my line chart and display multi-series chart based on the two names search. 

I have tried filtering my data using 2 [stringFilter] controls, however they do not filter the chart's data based on operator 'OR' but instead using 'AND.  Please advice, if this task is feasible in google charts. I was am unable to find much documentation on this task, hence I am little unclear in regards to the implementation.

function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {

            if (dataValues.length < 1)

                return;

            var data = new google.visualization.DataTable();

            data.addColumn('string', columnNames.split(',')[0]);

            data.addColumn('number', columnNames.split(',')[1]);

            data.addColumn('string', columnNames.split(',')[2]);

            data.addColumn('datetime', columnNames.split(',')[3]);

           // var initState = { Values: [] };

            for (var i = 0; i < dataValues.length; i++) {

                var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

                data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);

            }

            // Define a StringFilter control for the 'Name' column

            var stringFilter = new google.visualization.ControlWrapper({

                'controlType': 'StringFilter',

                'containerId': 'control1',

                'options': {

                    'filterColumnLabel': columnNames.split(',')[0],

                    'ui': {

                        'allowTyping': false,

                        'allowMultiple': true,

                        'allowNone': false,

                        'selectedValuesLayout': 'belowStacked'

                    }

                },

                'state': ''

            });

            // Define a StringFilter control for the 'Name' column

            var stringFilter2 = new google.visualization.ControlWrapper({

                'controlType': 'StringFilter',

                'containerId': 'control2',

                'options': {

                    'filterColumnLabel': columnNames.split(',')[0],

                    'ui': {

                        'allowTyping': false,

                        'allowMultiple': true,

                        'allowNone': false,

                        'selectedValuesLayout': 'belowStacked'

                    }

                },

                 'state': ''

            });

            var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });

            var line = new google.visualization.ChartWrapper({

                'chartType': 'LineChart',

                'containerId': 'PieChartContainer',

                'options': {

                    'width': 950,

                    'height': 450,

                    'legend': 'right',

                    'hAxis': {

                        'format': "dd-MM-yyyy",

                        'hAxis.maxValue': 'viewWindow.max',

                        'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),

                        'viewWindow': { 'max': new Date(2014, 05, 30) },

                    },

                    'title': chartTitle,

                    'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },

                    'tooltip': { isHtml: true }

                },

                'view': {

                    'columns': [{

                        type: 'string',

                        label: data.getColumnLabel(3),

                        calc: function (dt, row) {

                            var date = new Date(parseInt(dt.getValue(row, 3)));

                            return dateFormatter.formatValue(date);

                        }

                    }, 1, {

                        type: 'string',

                        role: 'tooltip',

                        calc: function (dt, row) {

                            return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);

                        }

                    }]

                }

            });

            //google.visualization.events.addListener(stringFilter, 'statechange', setChartView);

            new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([stringFilter, stringFilter2], [line]).draw(data);

        }

Many thanks for your help. 

[Andrew Gallant]

The API does not support "or" type filtering, so you have to implement your own.  Remove the Dashboard object, and use this instead:

function getUniqueIndices (a) {
    var ret = [];
    for (var i = 0; i < a.length; i++) {
        if (ret.indexOf(a[i]) == -1) {
            ret.push(a[i]);
        }
    }
    return ret;
}
function update () {
    var v1 = stringFilter.getState().value;
    var v2 = stringFilter2.getState().value;
    var rows = [];
    if (v1 != '') {
        rows = rows.concat(data.getFilteredRows([{column: /* column index to filter on */, value: v1}]));
    }
    if (v2 != '') {
        rows = rows.concat(data.getFilteredRows([{column: /* column index to filter on */, value: v2}]));
    }
    var view = line.getView() || {};
    view.rows = (v1 == '' && v2 == '') ? null : rows;
    line.setView(view);
    line.draw();
}

google.visualization.events.addListener(stringFilter, 'statechange', update);
google.visualization.events.addListener(stringFilter2, 'statechange', update);

stringFilter.draw();
stringFilter2.draw();
line.draw();

To make this work, you would need to set the dataTable parameter of line to data.

[Missy]

Thank you for your response and apology for the delay response. 

I am little stuck on the code below, as its currently throwing a -- > Error: Invalid column index 0. Should be an integer in the range [0-3].

Would i need to implement a separate method for for adding the names values multiple names values to the line chart, also? if so, how? please advice.

Many thanks. 

            // Define a StringFilter control for the 'Name' column

            var stringFilter = new google.visualization.ControlWrapper({

                'controlType': 'StringFilter',

                'containerId': 'control1',

                'dataTable': data,

                'options': {

                    'filterColumnLabel': columnNames.split(',')[0],

                    'ui': {

                        'allowTyping': false,

                        'allowMultiple': true,

                        'allowNone': false,

                        'selectedValuesLayout': 'belowStacked'

                    }

                },

            });

            // Define a StringFilter control for the 'Name' column

            var stringFilter2 = new google.visualization.ControlWrapper({

                'controlType': 'StringFilter',

                'containerId': 'control2',

                'dataTable': data,

                'options': {

                    'filterColumnLabel': columnNames.split(',')[0],

                    'ui': {

                        'allowTyping': false,

                        'allowMultiple': true,

                        'allowNone': false,

                        'selectedValuesLayout': 'belowStacked'

                    }

                },

            });

            var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });

            var line = new google.visualization.ChartWrapper({

                'chartType': 'LineChart',

                'containerId': 'PieChartContainer',

                'dataTable': data,

                'options': {

                    'width': 960,

                    'height': 450,

                    'legend': 'right',

                    'title': chartTitle,

                    'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },

                    'pieSliceText': 'label',

                    'tooltip': { 'text': 'percentage' }

                },

                'view': { 'columns': [0, 1] }

            });

            var table = new google.visualization.ChartWrapper({

                'chartType': 'Table',

                'containerId': 'TableContainer',

                'dataTable': data,

                'options': {

                    'width': '900px'

                  

                }

            });

            function getUniqueIndices (a) {

                var ret = [];

                for (var i = 0; i < a.length; i++) {

                    if (ret.indexOf(a[i]) == -1) {

                        ret.push(a[i]);

                    }

                }

                return ret;

            }

            function update () {

                var v1 = stringFilter.getState().value;

                var v2 = stringFilter2.getState().value;

                var rows = [];

                if (v1 != '') {

                    rows = rows.concat(data.getFilteredRows([{column: [0]/* column index to filter on */, value: v1}]));

                }

                if (v2 != '') {

                    rows = rows.concat(data.getFilteredRows([{column: [0]/* column index to filter on */, value: v2}]));

[Andrew Gallant]

The column should not be in an array in the filter:

if (v1 != '') {

    rows = rows.concat(data.getFilteredRows([{column: 0, value: v1}]));

}

if (v2 != '') {

    rows = rows.concat(data.getFilteredRows([{column: 0, value: v2}]));

[Missy]

Thank you for your reply and solution.  I am still little unclear, how do go about creating multi-series from the above [stringFilter]s?  Would i need to create a new statechange event for the controls and create a series parameter in the charts control?

Thank you for your time and help. 

[Andrew Gallant]

You create the multi-series chart the same way you would without the filters - the filters don't have anything to do with it.