Lab as a Service 2.0
[laas.git] / src / templates / booking / stats.html
1 {% extends "base.html" %}
2 {% load staticfiles %}
3
4 {% block extrahead %}
5 {{ block.super }}
6 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
7 <script>
8 function drawGraph(data, graph_id, graph_title){
9     var container = document.getElementById(graph_id);
10     var plot_data = { x: data[0],
11         y: data[1],
12         fill: "tonexty",
13         type: "scatter",
14         mode: "none",
15     };
16     var layout = {
17         title: graph_title
18     };
19     Plotly.newPlot(container, [plot_data], layout);
20 }
21 function getData(){
22     var req = new XMLHttpRequest();
23     var url = "/booking/stats/json";
24     var day_input = document.getElementById("number_days");
25     var days = day_input.value;
26     //var days = document.getElementById("number_days").value;
27     if(days){
28         url = url + "?days=" + days;
29     }
30     req.onreadystatechange = function(){
31         if( req.readyState == XMLHttpRequest.DONE) {
32             var data = JSON.parse(req.responseText);
33             drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
34             drawGraph(data["user"], "user_graph_container", "Active Users");
35         }
36     }
37     req.open("GET", url, true);
38     req.send();
39 }
40 </script>
41 {% endblock %}
42
43 {% block content %}
44     <p>Number of days to plot: </p>
45     <input id="number_days" type="number" min="1" step="1"/>
46     <button onclick="getData();">Submit</button>
47     <div id="all_graph_container">
48         <div id="booking_graph_wrapper">
49             <div id="booking_graph_container"/>
50         </div>
51         <div id="user_graph_wrapper" >
52             <div id="user_graph_container"/>
53         </div>
54     </div>
55     <script>
56 var data = {{data|safe}};
57 drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
58 drawGraph(data["user"], "user_graph_container", "Active Users");
59     </script>
60 {% endblock content %}