Last updated September 12, 2009. Created by mabhobs on February 28, 2009.
Edited by bekasu. Log in to edit this page.

This is a little tutorial on how to use Simile Timeplot with Drupal. Whenever I refer to any steps I refer to the following tutorial: http://simile.mit.edu/timeplot/docs/

1. Create a folder in sites/all/modules/ with the name "timeplot".
2. Download everything from http://static.simile.mit.edu/timeplot/ into the folder created in 1.
3. Put your data file somewhere on your website, for example to sites/default/files/upload_files/datafile.txt
4. Create a node using the PHP input format.
5. Add the code from below in the node body, change referral links such as http://yourpage.org/sites/default/files/upload_files/datafile.txt, and save.

<?php
// Add the timplot module, which substitudes Step 1
drupal_add_js("../sites/all/modules/timeplot/api/1.0/timeplot-api.js");
?>

<!-- This creates the timeplot. See also Step 2 -->
<div id="my-timeplot" style="height: 300px; color:#00CC00"></div>
<!-- This is the javascript to call the timeplot widget and plot the datafile in it. -->
<script type="text/javascript">
// The following two line substitude the body onload and onresize described in Step 3
window.onload = function() { onLoad();}
window.onresize = onResize();
// The following lines create a graph as explain in Step 3 to 10
function onLoad() {
  var eventSource = new Timeplot.DefaultEventSource();
  var dataSource = new Timeplot.ColumnSource(eventSource,1);
  var timeGeometry = new Timeplot.DefaultTimeGeometry({
    gridColor: new Timeplot.Color("#000000"),
    axisLabelsPlacement: "top"
  });
  var valueGeometry = new Timeplot.DefaultValueGeometry({
    axisLabelsPlacement: "left",
    gridColor: "#000000",
  });
  var plotInfo = [
    Timeplot.createPlotInfo({
      id: "plot1",
      dataSource: new Timeplot.ColumnSource(eventSource,1),
      gridColor: "#000000",
      axisLabelsPlacement: "left",
      lineColor: "#ff0000",
      fillColor: "#8B0000",
      showValues: true,
      dataSource: dataSource,
      timeGeometry: timeGeometry,
      valueGeometry: valueGeometry
    })
  ];
  timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
  timeplot.loadText("http://yourpage.org/sites/default/files/upload_files/datafile.txt", ",", eventSource);
}
</script>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.