Following this is my html document. I cannot figure out what is the
problem, as for some reason the timeline is not loading. It had loaded
in the past. This is still a work in progress, and is at a somewhat
early stage. Can someone spot my mistake so I can get back to work?
Thanks


<html>
<head>
<title>Grades</title>
<!--link to external javascript data file-->
<link href="gradetimeline.js" type="application/json" rel="exhibit/
data" />
<!--links to scripts stored on a website-->
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-
api.js"
        type="text/javascript"></script>
<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/
time/time-extension.js"
        type="text/javascript"></script>
<!--<link rel="stylesheet" type="text/css" href="style.css" />-->

<script>
function clearFilter(filterID)
{
        var fct = exhibit.getComponent(filterID);
        if (fct.hasRestrictions()) {
        fct.clearAllRestrictions();
        }
}
function clearAllFilters()
{
        clearFilter('grade');
        clearFilter('percentile');
        clearFilter('gradelevel');
        clearFilter('subject');
        clearFilter('search')
}
</script>

<!--timeline constructor-->
<script>
function createTimeline() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jun 28 2006 00:00:00 GMT",
         width:          "70%",
         intervalUnit:   Timeline.DateTime.MONTH,
         intervalPixels: 100
     }),
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jun 28 2006 00:00:00 GMT",
         width:          "30%",
         intervalUnit:   Timeline.DateTime.YEAR,
         intervalPixels: 200
     })
   ];
   bandInfos[1].syncWith = 0;
   bandInfos[1].highlight = true;

   tl = Timeline.create(document.getElementById("timeline"),
bandInfos);
 }

</script>
</head>
<body>
<h1>grades</h1>
<!--set up area for the timeline and viewing pane to be displayed-->
<table border=12 width=100%>
        <tr>
<!--initialize the viewing area-->
        <td ex:role="viewPanel">

                <table ex:role="lens">

                <tr>
                <td>
                <table>
                <!--"Name of grade":"# of grade"% eg. CMT:100%-->
                <tr><td><div style="margin-left:auto; margin-right:auto;"
ex:content=".date"></td></tr>
                <tr><td><div ex:content="concat(.label, ': ', .grade, 
'%')"></div></
td></tr>
                <tr><td><div ex:content="concat('Percentile: ', .percentile, 
'%')"></
div></td></tr>
                <!--Subject: "Subject" eg. Subject: Math-->
                <tr><td><div ex:content="concat('Subject: ', 
.subject)"></div></td></
tr>
                <!--Grade level: "Grade level (0-12)" eg. Grade level from: 7-->
                <tr><td><div ex:content="concat('Grade level: ', 
.grade_level)"></
div></td></tr>
                </table>
                </td>
                <td valign="top">
                <!--If there are comments, they will be displayed as: Comments &
Notes: "Comments Here"-->
                <div ex:if-exists=".comments"><span 
ex:content="concat('Comments &
Notes: ', .comments)"></span></div>
                </td>
                </tr>
                </table>


<!--timeine div element-->
        <div
                ex:role="view"
                ex:viewClass="Timeline"
                ex:topBandUnit="month"
                ex:start=".date"
                ex:colorKey=".subject"
                ex:iconCoder="grade-icon"
                ex:iconKey=".grade"
                ex:title=".label"
        ></div>

        <div ex:role="view"
        ex:label="view"
        ex:orders=".subject, .grade_level, .grade"
        ex:possibleOrders=".subject, .grade_level, .grade, .label"
        ></div>
                </td>




        <!--set up browsing controls-->
                <td width="25%">
                        Enter your search here:
                        <div ex:role="facet" ex:facetClass="TextSearch" 
id="search"></div>
                        <div ex:role="facet" ex:facetClass="NumericRange"
ex:expression=".grade" ex:facetLabel="Grade" id="grade"></div>
                        <div ex:role="facet" ex:facetClass="NumericRange"
ex:expression=".percentile" ex:facetLabel="Percentile"
id="percentile"></div>
                        <div ex:role="facet" ex:expression=".grade_level"
ex:facetLabel="Grade Level" id="gradelevel"></div>
                        <div ex:role="facet" ex:expression=".subject"
ex:facetLabel="Subject" id="subject"></div>
                        <button type="button" onClick="clearAllFilters()">Clear 
All
Filters</button>
                </td>

        </tr>
</table>
<div ex:role="coder" ex:coderClass="Icon" id="grade-icon">
        <span ex:icon="red.png">0</span>
        <span ex:icon="red.png">1</span>
        <span ex:icon="red.png">2</span>
        <span ex:icon="red.png">3</span>
        <span ex:icon="red.png">4</span>
        <span ex:icon="red.png">5</span>
        <span ex:icon="red.png">6</span>
        <span ex:icon="red.png">7</span>
        <span ex:icon="red.png">8</span>
        <span ex:icon="red.png">9</span>
        <span ex:icon="red.png">10</span>
        <span ex:icon="red.png">11</span>
        <span ex:icon="red.png">12</span>
        <span ex:icon="red.png">13</span>
        <span ex:icon="red.png">14</span>
        <span ex:icon="red.png">15</span>
        <span ex:icon="red.png">16</span>
        <span ex:icon="red.png">17</span>
        <span ex:icon="red.png">18</span>
        <span ex:icon="red.png">19</span>
        <span ex:icon="red.png">20</span>
        <span ex:icon="red.png">21</span>
        <span ex:icon="red.png">22</span>
        <span ex:icon="red.png">23</span>
        <span ex:icon="red.png">24</span>
        <span ex:icon="red.png">25</span>
        <span ex:icon="red.png">26</span>
        <span ex:icon="red.png">27</span>
        <span ex:icon="red.png">28</span>
        <span ex:icon="red.png">29</span>
        <span ex:icon="red.png">30</span>
        <span ex:icon="red.png">31</span>
        <span ex:icon="red.png">32</span>
        <span ex:icon="red.png">33</span>
        <span ex:icon="red.png">34</span>
        <span ex:icon="red.png">35</span>
        <span ex:icon="red.png">36</span>
        <span ex:icon="red.png">37</span>
        <span ex:icon="red.png">38</span>
        <span ex:icon="red.png">39</span>
        <span ex:icon="red.png">40</span>
        <span ex:icon="red.png">41</span>
        <span ex:icon="red.png">42</span>
        <span ex:icon="red.png">43</span>
        <span ex:icon="red.png">44</span>
        <span ex:icon="red.png">45</span>
        <span ex:icon="red.png">46</span>
        <span ex:icon="red.png">47</span>
        <span ex:icon="red.png">48</span>
        <span ex:icon="red.png">49</span>
        <span ex:icon="red.png">50</span>
        <span ex:icon="red.png">51</span>
        <span ex:icon="red.png">52</span>
        <span ex:icon="red.png">53</span>
        <span ex:icon="red.png">54</span>
        <span ex:icon="red.png">55</span>
        <span ex:icon="red.png">56</span>
        <span ex:icon="red.png">57</span>
        <span ex:icon="red.png">58</span>
        <span ex:icon="red.png">59</span>
        <span ex:icon="red.png">60</span>
        <span ex:icon="red.png">61</span>
        <span ex:icon="red.png">62</span>
        <span ex:icon="red.png">63</span>
        <span ex:icon="red.png">64</span>
        <span ex:icon="red.png">65</span>
        <span ex:icon="red.png">66</span>
        <span ex:icon="red.png">67</span>
        <span ex:icon="red.png">68</span>
        <span ex:icon="red.png">69</span>
        <span ex:icon="red.png">70</span>
        <span ex:icon="red.png">71</span>
        <span ex:icon="red.png">72</span>
        <span ex:icon="red.png">73</span>
        <span ex:icon="red.png">74</span>
        <span ex:icon="yellow.png">75</span>
        <span ex:icon="yellow.png">76</span>
        <span ex:icon="yellow.png">77</span>
        <span ex:icon="yellow.png">78</span>
        <span ex:icon="yellow.png">79</span>
        <span ex:icon="yellow.png">80</span>
        <span ex:icon="yellow.png">81</span>
        <span ex:icon="yellow.png">82</span>
        <span ex:icon="yellow.png">83</span>
        <span ex:icon="yellow.png">84</span>
        <span ex:icon="yellow.png">85</span>
        <span ex:icon="yellow.png">86</span>
        <span ex:icon="yellow.png">87</span>
        <span ex:icon="yellow.png">88</span>
        <span ex:icon="yellow.png">89</span>
        <span ex:icon="green.png">90</span>
        <span ex:icon="green.png">91</span>
        <span ex:icon="green.png">92</span>
        <span ex:icon="green.png">93</span>
        <span ex:icon="green.png">94</span>
        <span ex:icon="green.png">95</span>
        <span ex:icon="green.png">96</span>
        <span ex:icon="green.png">97</span>
        <span ex:icon="green.png">98</span>
        <span ex:icon="green.png">99</span>
        <span ex:icon="green.png">100</span>
</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 simile-widgets@googlegroups.com.
To unsubscribe from this group, send email to 
simile-widgets+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/simile-widgets?hl=en.

Reply via email to