I am currently using a combination of Google Spreadsheets and Forms to track customer service calls. The Form populates Table 1 with Customer Information, Requests, and Status Updates. Table 2 contains a list of all addresses for the entire city which I compare them to.
I have Joined both tables, and applied a String Filter Control to sort through the range of addresses to view any service history, or lack of. My problem is with the excessive amount of time it takes to load the large dataset of addresses (25k rows that rarely changes). I have seen some threads which suggest caching the data table locally, but I have been unsuccessful with locating a complete working sample. I have attached my sample html file. Naturally I can't share customer information so I used alternate data for the example. This sample will load quickly, but I mainly want to know if somebody could show me the method to include local caching or a better alternative which I could apply to the actual file. Any assistance would be much appreciated. BTW, I am running the current version of Chrome [17.0.963.79 m] on Windows XP SP3 -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/0VUzboqEYhMJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
<!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi";></script> <script type="text/javascript"> google.load('visualization', '1.1', {packages: ['Controls']}); google.load('visualization', '1', {packages: ['corechart','table']}); </script> <script type="text/javascript"> S1 = '0AvoHZ4mjZ9-ddGRZLXFScUlDQnJ6NmdpeDBYcEw5bUE&sheet=Sheet1'; S2 = '0AvoHZ4mjZ9-ddGRZLXFScUlDQnJ6NmdpeDBYcEw5bUE&sheet=Sheet2'; URL = 'https://docs.google.com/spreadsheet/ccc?key='; function Join() { var S1query = new google.visualization.Query(URL+S1); S1query.setQuery('SELECT * label A"#",B"Abbreviation",C"State",D"Capitol",E"Date"'); S1query.send(handleS1Response);} function handleS1Response(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return;} S1data = response.getDataTable(); var S2query = new google.visualization.Query(URL+S2); S2query.setQuery('SELECT * label A"#",B"Abbreviation",C"Year",D"Known Facts"'); S2query.send(handleS2Response);} function handleS2Response(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return;} S2data = response.getDataTable(); // Create a [full] join of S1data and S2data, using columns 0 and 1 as the keys, // and including column 2,3,4 from S1data and 2,3 from S2data. var joined_dt = google.visualization.data.join(S1data, S2data, 'full', [[0,0],[1,1]], [2,3,4], [2,3]); var joined_table = new google.visualization.Table(document.getElementById('joined_table')); // Create a String Filter var strFilter1a = new google.visualization.ControlWrapper({ 'controlType': 'StringFilter', 'containerId': 'Input1a', 'options': {'filterColumnIndex': '0', 'matchType': 'any'}}); var strFilter2a = new google.visualization.ControlWrapper({ 'controlType': 'StringFilter', 'containerId': 'Input2a', 'options': {'filterColumnIndex': '1', 'matchType': 'any'}}); var table1 = new google.visualization.ChartWrapper({ 'chartType': 'Table', 'containerId': 'joined_table', }); var dashboard1 = new google.visualization.Dashboard(document.getElementById('dashboard')). bind(strFilter1a, table1). bind(strFilter2a, table1). draw(joined_dt); joined_table.draw(joined_dt, null); } google.setOnLoadCallback(Join); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="dashboard"> <table> <tr style='vertical-align: top'> <td style='width: 50px; font-size: 0.7em;'> <div id="Input1a"></div> <div id="Input2a"></div> </td> <td style='width: 100%'> <div id="joined_table"></div> </td> </tr> </table> </div> </body> </html>
