Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
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%.
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!
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
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?
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
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!
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
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!
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.
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?