function pointFromGeoJSON(geo) {
|
|
if(geo) {
|
|
return L.latLng(geo[1], geo[0])
|
|
}
|
|
}
|
|
|
|
function showBatteryGraph(response) {
|
|
|
|
var data = response.linestring;
|
|
|
|
var batteryStateBands = [];
|
|
var buckets = data.properties.map(function(d){return d.battery_state}).findRanges();
|
|
|
|
for(var i in buckets) {
|
|
for(var j=0; j<buckets[i].length; j++) {
|
|
switch(i) {
|
|
case "charging":
|
|
buckets[i][j].color = "rgba(193,236,171,0.4)";
|
|
break;
|
|
case "full":
|
|
buckets[i][j].color = "rgba(171,204,236,0.4)";
|
|
break;
|
|
case "unplugged":
|
|
buckets[i][j].color = "rgba(236,178,171,0.4)";
|
|
break;
|
|
default:
|
|
buckets[i][j].color = "#ffffff";
|
|
break;
|
|
}
|
|
buckets[i][j].from = new Date(data.properties[buckets[i][j].from].unixtime * 1000);
|
|
buckets[i][j].to = new Date(data.properties[buckets[i][j].to].unixtime * 1000);
|
|
batteryStateBands.push(buckets[i][j]);
|
|
}
|
|
}
|
|
|
|
$('#battery-chart').highcharts({
|
|
chart: {
|
|
height: 160,
|
|
zoomType: 'x',
|
|
panning: true,
|
|
panKey: 'shift'
|
|
},
|
|
title: {
|
|
text: '',
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
},
|
|
subtitle: {
|
|
text: '',
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
plotBands: batteryStateBands,
|
|
labels: {
|
|
rotation: -35,
|
|
style: {
|
|
fontSize: '8px'
|
|
}
|
|
}
|
|
},
|
|
yAxis: [{
|
|
title: {
|
|
text: 'Battery %'
|
|
},
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#808080'
|
|
}],
|
|
max: 100,
|
|
min: 0
|
|
},{
|
|
title: {
|
|
text: 'Speed'
|
|
},
|
|
plotLines: [{
|
|
value: 0,
|
|
width: 1,
|
|
color: '#dddddd'
|
|
}],
|
|
min: 0,
|
|
opposite: true
|
|
}],
|
|
series: [
|
|
{
|
|
name: 'Battery',
|
|
yAxis: 0,
|
|
data: data.properties.map(function(d,i){
|
|
return {
|
|
x: new Date(d.unixtime*1000), // i,
|
|
y: ('battery_level' in d ? Math.round(d.battery_level * 100) : 0),
|
|
state: d.battery_state,
|
|
location: data.coordinates[i]
|
|
}
|
|
}),
|
|
tooltip: {
|
|
animation: true,
|
|
pointFormatter: function(){
|
|
moveMarkerToPosition(this);
|
|
return this.state+'<br><b>'+this.y+'%</b>';
|
|
}
|
|
},
|
|
turboThreshold: 0,
|
|
lineWidth: 1,
|
|
color: '#a8cff4',
|
|
marker: {
|
|
enabled: true,
|
|
radius: 2,
|
|
fillColor: '#7cb5ec'
|
|
}
|
|
}].concat(speedSeries(response)).concat(collectEventSeries(response)),
|
|
});
|
|
}
|