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

@@ -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 %}