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>