Use Silverlight Timeline from HTML
This document targets web developers who what to incorporate Silverlight Timeline into their web sites without digging into silverlight code by simply using html and javascript. The procedures requires several simple steps:
1. Upload timeline.xap to your web site.
2. Create Data xml file.
3. Create Web page which will show timeline.
1. Uploading timeline.xap to your site.
Go to Download page of this site
http://timeline.codeplex.com and download latest timeline.xap file. This file should be copied to your web site folder.
2. Creating Data xml file.
Events shown by the control should be stored in xml file(s) with the following structure:
- data - root element of the document. This element should consists of event elements with the following attributes:
- title - short title of the event. This is required attribute
- start - start date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Examples: "01/16/1997 12:00:00 AM", "1996". This is required attribute.
- end - end date of the event in date time format (MM/DD/YYYY HH:MM:SS AM/PM) or just year (YYYY). Note that if isDuration attribute is not set then this value is ignored. Examples: "01/16/1997 12:00:00 AM", "1996". This is an optional attribute
- isDuration - Specifies if event has duration from start to end. If false then only start date is used. Examples "true", "false". This is an optional attribute and false by default.
- image - url of image that will be displayed when the user clicks on "More..." dialog box. Optional.
- teaserimage - url of image that will be displayed on the timeline under bullet. Optional.
- "color" - spedifies color of the event bullet or line. Examples are "Red", "Blue", "Green", etc. This is an optional attribute. Default event bullet color can be specified from javascript as explained below.
- link - link to external site with more information about the event. For example: http://www.someurl.com/abouttheevent.html
Body of
event element may contain optional description of the event.
Here is a partial example of data.xml:
<data>
<event start="10/14/1840 12:00:00"
title="Birth" color="Green" image="monet.png" link="http://en.wikipedia.org/wiki/Monet">
Claude Monet, also known as Oscar-Claude Monet or Claude Oscar Monet
was born to Adolphe and Louise-Justine Monet of 45 Rue Laffitte,
in the 9th arrondissement of Paris.
</event>
<event start="06/01/1861"
end="06/01/1863"
isDuration="true"
title="Joined Cavalry in Algeria">
In June of 1861 Monet joined the First Regiment of African Light Cavalry
in Algeria for two years of a seven-year commitment, but upon his
contracting typhoid his aunt Madame Lecadre intervened to get him out
of the army if he agreed to complete an art course at a university.
It is also possible that the Dutch painter Johan Barthold Jongkind
(whom Monet knew) may have prompted his aunt on this matter.
</event>
</data>
3. Create Web page which will show timeline.
Copy Your site should have silverlight.js. This file will help the users of you site to install the silverlight. More information about silverlight.js can be found here
http://code.msdn.microsoft.com/silverlightjs
<head>
<script type="text/javascript" src="Silverlight.js"></script>
</head>
Add silverlight object to your page html. Most up to date example can be found in source code Timeline.aspx file.
<div id="timelineControlHost" style="width:100%;height:100%">
<object id="timelineControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="Timeline.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="onload" value="onSlLoad"/>
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
Now you need to implement onSlLoad javascript function which will initialize timeline control:
<script type="text/javascript">
function onSlLoad(sender, args) {
sl = document.getElementById("timelineControl1");
timeline = sl.Content.Instance;
timeline.Urls = "/Monet.xml";
timeline.CalendarType = "gregorian";
timeline.MinDateTime = "01/01/1830";
timeline.MaxDateTime = "01/01/1930";
timeline.TeaserSize = 40;
timeline.MoreLinkText = "more>>";
timeline.CurrentDateTime = "01/01/1855";
timeline.AddTimelineToolbox();
timeline.AddTimelineBand(0, true, "years", 20, 130);
timeline.AddTimelineBand(50, false, "decades", 20, 4);
timeline.Run();
}
</script>
3.1. Timeline Control Properties
Property | Description | Example Values |
Urls | ';' delimited list of data xmls with events to show. You need to specify this parameter or timeline will appear blank. | http://mysite.com/monet.xml |
CalendarType | Optional type of calendar. Can be one of the following values: "hebrew", "hijri", "japanese", "korean", "taiwan", "thaibuddhist", "umalqura", "gregorian" | "gregorian" |
CultureID | Optional culture code (by default en-US). If datetimes are not in default this property should be set before any date specified. Codes can be found here | "sl-SI" |
MinDateTime | Min date and time which will be visible to the user. You need to specify this date or DateTime.MinValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". | 01/01/1860 |
MaxDateTime | Max date and time which will be visible to the user. You need to specify this date or DateTime.MaxValue date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". | 01/01/1860 |
CurrentDateTime | Date and time which will be visible to the user. You need to specify this date or today date will be used. The value should be specified in MM/DD/YYYY HH:MM:SS AM format or you can assign it to "today", "now", "yesterday", "tomorrow". This date is initially placed in middle of timeline. | 01/01/1860 |
MoreLinkText | Optional, "More..." by default. Link text for case when description is more than TeaserSize | "More..." |
TeaserSize | Optional. Number of teaser characters. 80 by default. | 50 |
3.2. Timeline Control Methods
Method | Parameters | Description | Example Value |
| | | |
AddTimelineBand | | Add new timeline band to timeline control. You can have more then one timeline band: one main band which will display events as bullets/lines with titles and teaser. Main band usually have most height and least column timespan. You can also have several secondary timeline bands. For instance to display main timeline band may display days and 2 secondary timeline bands may display months and years. |
| height | Height of timeline band in pixels. Usually main timeline band has most height. This parameter may be 0 in case if you need this band to take the rest of remaining height of control, which makes sence for main band. | 400 |
| isMain | Specifies if this timeline band is main or secondary. Only one timeline band can be main. You may have 0 or more secondary timeline bands | true |
| scaleType | Timeline band scale type which may be "minutes", "minutes10", "hours", "days", "years" or "decades". | "years" |
| colCount | Number of columns for timeline band. For example if for "months" band you what the whole year to be visible you will specify 12 | 12 |
| | | |
Run | | After initialization is finished and all bands are specified you should call this method to display all timebands and events. This method does not have parameters | |
| | | |
ClearEvents | | Removes all events from all timeline bands. | |
| | | |
ResetEvents | | Shows passed events. | |
| xml | XML content with events. This is the same file format as described above | "<data><event start=...." |
.