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     <div class="form-group">
  46         <input id="number_days" type="number" class="form-control" min="1" step="1" style="display:inline;width:200px"/>
  47         <button class="btn btn-primary" onclick="getData();" style="display:inline;">Submit</button>
  48     </div>
  49     <div id="all_graph_container">
  50         <div id="booking_graph_wrapper">
  51             <div id="booking_graph_container"/>
  52         </div>
  53         <div id="user_graph_wrapper" >
  54             <div id="user_graph_container"/>
  55         </div>
  56     </div>
  57     <script>
  58 var data = {{data|safe}};
  59 drawGraph(data["booking"], "booking_graph_container", "Active Bookings");
  60 drawGraph(data["user"], "user_graph_container", "Active Users");
  61     </script>
  62 {% endblock content %}