I have 62 events in a Google spreadsheet. Each event is 3 months long and the entire span 12 months. The events stack up too high vertically to fit in the upper band and certain items are hidden from view. I'm okay with that because I can manually resize the timeline or filter to get fewer events. However, on IE 6 increasing div.style.height="400px"; has no effect. Also, with the large amount of data (62 items) the bottom band becomes months and the upper band becomes days. If I reduce the number of events to less than 25 the bottom band is correctly years and the upper band is correctly months. Also, it works fine on FF with 62 events.
Any ideas? Here is the HTML code: <html> <head> <title>The NHIN 2009 Timeline</title> <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit- api.js" type="text/javascript"></script> <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/ time/time-extension.js"></script> <link rel="exhibit/data" type="application/jsonp" href="http://spreadsheets.google.com/feeds/list/ puia7Khv9YP_wj9hlNFRZKQ/od6/public/basic?alt=json-in-script" ex:converter="googleSpreadsheets" /> </head> <body> <script> var timelineConfig = { timelineConstructor: function (div, eventSource) { div.style.height="400px"; var theme = Timeline.ClassicTheme.create(); theme.event.label.width = 200; // px theme.event.bubble.width = 250; theme.event.bubble.height = 200; var bandInfos = [ Timeline.createBandInfo({ width: "85%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 200, eventSource: eventSource, theme: theme }), Timeline.createBandInfo({ width: "15%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 200, theme: theme, }) ]; bandInfos[0].highlight = true; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create(div, bandInfos, Timeline.HORIZONTAL); return tl; } } </script> <h1>CONNECT 2009 Product Plan</h1> <p>Update Timeline <a href="http://spreadsheets.google.com/feeds/list/ puia7Khv9YP_wj9hlNFRZKQ">here</a> <table width="100%" cellspacing="20"> <tr valign="top"> <td> <div ex:role="view" ex:viewClass="Timeline" ex:start=".start" ex:end=".end" ex:colorKey=".eventType" ex:colorCoder="eventTypeColors" ex:configuration="timelineConfig"> </div> </td> <td width="20%"> <div ex:role="facet" ex:facetClass="TextSearch" ex:facetLabel="Search"></div> <div ex:role="facet" ex:expression=".eventType" ex:facetLabel="Event Type" ex:scroll="true"></div> <div ex:role="facet" ex:expression=".priority" ex:facetLabel="Priority" ex:scroll="true"></div> <div ex:role="coder" ex:coderClass="Color" id="eventTypeColors"> <span ex:color="red">Limited Production</span> <span ex:color="green">Agency Support</span> <span ex:color="blue">Security Accredidation</span> <span ex:color="orange">Event</span> <span ex:color="#8B4513">Content</span> <span ex:color="#00FFFF">Int Activities</span> <span ex:color="grey">KeyMilestone</span> <span ex:color="#556B2F">KeyMilestoneSum</span> <span ex:color="brown">PreAward Lab Activities</span> <span ex:color="black">Prod Env</span> <span ex:color="blue">Architecture</span> <span ex:color="#87CEFA">SW Cfg-Imp</span> </div> </td> </tr> </table> <div ex:role="lens"> <table> <tr><td> <font color="red"><b ex:content=".label"></b></font></ td> </tr> <tr><td><b ex:content=".description"></b></td> </tr> <tr><td>Start Date:<b ex:content=".start"></b></td> </tr> <tr><td>End Date:<b ex:content=".end"></b></td> </tr> <tr><td>Duration:<b ex:content=".duration"></b></td> </tr> <tr><td>Priority:<b ex:content=".priority"></b></td> </tr> <tr><td>Resources:<b ex:content=".resourceNames"></b></td> </tr> </table> </div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SIMILE Widgets" 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/simile-widgets?hl=en -~----------~----~----~----~------~----~------~--~---
