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) : null), 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)), }); }