Overloading Timeplot.DefaultEventSource.loadXML to be able to take in SPARQL results and converting with an xslt document instead of the normal XML.

README.md

There are better ways of doing this, but because I don't understand javascript or Timeplot and had to finish fast I did it like this.

I overload the loadXML function of DefaultEventSource to take inn a SPARQL result XML document with the url to an xsl_url. It converts the sparql result with xslt to the format that Timeplot reads.

I didn't need to read XML as well.

You can use the following xslt to transform sparql results.. or write your own.

Code released under GPLv3

fromsparqltotimeplot.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:sparql="http://www.w3.org/2005/sparql-results#">
  <xsl:template match="/sparql:sparql/sparql:results">
    <data>
      <xsl:for-each select="sparql:result">
        <event>
          <xsl:attribute name="isDuration">
            true 
          </xsl:attribute>
          <xsl:attribute name="start">
            <xsl:value-of select="sparql:binding[@name='start']/sparql:literal"/>
          </xsl:attribute>
          <xsl:attribute name="end">
            <xsl:value-of select="sparql:binding[@name='end']/sparql:literal"/>
          </xsl:attribute>
          <xsl:attribute name="image">
            <xsl:value-of select="sparql:binding[@name='main_image_url']/sparql:literal"/>
          </xsl:attribute>
          <xsl:attribute name="link">
            <xsl:value-of select="sparql:binding/sparql:uri"/>
          </xsl:attribute>
          <xsl:value-of select="sparql:binding[@name='description']/sparql:literal"/>
        </event>
      </xsl:for-each>
    </data>
  </xsl:template>
</xsl:stylesheet>

loadsparql.js

Timeplot.DefaultEventSource.prototype.loadXML = function(inxml, url, xsl_url) {
    var xhttp=new XMLHttpRequest();
    xhttp.open("GET", xsl_url,false);
    xhttp.send(null);
    var xsl = xhttp.responseXML;
    
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    xml = xsltProcessor.transformToDocument(inxml);

    var base = this._getBaseURL(url);
    
    var wikiURL = xml.documentElement.getAttribute("wiki-url");
    var wikiSection = xml.documentElement.getAttribute("wiki-section");

    var dateTimeFormat = xml.documentElement.getAttribute("date-time-format");
    var parseDateTimeFunction = this._events.getUnit().getParser(dateTimeFormat);

    var node = xml.documentElement.firstChild;
    var added = false;
    while (node != null) {
        if (node.nodeType == 1) {
            var description = "";
            if (node.firstChild != null && node.firstChild.nodeType == 3) {
                description = node.firstChild.nodeValue;
            }
            // instant event: default is true. Or use values from isDuration or durationEvent
            var instant = (node.getAttribute("isDuration")    === null &&
                           node.getAttribute("durationEvent") === null) ||
                          node.getAttribute("isDuration") == "false" ||
                          node.getAttribute("durationEvent") == "false";
            
            var evt = new Timeline.DefaultEventSource.Event( {
                          id: node.getAttribute("id"),
                       start: parseDateTimeFunction(node.getAttribute("start")),
                         end: parseDateTimeFunction(node.getAttribute("end")),
                 latestStart: parseDateTimeFunction(node.getAttribute("latestStart")),
                 earliestEnd: parseDateTimeFunction(node.getAttribute("earliestEnd")),
                     instant: instant,
                        text: node.getAttribute("title"),
                 description: description,
                       image: this._resolveRelativeURL(node.getAttribute("image"), base),
                        link: this._resolveRelativeURL(node.getAttribute("link") , base),
                        icon: this._resolveRelativeURL(node.getAttribute("icon") , base),
                       color: node.getAttribute("color"),
                   textColor: node.getAttribute("textColor"),
                   hoverText: node.getAttribute("hoverText"),
                   classname: node.getAttribute("classname"),
                   tapeImage: node.getAttribute("tapeImage"),
                  tapeRepeat: node.getAttribute("tapeRepeat"),
                     caption: node.getAttribute("caption"),
                     eventID: node.getAttribute("eventID"),
                    trackNum: node.getAttribute("trackNum")
            });

            evt._node = node;
            evt.getProperty = function(name) {
                return this._node.getAttribute(name);
            };
            evt.setWikiInfo(wikiURL, wikiSection);
            
            this._events.add(evt);
            
            added = true;
        }
        node = node.nextSibling;
    }


    if (added) {
        this._fire("onAddMany", []);
    }
}