drawVisualization2 looks like it just creates a DataTable. Is your
intention to use this DataTable as the data source for the same Table, or
do you want to draw a second Table?
On Wednesday, May 28, 2014 10:46:26 AM UTC-4, Missy wrote:
>
> 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 [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.
