Journey Recording using GPS Tracking

Tue Dec 10, 2013 3:52 pm

Hi Joe,

The localStorage data is correct, should be working. Remove alerts and on 'results'
page change Dimension of the components 'panel_1', 'panel_3'.
Set height = auto and width = 100%.

Thu Dec 12, 2013 3:28 pm

Thanks Katya! The results and recordride pages are working wonderfully! The only thing that is odd is the elevation jplot chart. The scales are sort of mashed together. Is there a way to set the x and y axis to accommodate a nice broad range for elevation so this might not happen? Thanks!

Thu Dec 12, 2013 7:52 pm

Hello! The problem is that you're trying to show too many points. Looks like there is no way to show so many points on a little graph. Try to decrease number of points. For example for first graph change code to the following prevar maxPoints = 100;

var coordsArray = JSON.parse(localStorage.getItem("coordsArray"));
var startTime = coordsArray[0].time;
var points = [], j = 0, i, avrSpeed = 0;
var interval = Math.round(coordsArray.length/maxPoints);
for (i = 0; i < coordsArray.length; i++) {
if (j < interval) {
avrSpeed += coordsArray.speed;
j++;
} else {
points.push([(coordsArray.time - startTime) / 1000 / 60, avrSpeed/j]);
avrSpeed = 0;
j = 0;

Code: Select all

}
var plot1 = $.jqplot('plot1', [points], {
series: [{
showMarker: false
}],
axes: {
xaxis: {
label: 'Journey time (minutes)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
label: 'Speed (m/h)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});/pre

Fri Dec 13, 2013 4:52 am

Well, the only problem it seems is with the altitude jplot chart. So could I just amend the page show event to havecode
var maxPoints = 100;
/code
and then
code
var points = []; j = 0, i, alt = 0;
var interval = Math.round(coordsArray.length/maxPoints);
for (var i = 0; i < coordsArray.length; i++) {
if (j < interval) {
alt += coordsArray{}.alt;
j++;
} else {
points.push([(coordsArray.time - startTime) / 1000, alt = 0; j = 0;
}
}
for (var i = 0; i < coordsArray.length; i++) {
points.push([(coordsArray.time - startTime) / 1000, alt/j]);
alt = 0;
j = 0;
}
};
var plot2 = $.jqplot('plot2', [points], {
series: [{
showMarker: false
}],
axes: {
xaxis: {
label: 'Journey Time (minutes)',
labelRender: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
label: 'Altitude (feet)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
}
/codeWould this accommodate a proper range for the altitude jplot graph on results page?

Fri Dec 13, 2013 6:10 pm

Hello! Try this prevar points = [], j = 0, i, alt = 0;
var interval = Math.round(coordsArray.length/maxPoints);
for (var i = 0; i < coordsArray.length; i++) {
if (j < interval) {
alt += coordsArray.alt;
j++;
} else {
points.push([(coordsArray.time - startTime) / 1000 / 60, alt/j]);
alt = 0;
j = 0;
}
}
var plot2 = $.jqplot('plot2', [points], {
series: [{
showMarker: false
}],
axes: {
xaxis: {
label: 'Journey Time (minutes)',
labelRender: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
label: 'Altitude (feet)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});/pre

Mon Dec 16, 2013 5:30 am

Hey Maryna! So once I add this code, the jplot graph no longer shows up. This is what is displayed in logcat: Any thoughts? Thanks very much!

Mon Dec 16, 2013 9:13 am

Hello! Looks like you have a typo somewhere. The final code should look like this:
prevar maxPoints = 100;

var coordsArray = JSON.parse(localStorage.getItem("coordsArray"));

var startTime = coordsArray[0].time;
var points = [], j = 0, i, avrSpeed = 0;
var interval = Math.round(coordsArray.length/maxPoints);
for (i = 0; i < coordsArray.length; i++) {
if (interval < 1) {
points.push([(coordsArray.time - startTime) / 1000 / 60, coordsArray.speed]);
continue;
}
if (j < interval) {
avrSpeed += coordsArray.speed;
j++;
} else {
points.push([(coordsArray.time - startTime) / 1000 / 60, avrSpeed/j]);
avrSpeed = 0;
j = 0;

Code: Select all

}
var plot1 = $.jqplot('plot1', [points], {
series: [{
showMarker: false
}],
axes: {
xaxis: {
label: 'Journey time (minutes)',/pre

Mon Dec 16, 2013 5:14 pm

Thank you so much Maryna! It works wonderfully! It seemed so far away when it was first started, but now it's here! It's working! (mostly thanks to your team).

I have 2 more questions pertaining to this section of the app.

Must the altitude label on "recordride" page show the altitude from start? Or is there a way to show altitude difference from sea level?

Also, is there a way to share the graphs (i.e. a screenshot) once the graphs are populated on the "results" page?

I really really can't thank you all enough for your immense help. I wish I could throw a giant party and invite all of you!

Tue Dec 17, 2013 11:36 am

Hello!
1) [quote:]is there a way to show altitude difference from sea level[/quote] not sure, but you can try.
2) Yes, you can save as image prevar imgData = $('#plot1').jqplotToImageStr({});/preit returns base64 encoded string with image. You can send it where you need.

Tue Dec 17, 2013 11:21 pm

Thanks Maryna! I've added this to the top of page show event on results:
code
var imgData = $('#plot1').jqplotToImageStr({});
var imgData = $('#plot2').jqplotToImageStr({});/code

But I'm not really sure if it did what it was supposed to, if anything. I found this example on stackoverflow:

http://stackoverflow.com/questions/12...

Where the user cites an example code like this:
code
//after creating your plot do
var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
$('#imgChart1').append(imgElem); // append the img to the DOM/code

Is this applicable to my jqplot graphs?