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 -->
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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,6 +43,26 @@
|
|||
</tr>
|
||||
</table>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue