Getting Started with Timeplot

From SIMILE Widgets
(Difference between revisions)
Jump to: navigation, search
(Add category)
Line 73: Line 73:
[[Category:Getting Started]]

Latest revision as of 20:29, 4 November 2015


How to Create Timeplots

Getting Started

Here are a few easy steps to create a simple timeplot. Open up your favorite text or HTML editor and start creating an HTML file.

Step 1. Link to the API

In your HTML code, link to Timeplot's Javascript API code as follows:

    <script src="" 

Step 2. Create a DIV Element

Create a div element in your HTML code, e.g.

<div id="my-timeplot" style="height: 150px;"></div>

You should give it an ID as well as fix its height.

Step 3. Call Timeplot.create()

Add two event handlers, onload and onresize, to the body element:

  <body onload="onLoad();" onresize="onResize();">

Then write the following code in a script block or a separate Javascript file:

<source lang="javascript" lines=0>

var timeplot;

function onLoad() {

 var plotInfo = [
     id: "plot1"
 timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);


var resizeTimerID = null; function onResize() {

   if (resizeTimerID == null) {
       resizeTimerID = window.setTimeout(function() {
           resizeTimerID = null;
       }, 100);


</source> Note that if we put the code to construct the timeplot in the onload handler to make sure that when we start to use Timeplot's API, all its code has been loaded. That code creates an empty timeplot, as the one here below.

Personal tools