I am having trouble understanding exactly what it is you are trying to
accomplish with that code. In the context of your original question, you
need to have a function that updates the data in your DataTable and redraws
the Table. Creating new objects will be slower.
Here's a framework that should give you a basic idea of what is needed:
// inside drawVisualization
function updateData () {
var stringFilterValue = stringFilter.getState().value; // string value
var categoryPickerValues = categoryPicker.getState().selectedValues; //
array of string values
// use AJAX to fetch new data from server using state of controls to
filter the data server-side
// update DataTable with new data
// redraw dashboard
}
google.visualization.events.addListener(stringFilter2, 'statechange',
updateData);
google.visualization.events.addListener(categoryPicker2, 'statechange',
updateData);
On Wednesday, May 28, 2014 4:30:02 PM UTC-4, Missy wrote:
>
> 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.
