Worked on charts

This commit is contained in:
Joachim Lusiardi 2016-05-02 06:42:43 +02:00
parent 161cc16498
commit cc7d2620e8
5 changed files with 73 additions and 40 deletions

View File

@ -1,4 +1,5 @@
from rollerverbrauch import app
import hashlib
@app.template_filter('none_filter')
@ -7,3 +8,15 @@ def none_filter(value):
return ''
else:
return value
@app.template_filter('md5')
def md5_filter(value):
m = hashlib.md5()
m.update(str(value).encode('UTF-8'))
return m.hexdigest()
@app.template_filter('str')
def str_filter(value):
return str(value)

View File

@ -12,18 +12,18 @@ function createChart(id, data, unit) {
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true,
"title": "Fuelled litres"
// "title": unit
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 10
"shadowAlpha": 10,
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
"color":"#ffffff",
},
"bullet": "round",
"bulletBorderAlpha": 1,
@ -31,7 +31,7 @@ function createChart(id, data, unit) {
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "Fuelled litres",
// "title": unit,
//"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]] "+unit+"</span>"

View File

@ -59,6 +59,31 @@
{% endmacro %}
{% macro chartScript(divId, data, unit)%}
{% set hash = divId | md5 %}
data_{{ hash }} = [{% for stop in data %}{
"date": "{{stop.date}}",
"value": {{stop.value}}
}{% if not loop.last %},{%endif%}
{% endfor%}
]
var chart_{{ hash }} = createChart('{{divId}}', data_{{ hash }}, '{{unit}}');
function zoom_chart_{{ hash }}() {
chart_{{ hash }}.zoomToIndexes(
chart_{{ hash }}.dataProvider.length - 40,
chart_{{ hash }}.dataProvider.length - 1
);
}
chart_{{ hash }}.addListener("rendered", zoom_chart_{{ hash }});
zoom_chart_{{ hash }}()
{% endmacro %}
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
@ -94,6 +119,9 @@
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/patterns.js"></script>
<script src="{{ url_for('static', filename='main.js') }}"></script>
</head>
<body>

View File

@ -57,10 +57,24 @@
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="v{{vehicle.id}}_c1">
<div id="chartdiv1" style="width:100%; height:500px;"></div>
{% if vehicle.pitstop_count > 0 %}
<div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
<script type="text/javascript">
{{ chartScript('fuelledChartDiv'+vehicle.id|str, vehicle.litres, 'l') }}
</script>
{% else %}
not enough data.
{% endif %}
</div>
<div class="tab-pane " id="v{{vehicle.id}}_c2">
<div id="chartdiv2" style="width:100%; height:500px;"></div>
{% if vehicle.pitstop_count > 0 %}
<div id="odometerChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
<script type="text/javascript">
{{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }}
</script>
{% else %}
not enough data.
{% endif %}
</div>
</div>
</div>
@ -78,39 +92,7 @@
});
</script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/patterns.js"></script>
<script type="text/javascript">
data1 = [{% for stop in current_user.vehicles[0].pitstops %}{
"date": "{{stop.date}}",
"value": {{stop.litres}}
}{% if not loop.last %},{%endif%}
{% endfor%}
]
var chart1 = createChart('chartdiv1', data1, 'l');
chart1.addListener("rendered", zoomChart1);
zoomChart1();
function zoomChart1() {
chart1.zoomToIndexes(chart1.dataProvider.length - 40, chart1.dataProvider.length - 1);
}
data2 = [{% for stop in current_user.vehicles[0].pitstops %}{
"date": "{{stop.date}}",
"value": {{stop.odometer}}
}{% if not loop.last %},{%endif%}
{% endfor%}
]
var chart2 = createChart('chartdiv2', data2, 'km');
chart2.addListener("rendered", zoomChart2);
zoomChart2();
function zoomChart2() {
chart2.zoomToIndexes(chart2.dataProvider.length - 40, chart2.dataProvider.length - 1);
}
</script>
{% endblock %}

View File

@ -11,10 +11,14 @@ class VehicleStats:
self.overall_litres = 0
self.average_litres_fuelled = 0
self.average_litres_used = 0
self.pitstops = vehicle.pitstops
self.litres = []
self.odometers = []
if self.pitstop_count > 0:
for pitstop in vehicle.pitstops:
self.overall_litres += pitstop.litres
self.litres.append(StatsEvent(pitstop.date, pitstop.litres))
self.odometers.append(StatsEvent(pitstop.date, pitstop.odometer))
self.average_litres_fuelled = self.overall_litres / self.pitstop_count
if self.pitstop_count > 1:
self.overall_distance = vehicle.pitstops[-1].odometer - vehicle.pitstops[0].odometer
@ -22,6 +26,12 @@ class VehicleStats:
self.average_litres_used = 100 * (self.overall_litres - vehicle.pitstops[0].litres) / self.overall_distance
class StatsEvent:
def __init__(self, date, value):
self.date = date
self.value = value
def db_log_add(entity):
logging.info('db_add: %s' % str(entity))