Journey Recording using GPS Tracking

[Joe Paisley]

Any updates today?

[Illya Stepanov]

Hi Joe - not yet ready, we'll update.

[Joe Paisley]

Any progress today?

[Kateryna Grynko]

Hi Joe,

Sorry, but still no news yet. I'll update.

[Oleg Danchenkov]

Hi Joe.
I'll give you small example of how to use jplot plugin. For example you want to show a chart with speed.
1) download file codehttps://bitbucket.org/cleonello/jqplot/downloads/jquery.jqplot.1.0.8r1250.zip/code
2) create new JavaScript files from these extracted files:
jquery.jqplot.js
plugins/jqplot.canvasTextRenderer.min.js
plugins/jqplot.canvasAxisLabelRenderer.min.js
3) create new CSS file from file
jquery.jqplot.min.css
4) You need to save average speed to localStorage. On page 'recordride' on geolocation1 Success event (in the bottom) change
codecoordsArray.push({'time': data.timestamp, 'lat': data.coords.latitude, 'lng': data.coords.longitude});
/code
to
precode
var speed = totalTime!=0 ? round(totalDist/(totalTime/(1000*3600))) : 0;
coordsArray.push({'time': data.timestamp, 'lat': data.coords.latitude, 'lng': data.coords.longitude, 'speed': speed});
/code/pre
5) Create New page with name 'plot'
6) add to page 'plot' panel with type=html
7) press 'Edit HTML' on PROPERTIES Panel and add this code on 'HTML Source' tab
precode
<div id="plot1"><&#47;div>
/code/pre
8) on Page show event for 'plot' page add this code
precode
var coordsArray = localStorage&#46;getItem("coordsArray");
var startTime = coordsArray[0]&#46;time;
var points = [];
for (var i=0; i<coordsArray&#46;length; i++){
points&#46;push([(coordsArray&#46;time - startTime) &#47; 1000, coordsArray&#46;speed]);
}
var plot = $&#46;jqplot('plot1', [points], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Journey time (sec)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
},
yaxis:{
label:'Speed (m&#47;h)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
}
}
});
/code/pre

[Joe Paisley]

I'm not sure what I'm doing wrong.

When I go to the "plot" page after pressing the pause button on the "recordride" page, nothing is populating in the panel I put there.

Also, the "altitude" label isn't populating any value. What's the next step?

The best I could do for a logcat screen capture of what's happening:

Thanks!

[Maryna Brodina]

Hello! No news yet... We'll update.

[Maryna Brodina]

There is a typo in item 8. Replace that code with the following
codetry{
var coordsArray = JSON&#46;parse(localStorage&#46;getItem("coordsArray"));
var startTime = coordsArray[0]&#46;time;
var points = [];
for (var i=0; i<coordsArray&#46;length; i++){
points&#46;push([(coordsArray&#46;time - startTime) &#47; 1000, coordsArray&#46;speed]);
}
var plot = $&#46;jqplot('plot1', [points], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Journey time (sec)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
},
yaxis:{
label:'Speed (m&#47;h)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
}
}
});
} catch ( e ){
} /code

There is a problem with JS file connection order. jquery.jqplot.js should be first, then jqplot.canvasTextRenderer.min.js and finally plugins/jqplot.canvasAxisLabelRenderer.min.js. To avoid this problem you can put all three files in one in order I mentioned above.

[Joe Paisley]

I fixed the code, but I'm not sure what you mean by putting the files in order. How do I do this?

[Kateryna Grynko]

Hi Joe,

Instead of three JS assets (jquery.jqplot.js, jqplot.canvasTextRenderer.min.js and jqplot.canvasAxisLabelRenderer.min.js) there should be only one asset where you need to compile the content of those three assets, and put content in order).