continued work ok charts
This commit is contained in:
parent
ef976299dc
commit
161cc16498
|
|
@ -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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -94,6 +94,7 @@
|
||||||
<!-- Latest compiled and minified JavaScript -->
|
<!-- Latest compiled and minified JavaScript -->
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
<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') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
||||||
|
<script src="{{ url_for('static', filename='main.js') }}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div id="content">
|
<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 %}
|
{% for vehicle in data %}
|
||||||
<li {% if loop.first %}class="active" {%endif %}>
|
<li {% if loop.first %}class="active" {%endif %}>
|
||||||
<a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
|
<a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
<div id="my-tab-content" class="tab-content">
|
<div id="vehicle_contetn" class="tab-content">
|
||||||
{% for vehicle in data %}
|
{% for vehicle in data %}
|
||||||
<div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
|
<div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
|
||||||
<h3>{{vehicle.name}}</h3>
|
<h3>{{vehicle.name}}</h3>
|
||||||
|
|
@ -43,6 +43,26 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</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>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -51,108 +71,45 @@
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
jQuery(document).ready(function ($) {
|
jQuery(document).ready(function ($) {
|
||||||
$('#tabs').tab();
|
$('#vehicle_tabs').tab();
|
||||||
if(window.location.hash != "") {
|
if(window.location.hash != "") {
|
||||||
$('a[href="' + window.location.hash + '"]').click()
|
$('a[href="' + window.location.hash + '"]').click()
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</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/amcharts.js"></script>
|
||||||
<script src="https://www.amcharts.com/lib/3/serial.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="https://www.amcharts.com/lib/3/themes/patterns.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var chart = AmCharts.makeChart("chartdiv", {
|
data1 = [{% for stop in current_user.vehicles[0].pitstops %}{
|
||||||
"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}}",
|
"date": "{{stop.date}}",
|
||||||
"value": {{stop.litres}}
|
"value": {{stop.litres}}
|
||||||
}{% if not loop.last %},{%endif%}
|
}{% if not loop.last %},{%endif%}
|
||||||
{% endfor%}
|
{% 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() {
|
zoomChart2();
|
||||||
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
|
|
||||||
|
function zoomChart2() {
|
||||||
|
chart2.zoomToIndexes(chart2.dataProvider.length - 40, chart2.dataProvider.length - 1);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ class VehicleStats:
|
||||||
self.overall_litres = 0
|
self.overall_litres = 0
|
||||||
self.average_litres_fuelled = 0
|
self.average_litres_fuelled = 0
|
||||||
self.average_litres_used = 0
|
self.average_litres_used = 0
|
||||||
|
self.pitstops = vehicle.pitstops
|
||||||
if self.pitstop_count > 0:
|
if self.pitstop_count > 0:
|
||||||
for pitstop in vehicle.pitstops:
|
for pitstop in vehicle.pitstops:
|
||||||
self.overall_litres += pitstop.litres
|
self.overall_litres += pitstop.litres
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue