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.
On Tuesday, June 3, 2014 12:17:10 PM UTC-4, Missy wrote:
>
> 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.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
