{% extends 'layouts/navigation.html' %} {% block title %}{{ labels.title.realtime }}{% endblock %} {% block titleHead %}{{ labels.title.realtime }}{% endblock %} {% block headStyle %} {% for chart in mainCharts %} {% for display in chart.data.display %} {% if display.colour %} .realtime-info-{{ chart.name }}-{{ loop.key }} .realtime-info-number { color: {{ display.colour }}; } {% endif %} {% endfor %} {% endfor %} {% endblock %} {% block content %}

{% block titleHead %}{% endblock %}

{% for chart in mainCharts %}

{{ chart.title }}
{% for display in chart.data.display %}
1 %}style="margin-top:5px"{% endif %}> {{ display.number }}
{{ display.text }}
{% endfor %}
{{ labels.now }}
{% endfor %} {% endblock %} {% block bottomScript %} function ajaxCall(venue_id, target, name) { $.ajax({ url: '/get/' + name, method: 'POST', data: { venue: venue_id } }).done(function(data) { ajaxUpdate(target, name, data); }).fail(function(err) { ajaxFails(target); }); $.ajax({ url: '/get/' + name + '-array', method: 'POST', data: { venue: venue_id, time: target.time.getTime() } }).done(function(data) { chartAjaxUpdate(target, name, data); }).fail(function(err) { ajaxFails(target); }); } function ajaxUpdate(target, name, data) { data = JSON.parse(data); if (data.error) { if (parseInt(data.error) == 3030) { location.reload(); } clearInterval(target.timer); return; } target.retry = 0; for (var i = 0; i < data.length; i++) { var info = $('.realtime-info-' + name + '-' + i); var number = info.find('.realtime-info-number'); var text = info.find('.realtime-info-text'); number.html(data[i].number); text.html(data[i].text); } } function chartAjaxUpdate(target, name, data) { data = JSON.parse(data); if (data.error) { if (parseInt(data.error) == 3030) { location.reload(); } clearInterval(target.timer); return; } target.retry = 0; var series = target.series; if (data.labels.length > 1) { target.labels.splice(0, data.labels.length - 1); data.labels.splice(0, 1); target.labels = target.labels.concat(data.labels); for (var i = 0; i < series.length; i++) { target.series[i].splice(0, data.series[i].length - 1); target.series[i].splice(target.series[i].length - 1, 1); target.series[i] = target.series[i].concat(data.series[i]); } target.max = target.series.stackMaxFill(); target.chart.options.high = target.max; target.chart.update({ labels: target.labels, series: target.series }, target.chart.options); target.time = new Date(); target.time.setSeconds(0); } else { var update = false; for (var i = 0; i < target.series.length; i++) { if ((target.series[i] % 1 !== 0 && data.series[i][0] !== 0) || (target.series[i] % 1 === 0 && target.series[i][target.series[i].length - 1] != data.series[i][0]) ) { target.series[i][target.series[i].length - 1] = data.series[i][0]; update = true; } } if (update === true) { target.max = target.series.stackMaxFill(); target.chart.data.series = target.series; target.chart.options.high = target.max; target.chart.update( target.chart.data, target.chart.options ); } } } function ajaxFails(target) { target.retry++; if (target.retry > 12) { clearInterval(target.timer); } } function skipTimeLabels(value, index) { return (value[value.length - 1] === '0' || value[value.length - 1] === '5') ? value : null; } function normalizedToZero(value) { return value % 1 === 0 ? value : 0; } Array.prototype.stackMaxFill = function() { if (this.length == 0) { return; } var max = Math.ceil(this.stackMax() * 1.1); if (max == 0) { max = 1; } for (var i = 0; i < this[0].length; i++) { if (this[0][i] === 0) { this[0][i] = max * 0.008; if (max * 0.005 % 1 === 0) { this[0][i] += 0.00001; } } } return max; } var mainCharts = {}; {% for chart in mainCharts %} mainCharts['{{ chart.name }}'] = {}; mainCharts['{{ chart.name }}'].retry = 0; mainCharts['{{ chart.name }}'].time = new Date(); mainCharts['{{ chart.name }}'].time.setSeconds(0); mainCharts['{{ chart.name }}'].timer = setInterval(function() { ajaxCall( {{ venues[0].venue_id }}, mainCharts['{{ chart.name }}'], '{{ chart.name }}' ); }, 5000); mainCharts['{{ chart.name }}'].series = JSON.parse('{{ JSON.stringify(chart.data.series) }}'); mainCharts['{{ chart.name }}'].labels = JSON.parse('{{ JSON.stringify(chart.data.labels) }}'); mainCharts['{{ chart.name }}'].colour = JSON.parse('{{ JSON.stringify(chart.data.colour) }}'); mainCharts['{{ chart.name }}'].max = mainCharts['{{ chart.name }}'].series.stackMaxFill(); mainCharts['{{ chart.name }}'].chart = Chartist.Bar('.{{ chart.name }}-chart', { labels: mainCharts['{{ chart.name }}'].labels, series: mainCharts['{{ chart.name }}'].series }, { fullWidth: true, high: mainCharts['{{ chart.name }}'].max, stackBars: true, axisX: { showGrid: false, labelInterpolationFnc: skipTimeLabels }, axisY: { offset: 0, showLabel: false, showGrid: false }, plugins: [ Chartist.plugins.tooltip({ transformTooltipTextFnc: normalizedToZero, class: 'tool-tip' }) ] }); mainCharts['{{ chart.name }}'].chart.on('draw', function(data) { if (data.type === 'bar') { var width = $('.{{ chart.name }}-chart').width(); var length = mainCharts['{{ chart.name }}'].series[0].length; var stepWidth = width * 0.8 / length; data.element.attr({ style: 'stroke: ' + mainCharts['{{ chart.name }}'].colour[data.seriesIndex] + ';' + 'stroke-width: ' + stepWidth + 'px;' }); if (data.index === 0) { var left = data.axisX.axisLength - data.axisX.stepLength * 0.92 + data.axisX.gridOffset + data.chartRect.padding.left; $('.realtime-chart-now-text').css('left', left + stepWidth / 2 - $('.realtime-chart-now-text').width() / 2); $('.realtime-chart-now').css('left', left); $('.realtime-chart-now').css('width', stepWidth); } } }); {% endfor %} {% endblock %}