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.
