From 60293d6a2737d1fb4921bae52c2320acfc652736 Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Thu, 28 Apr 2016 07:53:53 +0200
Subject: [PATCH 1/6] Demo Chart

---
 app/rollerverbrauch/templates/statistics.html | 97 +++++++++++++++++++
 1 file changed, 97 insertions(+)

diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 9fd7b0f..417b583 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -58,5 +58,102 @@
           });
 
     </script>
+	<div id="chartdiv" style="width:100%; height:500px;"></div>
+	<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">
+var chart = AmCharts.makeChart("chartdiv", {
+    "type": "serial",
+    "theme": "patterns",
+    "marginRight": 40,
+    "marginLeft": 40,
+    "autoMarginOffset": 20,
+    "mouseWheelZoomEnabled":true,
+    "dataDateFormat": "YYYY-MM-DD",
+    "valueAxes": [{
+        "id": "v1",
+        "axisAlpha": 0,
+        "position": "left",
+        "ignoreAxisWidth":true
+    }],
+    "balloon": {
+        "borderThickness": 1,
+        "shadowAlpha": 0
+    },
+    "graphs": [{
+        "id": "g1",
+        "balloon":{
+          "drop":true,
+          "adjustBorderColor":false,
+          "color":"#ffffff"
+        },
+        "bullet": "round",
+        "bulletBorderAlpha": 1,
+        "bulletColor": "#FFFFFF",
+        "bulletSize": 5,
+        "hideBulletsCount": 50,
+        "lineThickness": 2,
+        "title": "red line",
+        "useLineColorForBulletBorder": true,
+        "valueField": "value",
+        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
+    }],
+    "chartScrollbar": {
+        "graph": "g1",
+        "oppositeAxis":false,
+        "offset":30,
+        "scrollbarHeight": 80,
+        "backgroundAlpha": 0,
+        "selectedBackgroundAlpha": 0.1,
+        "selectedBackgroundColor": "#888888",
+        "graphFillAlpha": 0,
+        "graphLineAlpha": 0.5,
+        "selectedGraphFillAlpha": 0,
+        "selectedGraphLineAlpha": 1,
+        "autoGridCount":true,
+        "color":"#AAAAAA"
+    },
+    "chartCursor": {
+        "pan": true,
+        "valueLineEnabled": true,
+        "valueLineBalloonEnabled": true,
+        "cursorAlpha":1,
+        "cursorColor":"#258cbb",
+        "limitToGraph":"g1",
+        "valueLineAlpha":0.2,
+        "valueZoomable":true
+    },
+    "valueScrollbar":{
+      "oppositeAxis":false,
+      "offset":50,
+      "scrollbarHeight":10
+    },
+    "categoryField": "date",
+    "categoryAxis": {
+        "parseDates": true,
+        "dashLength": 1,
+        "minorGridEnabled": true
+    },
+    "export": {
+        "enabled": true
+    },
+    "dataProvider": [{% for stop in current_user.vehicles[0].pitstops %}{
+        	"date": "{{stop.date}}",
+        	"value": {{stop.litres}}
+    	}{% if not loop.last %},{%endif%}
+		{% endfor%}
+		]
+});
+
+chart.addListener("rendered", zoomChart);
+
+zoomChart();
+
+function zoomChart() {
+    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
+}
+	</script>
 
 {% endblock %}

From ef976299dcecbfcea6bdc2d9891f37042ac391bc Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Thu, 28 Apr 2016 22:33:14 +0200
Subject: [PATCH 2/6] Fix PEP8 error

---
 app/rollerverbrauch/__init__.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/rollerverbrauch/__init__.py b/app/rollerverbrauch/__init__.py
index 495ab17..664e15d 100644
--- a/app/rollerverbrauch/__init__.py
+++ b/app/rollerverbrauch/__init__.py
@@ -179,7 +179,7 @@ def create_pit_stop_form(vid):
     form.litres.default = last_pitstop.litres
     form.date.default = date.today()
     form.process()
-    return render_template('newPitStopForm.html', form=form, vehicle = vehicle)
+    return render_template('newPitStopForm.html', form=form, vehicle=vehicle)
 
 
 @app.route('/pitstops', methods=['GET'])

From 161cc16498a6fb1de50a9b4045d6efcb54545d70 Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Sat, 30 Apr 2016 06:41:59 +0200
Subject: [PATCH 3/6] continued work ok charts

---
 app/rollerverbrauch/static/main.js            |  81 ++++++++++-
 app/rollerverbrauch/templates/layout.html     |   1 +
 app/rollerverbrauch/templates/statistics.html | 129 ++++++------------
 app/rollerverbrauch/tools.py                  |   1 +
 4 files changed, 125 insertions(+), 87 deletions(-)

diff --git a/app/rollerverbrauch/static/main.js b/app/rollerverbrauch/static/main.js
index 8b13789..dc9ca89 100644
--- a/app/rollerverbrauch/static/main.js
+++ b/app/rollerverbrauch/static/main.js
@@ -1 +1,80 @@
-
+function createChart(id, data, unit) {
+    return AmCharts.makeChart(id, {
+        "type": "serial",
+        //"theme": "chalk",
+        //"marginRight": 40,
+        //"marginLeft": 40,
+        //"autoMarginOffset": 20,
+        "mouseWheelZoomEnabled":true,
+        "dataDateFormat": "YYYY-MM-DD",
+        "valueAxes": [{
+            "id": "v1",
+            "axisAlpha": 0,
+            "position": "left",
+            "ignoreAxisWidth":true,
+            "title": "Fuelled litres"
+        }],
+        "balloon": {
+            "borderThickness": 1,
+            "shadowAlpha": 10
+        },
+        "graphs": [{
+            "id": "g1",
+            "balloon":{
+              "drop":true,
+              "adjustBorderColor":false,
+              "color":"#ffffff"
+            },
+            "bullet": "round",
+            "bulletBorderAlpha": 1,
+            "bulletColor": "#000000",
+            "bulletSize": 5,
+            "hideBulletsCount": 50,
+            "lineThickness": 2,
+            "title": "Fuelled litres",
+            //"useLineColorForBulletBorder": true,
+            "valueField": "value",
+            "balloonText": "<span style='font-size:18px;'>[[value]] "+unit+"</span>"
+        }],
+        "chartScrollbar": {
+            "graph": "g1",
+            "oppositeAxis":false,
+            "offset":30,
+            "scrollbarHeight": 80,
+            "backgroundAlpha": 0,
+            "selectedBackgroundAlpha": 0.1,
+            "selectedBackgroundColor": "#888888",
+            "graphFillAlpha": 0,
+            "graphLineAlpha": 0.5,
+            "selectedGraphFillAlpha": 0,
+            "selectedGraphLineAlpha": 1,
+            "autoGridCount":true,
+            "color":"#AAAAAA"
+        },
+        "chartCursor": {
+            "pan": true,
+            "valueLineEnabled": true,
+            "valueLineBalloonEnabled": true,
+            "cursorAlpha":1,
+            "cursorColor":"#258cbb",
+            "limitToGraph":"g1",
+            "valueLineAlpha":0.2,
+            "valueZoomable":true
+        },
+        "valueScrollbar":{
+          "oppositeAxis":false,
+          "offset":50,
+          "scrollbarHeight":10
+        },
+        "categoryField": "date",
+        "categoryAxis": {
+            "parseDates": true,
+            "dashLength": 1,
+//            "minorGridEnabled": true
+        },
+        "export": {
+            "enabled": true
+        },
+        "dataProvider": data
+    });
+}
diff --git a/app/rollerverbrauch/templates/layout.html b/app/rollerverbrauch/templates/layout.html
index e44af45..2f4f726 100644
--- a/app/rollerverbrauch/templates/layout.html
+++ b/app/rollerverbrauch/templates/layout.html
@@ -94,6 +94,7 @@
 		<!-- 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="{{ url_for('static', filename='main.js') }}"></script>
     </head>
     <body>
 	    <nav class="navbar navbar-inverse navbar-fixed-top">
diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 417b583..b40700e 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -2,7 +2,7 @@
 
 {% block body %}
     <div id="content">
-        <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
+        <ul id="vehicle_tabs" class="nav nav-tabs" data-tabs="tabs">
             {% for vehicle in data %}
                 <li {% if loop.first %}class="active" {%endif %}>
                     <a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
@@ -11,7 +11,7 @@
                 </li>
             {% endfor %}
         </ul>
-        <div id="my-tab-content" class="tab-content">
+        <div id="vehicle_contetn" class="tab-content">
             {% for vehicle in data %}
                 <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                     <h3>{{vehicle.name}}</h3>
@@ -43,7 +43,27 @@
 							</tr>
 						</table>
 					</div>
-                </div>
+                    <ul id="charts_tabs" class="nav nav-tabs" data-tabs="tabs">
+                        <li class="active">
+                            <a href="#v{{vehicle.id}}_c1" id="i{{vehicle.id}}_c1" data-toggle="tab">
+                                Fuelled litres
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#v{{vehicle.id}}_c2" id="i{{vehicle.id}}_c2" data-toggle="tab">
+                                Odometer
+                            </a>
+                        </li>
+                    </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>
+                        </div>
+                        <div class="tab-pane " id="v{{vehicle.id}}_c2">
+					        <div id="chartdiv2" style="width:100%; height:500px;"></div>
+                        </div>
+                    </div>
+               </div>
             {% endfor %}
         </div>
     </div>
@@ -51,108 +71,45 @@
 
     <script type="text/javascript">
         jQuery(document).ready(function ($) {
-            $('#tabs').tab();
+            $('#vehicle_tabs').tab();
             if(window.location.hash != "") {
                   $('a[href="' + window.location.hash + '"]').click()
             }
           });
 
     </script>
-	<div id="chartdiv" style="width:100%; height:500px;"></div>
 	<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">
-var chart = AmCharts.makeChart("chartdiv", {
-    "type": "serial",
-    "theme": "patterns",
-    "marginRight": 40,
-    "marginLeft": 40,
-    "autoMarginOffset": 20,
-    "mouseWheelZoomEnabled":true,
-    "dataDateFormat": "YYYY-MM-DD",
-    "valueAxes": [{
-        "id": "v1",
-        "axisAlpha": 0,
-        "position": "left",
-        "ignoreAxisWidth":true
-    }],
-    "balloon": {
-        "borderThickness": 1,
-        "shadowAlpha": 0
-    },
-    "graphs": [{
-        "id": "g1",
-        "balloon":{
-          "drop":true,
-          "adjustBorderColor":false,
-          "color":"#ffffff"
-        },
-        "bullet": "round",
-        "bulletBorderAlpha": 1,
-        "bulletColor": "#FFFFFF",
-        "bulletSize": 5,
-        "hideBulletsCount": 50,
-        "lineThickness": 2,
-        "title": "red line",
-        "useLineColorForBulletBorder": true,
-        "valueField": "value",
-        "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
-    }],
-    "chartScrollbar": {
-        "graph": "g1",
-        "oppositeAxis":false,
-        "offset":30,
-        "scrollbarHeight": 80,
-        "backgroundAlpha": 0,
-        "selectedBackgroundAlpha": 0.1,
-        "selectedBackgroundColor": "#888888",
-        "graphFillAlpha": 0,
-        "graphLineAlpha": 0.5,
-        "selectedGraphFillAlpha": 0,
-        "selectedGraphLineAlpha": 1,
-        "autoGridCount":true,
-        "color":"#AAAAAA"
-    },
-    "chartCursor": {
-        "pan": true,
-        "valueLineEnabled": true,
-        "valueLineBalloonEnabled": true,
-        "cursorAlpha":1,
-        "cursorColor":"#258cbb",
-        "limitToGraph":"g1",
-        "valueLineAlpha":0.2,
-        "valueZoomable":true
-    },
-    "valueScrollbar":{
-      "oppositeAxis":false,
-      "offset":50,
-      "scrollbarHeight":10
-    },
-    "categoryField": "date",
-    "categoryAxis": {
-        "parseDates": true,
-        "dashLength": 1,
-        "minorGridEnabled": true
-    },
-    "export": {
-        "enabled": true
-    },
-    "dataProvider": [{% for stop in current_user.vehicles[0].pitstops %}{
+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);
 
-chart.addListener("rendered", zoomChart);
+zoomChart1();
 
-zoomChart();
+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);
 
-function zoomChart() {
-    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
+zoomChart2();
+
+function zoomChart2() {
+    chart2.zoomToIndexes(chart2.dataProvider.length - 40, chart2.dataProvider.length - 1);
 }
 	</script>
 
diff --git a/app/rollerverbrauch/tools.py b/app/rollerverbrauch/tools.py
index 0a51317..ff79704 100644
--- a/app/rollerverbrauch/tools.py
+++ b/app/rollerverbrauch/tools.py
@@ -11,6 +11,7 @@ class VehicleStats:
         self.overall_litres = 0
         self.average_litres_fuelled = 0
         self.average_litres_used = 0
+        self.pitstops = vehicle.pitstops
         if self.pitstop_count > 0:
             for pitstop in vehicle.pitstops:
                 self.overall_litres += pitstop.litres

From cc7d2620e8585e7ab01a02ec2288c2bf760535be Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <github@lusiardi.de>
Date: Mon, 2 May 2016 06:42:43 +0200
Subject: [PATCH 4/6] Worked on charts

---
 app/rollerverbrauch/filters.py                | 13 +++++
 app/rollerverbrauch/static/main.js            |  8 +--
 app/rollerverbrauch/templates/layout.html     | 28 ++++++++++
 app/rollerverbrauch/templates/statistics.html | 52 ++++++-------------
 app/rollerverbrauch/tools.py                  | 12 ++++-
 5 files changed, 73 insertions(+), 40 deletions(-)

diff --git a/app/rollerverbrauch/filters.py b/app/rollerverbrauch/filters.py
index 00a0e59..f3ce080 100644
--- a/app/rollerverbrauch/filters.py
+++ b/app/rollerverbrauch/filters.py
@@ -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)
diff --git a/app/rollerverbrauch/static/main.js b/app/rollerverbrauch/static/main.js
index dc9ca89..0724e5d 100644
--- a/app/rollerverbrauch/static/main.js
+++ b/app/rollerverbrauch/static/main.js
@@ -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>"
diff --git a/app/rollerverbrauch/templates/layout.html b/app/rollerverbrauch/templates/layout.html
index 2f4f726..8b7e982 100644
--- a/app/rollerverbrauch/templates/layout.html
+++ b/app/rollerverbrauch/templates/layout.html
@@ -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>
diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index b40700e..24fa010 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -57,13 +57,27 @@
                     </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>
+                </div>
             {% endfor %}
         </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 %}
diff --git a/app/rollerverbrauch/tools.py b/app/rollerverbrauch/tools.py
index ff79704..fca48c8 100644
--- a/app/rollerverbrauch/tools.py
+++ b/app/rollerverbrauch/tools.py
@@ -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))
 

From 706f30e2e26f8594927e269cc8495f16d1e3a75b Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Mon, 2 May 2016 07:59:14 +0200
Subject: [PATCH 5/6] switched off drop representation

---
 app/rollerverbrauch/static/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/rollerverbrauch/static/main.js b/app/rollerverbrauch/static/main.js
index 0724e5d..4f1b963 100644
--- a/app/rollerverbrauch/static/main.js
+++ b/app/rollerverbrauch/static/main.js
@@ -21,7 +21,7 @@ function createChart(id, data, unit) {
         "graphs": [{
             "id": "g1",
             "balloon":{
-              "drop":true,
+              "drop":false,
               "adjustBorderColor":false,
               "color":"#ffffff",
             },

From 6b861903afa0e2688892707d09752fe2710b8dd7 Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Mon, 2 May 2016 07:59:31 +0200
Subject: [PATCH 6/6] add consumption chart

---
 app/rollerverbrauch/templates/statistics.html | 15 +++++++++++++++
 app/rollerverbrauch/tools.py                  |  6 ++++++
 2 files changed, 21 insertions(+)

diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 24fa010..acbb91e 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -54,6 +54,11 @@
                                 Odometer
                             </a>
                         </li>
+                        <li>
+                            <a href="#v{{vehicle.id}}_c3" id="i{{vehicle.id}}_c3" data-toggle="tab">
+                                Consumption
+                            </a>
+                        </li>
                     </ul>
                     <div id="my-tab-content" class="tab-content">
                         <div class="tab-pane active" id="v{{vehicle.id}}_c1">
@@ -76,6 +81,16 @@
                                 not enough data.
                             {% endif %}
                         </div>
+                       <div class="tab-pane " id="v{{vehicle.id}}_c3">
+                            {% if vehicle.pitstop_count > 0 %}
+    					        <div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
+                                <script type="text/javascript">
+                                    {{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
+                                </script>
+                            {% else %}
+                                not enough data.
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
             {% endfor %}
diff --git a/app/rollerverbrauch/tools.py b/app/rollerverbrauch/tools.py
index fca48c8..d33c255 100644
--- a/app/rollerverbrauch/tools.py
+++ b/app/rollerverbrauch/tools.py
@@ -12,6 +12,7 @@ class VehicleStats:
         self.average_litres_fuelled = 0
         self.average_litres_used = 0
         self.litres = []
+        self.average_litres = []
         self.odometers = []
 
         if self.pitstop_count > 0:
@@ -24,6 +25,11 @@ class VehicleStats:
             self.overall_distance = vehicle.pitstops[-1].odometer - vehicle.pitstops[0].odometer
             self.average_distance = self.overall_distance / (self.pitstop_count - 1)
             self.average_litres_used = 100 * (self.overall_litres - vehicle.pitstops[0].litres) / self.overall_distance
+            for index in range(1, self.pitstop_count):
+                last_ps = vehicle.pitstops[index - 1]
+                current_ps = vehicle.pitstops[index]
+                self.average_litres.append(StatsEvent(current_ps.date, round(100 * current_ps.litres/(current_ps.odometer - last_ps.odometer),2)))
+                print(index)
 
 
 class StatsEvent: