All right, here is the data. Hope it helps! This is all just temp data
for testing.
{
//types of objects contained in this data sheet
types: {
"Grade":{
pluralLabel: "Grades"
}
},
//define the property types of different attributes
properties: {
"grade_level": {
valueType: "item"
},
"grade": {
valueType: "number"
},
"percentile": {
valueType: "number"
},
},
//list of items and their properties
//data must be added to this list
//
"items":[
//add grades here
/* {
type: "Grade",
label: "object of the grade (must be unique)",
grade: "enter grade value here (just a number eg. 34, 100, 50)
date:"" //enter date here, use ISO 8601 format
},*/
{
type: "Grade",
label: "cmt123",
ID:"cmt1232345454",
grade:"100",
percentile:"1",
"grade_level":"3",
subject:"Math",
comments:"Enter comments here", //if no comments, leave blank
date:"March 23 2003"
},
{
type: "Grade",
label: "cmt1234",
ID:"cmt123423454543",
grade:"50",
percentile:"20",
"grade_level":"4",
subject:"Science",
comments:"Enter comments here",
date:"December 5 2001"
},
{ type: "Grade",
label: "cmt12344",
ID:"cmt1234442345454",
grade:"50",
percentile:"20",
"grade_level":"12",
subject:"English",
date:"May 14 2009"
},
{ type: "Grade",
label: "test1",
ID:"test123745454",
grade:"12",
percentile:"13",
"grade_level":"4",
subject:"Language",
date:"June 4 2004"
},
{ type: "Grade",
label: "Item",
ID:"Item17234",
grade:"50",
percentile:"20",
"grade_level":"6",
subject:"Science",
date:"January 5 2004"
},
{ type: "Grade",
label: "Item4",
ID:"Item12383",
grade:"98",
percentile:"90",
"grade_level":"6",
subject:"History",
date:"January 3 2006"
},
{ type: "Grade",
label: "Item4656",
ID:"Item12355",
grade:"59",
percentile:"15",
"grade_level":"7",
subject:"Spanish",
date:"January 5 2011"
},
{ type: "Grade",
label: "Thing",
ID:"Item123453454",
grade:"78",
percentile:"68",
"grade_level":"6",
subject:"French",
date:"January 7 2009"
},
{ type: "Grade",
label: "sOMETHING",
ID:"Item1234331466",
grade:"86",
percentile:"15",
"grade_level":"6",
subject:"Latin",
date:"January 5 2005"
}
]
}
On Mar 1, 4:51 pm, David Karger<[email protected]> wrote:
it's hard to tell without the data.
On Thursday, March 01, 2012 4:46:52 PM, Sandeep wrote:
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>
