Hello, I'm currently using this sample spreadsheet <https://docs.google.com/spreadsheets/d/1rZPcx18GCGHFz0lzSPZE9hYj8pCdHLyh--aI-__PoUA/edit?usp=sharing> to extract data. It has four columns: Date, School,Students ALL,Student ID, Staff Name
However, when I try to display the data in a table chart, I get a ScriptError. If I remove the date column, I can display the data quite easily and filter with the "Staff Name" and "School". Now, I need to filter by the Date; however even while using the DateRangeFilter, I get the same error. The Date column in my spreadsheet is of the "Date" Format. Because of this format, I am unsure why I am getting a ScriptError, however, it seems like there's something wrong here. This is the JavaScript code I used for the sample spreadsheet. The code that is related to the DateRangeFilter is marked in orange. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script> // Load the Visualization API and desired package(s). google.load('visualization', '1.0', {'packages':['controls']}); /** * Run initializations on dialog load. */ $(function() { // Set a callback to run when the Google Visualization API is loaded. // Note: could also be accomplished via google.load options. google.setOnLoadCallback(sendQuery); // Assign handler functions to dialog elements here, if needed. // Call the server here to retrieve any information needed to build // the dialog, if necessary. }); /** * Issue asynchronous request for spreadsheet data. * From gist.github.com/mogsdad/60dcc4116ed74fceb5f9 */ function sendQuery() { google.script.run .withSuccessHandler(drawDashboard) .withFailureHandler(function(msg) { // Respond to failure conditions here. $('#main-heading').text(msg); $('#main-heading').addClass("error"); $('#error-message').show(); }) .getSpreadsheetData(); } /** * Callback function to generate visualization using data in response parameter. * From gist.github.com/mogsdad/60dcc4116ed74fceb5f9 * * @param {Object[][]} Two-Dim array of visualization data */ function drawDashboard(response) { $('#main-heading').addClass("hidden"); if (response == null) { alert('Error: Invalid source data.') return; } else { // Transmogrify spreadsheet contents (array) to a DataTable object var data = google.visualization.arrayToDataTable(response,false); //new dashboard var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div')); //table chart to display data var table = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'table-div' }); //Range Filter //fails if binding is carried out on var donutSlider = new google.visualization.ControlWrapper({ 'controlType': 'DateRangeFilter', 'containerId': 'slider-date-div', 'options': { 'filterColumnLabel': 'Date' } }); //Category filter for the school var school = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'selector-school-div', 'options': { 'filterColumnLabel': 'School'}}); //Category filter for the staff var staff = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'selector-staff-div', 'options': { 'filterColumnLabel': 'Staff Name' } }); // Set up dependencies between controls and charts dashboard.bind([school, staff,donutSlider], table);//<-Fails // Draw all visualization components of the dashboard dashboard.draw(data); } } </script> -- 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 https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/ad5eebbb-1e64-4e5a-a153-55a13f590bf8%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
