Here's the full HTML file and CSV file. Place them in the same folder. Works on one computer but not others ??
chart.hideDataColumns(dataCol) and chart.showDataColumns(dataCol) don't seem to work the way I expect ... is there no access to the "chart" object? Jason "test.html" <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Timeline Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script src ="http://maps.google.com/maps? file=api&v=2&sensor=false&key=ABQIAAAAYJCwMIlgY9myjyxnDUveNhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxR3bARcy05r05z4AIiRJYJMlsDq8Q" type="text/javascript"></script> <script type='text/javascript'>google.load('visualization', '1', {'packages':['table', 'annotatedtimeline']});</script> <script type='text/javascript'> var csvFileName = 'data.txt'; // input csv file name var iCols; // stores the number of columns per site var iSites; // number of sites var data; // google data table var chart; // googel chart object var dataArray = []; // data read from csv file var check_value = new Array(); // array of checkbox values var strHTML = ""; // holds HTML code to be outputted //var nowDate = new date(); var minDate = new Date (7000,0,0,0); var maxDate = new Date (0,0,0,0); var year; var month; var day; var hour; $(document).ready(function(){ $.get(csvFileName, function(dataFile){ dataArray=dataFile.split(/\n/); // define end of line delimieer .. i think? for (x in dataArray) dataArray[x]=dataArray[x].split (","); // copy data from csv file into array for (var i = 1; dataArray[0][i].substr(0,4) == dataArray[0][i +1].substr(0,4); i++) iCols = i+1; // return the number of columns per site .. assumes first 4 characters of each heading is the same for a given site. iSites = (dataArray[0].length - 1) / iCols; // Calculate the number of sites ... (array length / # columns) insertHTMLTable(); // fill in generic html table tags based on first four characters of column heading is csv file. fillTableHeadings(); // fill in column and row heading (taken from csv file) data = new google.visualization.DataTable(); // initialize data table data.addColumn('datetime', 'Date/Time'); // create first column - date for (var i = 1; i <= dataArray[0].length - 1; i++){ // create data columns data.addColumn('number', dataArray[0][i]); data.addColumn('string', 'title'+i); data.addColumn('string', 'text'+i); }; data.addRows(dataArray.length); // create blank rows for (var i = 1; i < dataArray.length - 1; i++){ // fill in dates and data for (var j = 1; j <= dataArray[0].length - 1; j++){ data.setValue(i, ((j-1)*3)+1, Number(dataArray[i][j])); }; year = String(dataArray[i][0]).substr(0,4); month = String(dataArray[i][0]).substr(5,2)-1; // month from 0-11 day = String(dataArray[i][0]).substr(8,2); hour = String(dataArray[i][0]).substr(11,2); nowDate = new Date(year,month,day,hour); if(minDate > nowDate) minDate = nowDate; if(maxDate < nowDate) maxDate = nowDate; data.setValue(i, 0, new Date(year,month,day,hour)); }; drawVisualizations(); }); }); function fillTableHeadings(){ for (var i = 1; i <= iCols; i++){ // Fill in column headings from csv file document.getElementById("col_"+i+"_desc").innerHTML = dataArray[0] [i].substr(4,dataArray[0][i].length-4); }; for (var i = 1; i <= (dataArray[0].length-1)/iCols; i++) { // Fill in row headings from csv file document.getElementById("row_"+i+"_desc").innerHTML = dataArray[0] [(i-1)*iCols+1].substr(0,4) +':'; }; }; function drawVisualizations() { //table = new google.visualization.Table(document.getElementById ('table_div')); //table.draw(data, {showRowNumber: true}); chart = new google.visualization.AnnotatedTimeLine (document.getElementById('chart_div')); chart.draw(data, {displayAnnotations: true, annotationsWidth: 10, legendPosition: 'newRow', // Can be sameRow allValuesSuffix: ' value', // add suffix colors: ['#660000', '#B31212', '#E62E2E', '#664D00', '#B38A12', '#E6B82E', '#006600', '#12B312', '#2EE62E', '#001A66', '#123AB3', '#2E5CE6', '#4D0066', '#8A12B3', '#B82EE6'], fill: 10, // Fill the area below the lines with % opacity thickness: 1, zoomStartTime: new Date(2008, 4, 1), //minDate, zoomEndTime: new Date(2009, 4, 1) //maxDate }) readCheckboxes(); } function insertHTMLTable(){ strHTML += "<form name=\"form1\" id= \"form1\"><table>"; // Create form and table strHTML += "<tr><td><b>Site</b></td>" // Hard code topo left title for (var j = 1; j <= iCols; j++) strHTML += "<td align=\"center\" ><b><div id='col_"+j+"_desc'></div></b></td>"; // Top row of titles strHTML += "</tr>"; // End top row for (var j = 1; j <= iSites-1; j++){ // Fill in table rows for all sites except the last one strHTML += "<tr>"; for (var i = 1; i <= iCols; i++) check_value[i] = padLeft(j,3) + "-" + padLeft(i,2); strHTML += "<td><div id='row_" + j + "_desc'></div></td>"; for(i in check_value) strHTML += "<td align='center'><input type='checkbox' name='" + check_value[i] + "' onclick='readCheckbox (this, " + ((j-1)*iCols + (i-1))+");'></td>"; strHTML += "<td><a href=\"#\" onclick=\"checkSite('"+padLeft(j, 3)+"'); return false\"> All </a> / <a href=\"#\" onclick=\"uncheckSite ('"+padLeft(j,3)+"'); return false\"> None </a></td>"; strHTML += "</tr>"; }; strHTML += "<tr><td></td>"; // Begin row to turn on/off all sites for (var i = 1; i <= iCols; i++){ // Fill in rows to turn on/off all sites at once strHTML += "<td align=\"center\"><a href=\"#\" onclick=\"checkSeries ('"+padLeft(i,2)+"'); return false\">All</a> / <a href=\"#\" onclick= \"uncheckSeries('"+padLeft(i,2)+"'); return false\">None</a></td>"; }; strHTML += "</tr>"; // End row to turn on/ off all sites for (var j = iSites; j <= iSites; j++){ // Fill in table rows for all sites except the last one strHTML += "<tr>"; for (var i = 1; i <= iCols; i++) check_value[i] = padLeft(j,3) + "-" + "00"; // Hard coded "00" so total checkbox names are not the same as for sites .. prevents check all including totals strHTML += "<td><div id='row_" + j + "_desc'></div></td>"; for(i in check_value) strHTML += "<td align='center'><input type='checkbox' name='" + check_value[i] + "' onclick='readCheckbox (this, " + ((j-1)*iCols + (i-1))+");'></td>"; strHTML += "<td><a href=\"#\" onclick=\"checkSite('"+padLeft(j, 3)+"'); return false\"> All </a> / <a href=\"#\" onclick=\"uncheckSite ('"+padLeft(j,3)+"'); return false\"> None </a></td>"; strHTML += "</tr>"; }; strHTML += "</table></form>"; // End table and form document.getElementById("content").innerHTML = strHTML; // Output HTML to div tag }; function padLeft(s,len,c){ c = c || '0'; s = s.toString(); while(s.length < len) s = c + s; return s; }; function readCheckboxes() { for (var i = 0; i < document.form1.length; i++){ if (document.form1.elements[i].checked){ chart.showDataColumns(i); } else { chart.hideDataColumns(i); chart.hideDataColumns(1); // try hard coding to tun off one series .. still doesn't work } }; //alert(document.form1.elements[i-1].checked); //alert(i); }; function readCheckbox(chkbox, dataCol) { //alert("ChkBox: " + chkbox + "datacol: " + dataCol); if (chkbox.checked){ chart.showDataColumns(dataCol); } else chart.hideDataColumns(dataCol); //alert(chkbox + " and " + dataCol); }; function checkSite(site){ for (var i = 0; i < document.form1.length; i++){ if (document.form1.elements[i].name.substr(0,3) == site && document.form1.elements[i].checked == false){ document.form1.elements[i].checked = true; chart.showDataColumns(i); }; }; }; function uncheckSite(site){ for (var i = 0; i < document.form1.length; i++){ if (document.form1.elements[i].name.substr(0,3) == site && document.form1.elements[i].checked == true){ document.form1.elements[i].checked = false; chart.hideDataColumns(i); }; }; }; function checkSeries(series){ for (var i = 0; i < document.form1.length; i++){ if (document.form1.elements[i].name.substr(4,2) == series && document.form1.elements[i].checked == false){ document.form1.elements[i].checked = true; chart.showDataColumns(i); }; }; }; function uncheckSeries(series){ for (var i = 0; i < document.form1.length; i++){ if (document.form1.elements[i].name.substr(4,2) == series && document.form1.elements[i].checked == true){ document.form1.elements[i].checked = false; chart.hideDataColumns(i); }; }; }; </script> <style type="text/css"> table td { font-family: arial, Helvetica,sans-serif; border: 0 none; font-size: 12px; padding: 0px 10px 0px 10px; } </style> </head> <body bgcolor="#2F7889"> <center><table width="840px" bgcolor="#FFFFFF"><tr><td> <br> <font style="font-size:20px;">Title</font> <p> <br>The data sets can take some time to load. Once the blank chart appears, use the checkboxes to select the data sets to plot. <br> </p> <br> <div id="content"></div> <br> <div id='chart_div' style='width: 800px; height: 500px;'></div> <br> </td></tr></table></center> <br> </body> </html> "data.txt" date,NYC Data1,NYC Data2,NYC Data3,VAN Data1,VAN Data2,VAN Data3,CGY Data1,CGY Data2,CGY Data3,HKG Data1,HKG Data2,HKG Data3,All Data1,All Data2,All Data3 2005-04-01,7,11.8,0,7.6,32.1,5.8,9.7,28.8,3.8,9.5,26.3,3.9,37.3,105.4,13.5 2005-05-01,5.3,11.6,0,8.9,31.8,5.4,9.6,30.3,2.8,7.8,26.3,2.6,34.9,106.4,10.9 2005-06-01,3.5,9.9,0,12.2,32.4,6,8.3,30.4,3.6,8.8,27,3.1,35.8,105.7,12.7 2005-07-01,2.8,9.2,0,9.3,32.4,6.1,9.8,30.6,2.7,8.2,26.2,2.4,33.3,104.5,11.2 2005-08-01,1.9,8.9,0,8.5,32.6,4.3,9.8,29.6,3,8.3,26.3,1.8,32.3,103.8,9.1 2005-09-01,3.8,10.1,0,9.3,33.2,4.7,8.9,29.1,3.3,6.9,25.3,2.2,33,104.5,10.2 2005-10-01,3.5,9.4,0,10.8,33.9,6,11.7,29.6,3.9,9.3,26.5,3.3,39.6,106.9,13.2 2005-11-01,5.5,12.2,0.6,12.7,33.5,8.9,13,30.2,3.9,11,27.9,4.5,46.3,111.4,17.9 2005-12-01,5.7,12.5,0.8,8.2,33.6,5.3,11.5,29.9,4.3,9.6,28.7,3.5,39.7,112.4,13.8 2006-01-01,7.1,13.8,1,13.3,35.8,7.3,14.3,29.2,6.1,11.6,28.9,6.1,50.6,115.6,20.5 2006-02-01,8.1,13.9,1.1,12.2,36.6,5.6,13.5,29.9,4.8,9.9,28.5,5.2,49.1,117,16.7 2006-03-01,7.5,13.2,1.6,14.4,36.1,7.2,14.1,30.4,5.3,10.3,28.4,4.9,50.4,115.6,19 2006-04-01,5.2,12.8,1.1,12.5,36.3,5.7,11.2,30.6,3.4,9.2,29.4,4,42.6,116.6,14.1 2006-05-01,6,13.3,0.9,12.6,37,6.2,15.4,31.9,4,10.2,29.6,4.7,48.9,119.8,15.8 2006-06-01,4.9,12.7,0.8,14.5,37.5,5.6,14,30.8,4,13.4,32,5.1,51.4,120.9,15.6 2006-07-01,2.6,11,0.7,16.6,37.5,7,13.5,31.7,3.2,12.8,32.5,4.7,49.7,120.6,15.6 2006-08-01,2.1,10,0.8,12.5,35.5,8.3,10.1,31.2,3.8,9.2,30.6,4,37.8,115.4,16.9 2006-09-01,3.9,12.1,0.9,12.3,34.2,8.6,11.4,30.7,4.1,10.3,28.9,6.3,42.3,113.6,19.8 2006-10-01,4,12.5,0.9,11.2,32.8,7.7,8.5,29.8,3.1,10.1,29.9,5,37.6,112.7,16.7 2006-11-01,6.6,13.9,1.1,13.8,33.4,8.8,14.6,30,5.6,12.5,28.1,9.1,51.6,112.9,24.6 2006-12-01,10.9,16.5,1.2,17.2,33.3,7.8,15.6,30.2,4.5,14,30.9,5.5,63.1,118.8,19 2007-01-01,7.7,15.4,1.5,17.3,32.5,11.4,14.7,28.8,6.4,12.9,30.3,8.2,58.1,115.1,27.5 2007-02-01,5.9,15.3,1.1,14.7,32.1,9.8,13.4,29.6,4.7,10.9,29.4,7.6,50.4,114.7,23.3 2007-03-01,5.2,15.8,0.9,13.8,32.3,10.8,15.4,29.3,5.9,10.2,29.9,6.7,49.4,115.8,24.4 2007-04-01,2.7,13.6,0.7,11.9,32.8,9.1,12.4,28.9,3.9,8.5,30.3,5.1,39.6,113.7,18.8 2007-05-01,4.4,15.6,0.9,8.5,33.1,6,10.9,29.3,3.1,7.8,29.1,4.3,36.1,115.6,14.3 2007-06-01,4.3,14.9,0.7,10.6,35.7,6,9.7,29.5,3,8.1,30.8,3,37.4,119.6,12.7 2007-07-01,2.8,13.3,0.7,13.3,37.9,5.7,12.5,31.6,3.1,10.5,32.1,3.9,44.3,123.5,13.3 2007-08-01,1.9,11.7,0.6,11.4,35.6,6.3,10.4,30.1,3.1,8,30.6,4.3,35,115.5,14.3 2007-09-01,3.9,14.7,0.7,10.8,33.3,8.4,11.9,30.5,3.6,9.3,30.9,6.6,40.8,117.7,19.4 2007-10-01,4.4,14.9,0.8,12.7,34.5,8.9,12,31,3.6,11.5,32.1,7.6,44.7,120.7,20.8 2007-11-01,6.6,16.9,1,10.8,33.9,8.5,10.7,30.9,3.2,9.6,32.9,5,41.8,122.7,17.6 2007-12-01,7.1,16.7,0.9,13.3,33.7,9.5,9.2,29.9,3,10.9,33.1,5,45.2,121.2,18.3 2008-01-01,7.2,17,1.2,15.9,33.4,13.6,13.2,31.8,4.6,12.2,33.4,6.7,53,123.9,26.2 2008-02-01,8.3,16.6,1,15.6,32.9,14.3,12.2,32.2,4.7,16.2,35.5,8.1,58.1,125.9,28.1 2008-03-01,9.1,17.3,1.3,13.3,32.6,11.8,12,30.5,5.7,10.5,33.1,6.8,49.9,122.1,25.6 2008-04-01,7.3,16.3,1.3,13.1,30.8,14.7,12.2,31.1,5.4,9.3,31.1,7,53.2,126.5,28.5 2008-05-01,6.2,16.2,0.8,12.5,33.5,11.4,11.2,32.8,4.7,10.7,32.6,6.2,52.5,133.5,23.1 2008-06-01,4.7,14.7,0.9,15.6,33.7,12.2,13,33,5.5,10.4,32.5,6.5,54.7,132,25.2 2008-07-01,2,11.8,0.8,15.6,35.4,9.8,12.4,33.8,3.7,11.9,34.8,4.3,52.7,133.9,18.6 2008-08-01,2.3,11.8,0.7,13.9,35,10.4,11.6,32.9,3.8,10.9,35,4,50,132,18.8 2008-09-01,5.3,15.3,0.8,12.9,32,13.5,13,31.8,5.1,13.6,34.6,7.4,55.7,132.4,26.8 2008-10-01,3.4,14,0.8,14.7,33.4,13.2,13.4,30.8,8.4,13.1,29.5,11.4,55.5,127.1,33.8 2008-11-01,5.7,16.5,0.8,16.2,33.9,14.3,17.6,29.7,11.8,12.8,30.5,12.5,64.8,130.7,39.5 2008-12-01,4.4,14.1,0.8,11.8,30.6,15.9,11.8,29.4,9.3,11,30.9,10.2,48.5,121.9,36.2 2009-01-01,8.3,16.9,1.3,17.6,30.9,20.9,15.3,29.6,12,13.5,34,12.1,68,130.9,46.3 2009-02-01,13.1,19.4,1.9,19.4,31.7,18.5,16.6,29.6,13.2,15.2,32.1,16.5,80.3,134.1,50.1 2009-03-01,9.2,17.6,1.2,18.4,32.5,17.1,16.4,30,13.9,15.7,31.9,18.8,73.8,132.5,50.9 2009-04-01,7.9,17.6,0.8,12.8,33.7,12.6,14.2,29.6,12.5,10.4,30.5,13.1,59.3,132.7,39 2009-05-01,9,17.7,1,12.5,32.8,14.1,11.6,30.9,7.7,9.9,31.6,9.8,57.6,136.1,32.6 2009-06-01,7.7,17.3,0.8,12.3,34.7,9.5,9.7,32.2,8.9,9.6,31.1,10,52.8,139.8,29.2 2009-07-01,2.6,12.6,0.8,12.7,36.3,8.9,8.9,32.8,6.8,10.7,32.5,10.4,49,137.8,26.9 2009-08-01,2.9,12.7,0.6,11.5,36.3,6.6,7.7,33,5.9,9.6,30.9,11.4,43.2,132.4,24.6 2009-09-01,6.4,13.3,1.2,12.8,31.7,12,9.6,31.1,6.6,11,27.5,17.7,50.2,122.3,37.5 2009-10-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 2009-11-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 2009-12-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 2010-01-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 2010-02-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 2010-03-01,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Visualization API" group. 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 -~----------~----~----~----~------~----~------~--~---
