vis.js demo

Using vis.js to display PagerDuty incidents

HTML

<script src="http://visjs.org/dist/vis.js"></script>
<link rel="stylesheet" href="http://visjs.org/dist/vis.css">
<script src="http://eurica.github.io/pdjs/js/pdjs.js"></script>
<h2>Last 100 incidents on webdemo</h2>

<div id="mytimeline">xxx</div>

CSS

.resolved {
    background-color: #dfd !important;
}
.triggered {
    background-color: #fcc !important;
}
.acknowledged {
    background-color: #ffd !important;
}
body {
    margin:0;
    padding:0;
}

JavaScript

// DOM element where the Timeline will be attached
var container = document.getElementById('mytimeline');



// Configuration for the Timeline

var d = new Date()
d.setDate(d.getDate() - 1);
console.log(d)
var options = {
    showCurrentTime: true,
    start: d,
    end: new Date(),
    maxHeight: 500,
};

PDJS = new PDJSobj({
    subdomain: "webdemo",
    token: "pkTGpzBoak9fAaPcuWN9",
})


PDJS.api({
    res: "incidents",
    data: {
        limit: 100,
        sort_by: "created_on:desc"
    },
    success: function (json) {
        console.log(json)
        incidents = []
        $.each(json["incidents"], function (n, i) {
            //console.log(i)
            incidents.push({
                id: n,
                content: i.service.name + ": " + i.incident_key,
                start: i.created_on,
                className: i.status,
                end: i.last_status_change_on,
            })
        })
        console.log(incidents)
        data = new vis.DataSet(incidents)
        var timeline = new vis.Timeline(container, data, options);
    },
})