Dear Andrew,
Thank you so much for your explanation and help. I manage to get started
on creating a events listener function, but I am little unclear of how do I
setup 'table' to read drawVisualisation2() function, when the user trigger
the controls. Will I also need to create the same controls and table
wrapper in the drawVisualisation2() function as well?
My aim is to -- render the table from drawVisualisation(), when the page
loads, but when the user trigger the controls, the control will filter
data, from the drawVisualisation2() function and render table using.
//100,000 records of data
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]);
}
}
//==============================================================================================================================\\\
// daily 100 records of data
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 monthformatter = new google.visualization.DateFormat({
pattern: "dd-MMM-yyyy" });
monthformatter.format(data, 3);
var categoryPicker = new
google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': columnNames.split(',')[3],
'filterColumnIndex': '3',
'useFormattedValue': true,
'ui': {
'labelStacking': 'horizontal',
'allowTyping': false,
'allowMultiple': false,
'caption': 'Select Date Range',
'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 table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'TableContainer',
'options': {
'width': '900px'
}
});
//dummy table holder
var dummy = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'DummyTable',
'options': {
'width': '300px',
'sort': 'disable'
},
'view': {
'rows': []
}
});
// Create a dashboard
var dashboard = new
google.visualization.Dashboard(document.getElementById('PieChartExample'));
google.visualization.events.addOneTimeListener(dummy,
'ready', function () {
google.visualization.events.addOneTimeListener(table,
'state', function () {
// get the data for the table
var dt = dummy.getDataTable();
//var dt = table.getDataTable();
table.setDataTable(dt);
table.draw();
});
});
// bind the control
dashboard.bind([categoryPicker, stringFilter], [dummy]);
// Draw the dashboard
dashboard.draw(data);
}
Any further explanation, in what other function guides may I require, to
complete this task.
Please note, I am calling data from sql query, if you would like to see the
server code, please let me know.
Any advise, would be very much appreciated. Thank you for your time and
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
