Getting Started with Timeplot

From SIMILE Widgets
Revision as of 21:29, 4 November 2015 by Tullyhansen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

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:

<html>
  <head>
    ...
    <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" 
       type="text/javascript"></script>
    ...
  </head>
  <body>
    ...
  </body>
</html>

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();">
    ...
  </body>

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 = [
   Timeplot.createPlotInfo({
     id: "plot1"
   })
 ];
           
 timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);

}

var resizeTimerID = null; function onResize() {

   if (resizeTimerID == null) {
       resizeTimerID = window.setTimeout(function() {
           resizeTimerID = null;
           timeplot.repaint();
       }, 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
Namespaces
Variants
Actions
Navigation
Toolbox