One suggestion is to switch to exhibit, and add some facets that would
let you filter your events down to a more manageable number!

Tony wrote:
> 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to