Thank you for your reply. I am looking for faster approach that renders
the table quickly, when apply the control filters to drawVisualisation2()
datatable. Apology for the lack of knowledge, as I am currently learning
this as i implement.
Would it be easier and faster to use second table, as I have started to
added table and filter controls to the drawVisualisation2()? Would I need
to create seperate function outside drawVisualisation() and
drawVisualisation2(), which binds the two together?
function drawVisualization2(dataValues, chartTitle,
columnNames, categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0], 'name');
data.addColumn('number', columnNames.split(',')[1], 'price');
data.addColumn('string', columnNames.split(',')[2], 'type');
data.addColumn('datetime', columnNames.split(',')[3], 'date');
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]);
}
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer',
'options': {
'width': '900px',
}
});
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': columnNames.split(',')[3],
'filterColumnIndex': '3',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': 'Date',
}
}
});
// Define a StringFilter control for the 'Name' column
var stringFilter2 = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': columnNames.split(',')[0]
}
});
}
function drawVisualization(dataValues, chartTitle, columnNames,
categoryCaption) {
if (dataValues.length < 1)
return;
var data = new google.visualization.DataTable();
data.addColumn('string', columnNames.split(',')[0], 'name');
data.addColumn('number', columnNames.split(',')[1], 'price');
data.addColumn('string', columnNames.split(',')[2], 'type');
data.addColumn('datetime', columnNames.split(',')[3], 'date');
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]);
}
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer',
'options': {
'width': '900px',
'page': 'enable',
'pageSize': 10
}
});
var categoryPicker = new
google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': columnNames.split(',')[3],
'filterColumnIndex': '3',
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': categoryCaption,
'label': 'Date',
}
}
});
// Define a StringFilter control for the 'Name' column
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': columnNames.split(',')[0]
}
});
var dummy = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'DummyTable',
options: {
sort: 'disable'
},
view: {
rows: []
}
});
var dashboard = new
google.visualization.Dashboard(document.getElementById('PieChartExample'));
google.visualization.events.addOneTimeListener(dashboard,
'ready', function () {
google.visualization.events.addListener(stringFilter2,
'statechange', drawVisualisation2);
google.visualization.events.addListener(categoryPicker2,
'statechange', drawVisualisation2);
// get the data for the table
var dt = dummy.getDataTable();
table.setDataTable(dt);
// draw the table
table.draw();
});
dashboard.bind([categoryPicker, stringFilter], [dummy]);
dashboard.draw(data);
}
Please advice, if possible. I really appreciate your help and time.
many thanks.
--
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.
