erki/ss13_se
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up the graph stuff.

Browse Source
This commit is contained in:
A. Svensson 2015-03-08 18:21:17 +01:00
parent 02ac961176
commit 69920c29c1
2 changed files with 26 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/static/css/style.css
View File

@ -63,7 +63,7 @@ body {
padding-bottom: 40px; padding-bottom: 40px;
} }
#chart { #weekly_history {
width:800px; width:800px;
height:200px; height:200px;
} }

59
src/templates/gameservers/server_detail.html
View File

@ -56,22 +56,25 @@
</tr> </tr>
</table> </table>
<h3>Players, last week</h3> <h3>Players last week</h3>
<div id="chart"></div> <div id="weekly_history"></div>
<h3>Average per day</h3>
<div id="weekday_averages"></div>
<div id="tooltip"></div> <div id="tooltip"></div>
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.flot.js' %}"></script> <script type="text/javascript" src="{% static 'js/jquery.flot.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.flot.time.js' %}"></script> <script type="text/javascript" src="{% static 'js/jquery.flot.time.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.flot.categories.js' %}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
var series = [ var data = [
{# convert timestamp to ms, because javascript... #} {# convert timestamp to ms, because javascript... #}
{% for item in weekly_history %} {% for item in weekly_history %}
[{{item.created|date:'U'}} * 1000, {{item.players}}], [{{item.created|date:'U'}} * 1000, {{item.players}}],
{% endfor %} {% endfor %}
]; ];
$.plot("#weekly_history", [data], {
var options = {
xaxis: { xaxis: {
mode: "time", mode: "time",
timezone: "browser", timezone: "browser",
@ -84,39 +87,14 @@
hoverable: true, hoverable: true,
borderWidth: 0, borderWidth: 0,
}, },
};
$.plot("#chart", [series], options);
$("#chart").bind("plothover", function (event, pos, item) {
if (item) {
var time = item.datapoint[0];
var players = item.datapoint[1];
var timestamp = new Date(time).toString();
$("#tooltip")
.html(players + " players at " + timestamp)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
}); });
});
</script>
var data= [
<h3>Players, average per day</h3>
<div id="weekday_averages"></div>
<script type="text/javascript" src="{% static 'js/jquery.flot.categories.js' %}"></script>
<script type="text/javascript">
$(function() {
var series = [
{% for day, players in weekday_averages %} {% for day, players in weekday_averages %}
["{{day}}", {{players}}], ["{{day}}", {{players}}],
{% endfor %} {% endfor %}
]; ];
$.plot("#weekday_averages", [data], {
var options = {
xaxis: { xaxis: {
mode: "categories", mode: "categories",
}, },
@ -129,10 +107,21 @@
hoverable: true, hoverable: true,
borderWidth: 0, borderWidth: 0,
}, },
}; });
$.plot("#weekday_averages", [series], options);
$("#weekly_history").bind("plothover", function (event, pos, item) {
if (item) {
var time = item.datapoint[0];
var players = item.datapoint[1];
var timestamp = new Date(time).toString();
$("#tooltip")
.html(players + " players at " + timestamp)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
$("#weekday_averages").bind("plothover", function (event, pos, item) { $("#weekday_averages").bind("plothover", function (event, pos, item) {
if (item) { if (item) {
var players = item.datapoint[1]; var players = item.datapoint[1];