aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/booking/stats.html
blob: 42eebddbb2f11263e4abd261dade1d0300326ff8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{% extends "base.html" %}
{% load staticfiles %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
function drawGraph(data, graph_id, graph_title){
    var container = document.getElementById(graph_id);
    var plot_data = { x: data[0],
        y: data[1],
        fill: "tonexty",
        type: "scatter",
        mode: "none",
    };
    var layout = {
        title: graph_title
    };
    Plotly.newPlot(container, [plot_data], layout);
}
function getData(){
    var req = new XMLHttpRequest();
    var url = "/booking/stats/json";
    var day_input = document.getElementById("number_days");
    var days = day_input.value;
    //var days = document.getElementById("number_days").value;
    if(days){
        url = url + "?days=" + days;
    }
    req.onreadystatechange = function(){
        if( req.readyState == XMLHttpRequest.DONE) {
            var data = JSON.parse(req.responseText);
            drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
            drawGraph(data["user"], "user_graph_container", "Active Users");
        }
    }
    req.open("GET", url, true);
    req.send();
}
</script>
{% endblock %}

{% block content %}
    <p>Number of days to plot: </p>
    <div class="form-group">
        <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
        <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
    </div>
    <div id="all_graph_container">
        <div id="booking_graph_wrapper">
            <div id="booking_graph_container"/>
        </div>
        <div id="user_graph_wrapper" >
            <div id="user_graph_container"/>
        </div>
    </div>
    <script>
var data = {{data|safe}};
drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
drawGraph(data["user"], "user_graph_container", "Active Users");
    </script>
{% endblock content %}