Forum | Appery.io

My javascript on "page show" event is:
codeAppery("pause").hide();
Appery("start").hide();

try{
var coordsArray;
try {
coordsArray = JSON.parse(localStorage.getItem("coordsArray"));
if ({}.toString.call(coordsArray) !== "[object Array]") {
return;
}
}catch ( e ){
return;
}
var startTime = coordsArray[0].time;
var points = [];
for (var i=0; i<coordsArray&#46;length; i++){
points&#46;push([(coordsArray&#46;time - startTime) &#47; 1000 &#47; 60, coordsArray&#46;speed]);
}
var plot = $&#46;jqplot('plot2', [points], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Journey Time (minutes)',
labelRender: $&#46;jqplot&#46;CanvasAxisLabelRenderer},
yaxis:{
label:'Altitude (feet)',
labelRenderer: $jqplot&#46;CanvasAxisLabelRenderer}
}
})

var plot = $&#46;jqplot('plot1', [points], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Journey Time (minutes)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
},
yaxis:{
label:'Speed (m&#47;h)',
labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
}
}
});
} catch ( e ){
}/code


But the phone wouldn't proceed to the "record ride" page. What's happening? Thanks!

Hello! Could you clarify what is the problem you have in more details?

Sorry, I'd like to repeal that last post. I had a mistake in that javascript. The first "try {" didn't have a space in between the word and the bracket. The page navigation is working fine. This is where we stand:

The "record ride" page usually works fine. It displays data in the labels (all except altitude?) and when I press the "view ride data" button, the app navigates to the jplot graphs "results" page. Both jplot graphs appear, but neither displays data of any type. I try to screen capture the error event in logcat, but it's difficult to find when the phone is continually requesting gps coordinates after I press the "pause" button. What could be happening?

Thanks!

On your logcat screenshot there is no errors connected to results screen. Refresh logcat before navigating to results screen. Check what you have in localStorage variable (add an alert or do console.log() to see what you have in localStorage variable coordsArray). Add an alert or do console.log() to check value of coordsArray variable.

I get this in Chrome developer tools at the "record ride" page: and then this on the "results" page Does this mean that coordsArray is not defined? How do I define it?

coordsArray is a local variable that's why console.log(coordsArray); you would need to add to code on page show event on results screen after this line:
precoordsArray = JSON&#46;parse(localStorage&#46;getItem("coordsArray"));/pre
not just run in console.

Excellent! The jplot graphs chart data. I'm glad this cross domain issue is solved! Although, the second jplot graph charts the same information as the first. And the "altitude" label still doesn't show any data. What's happening? Thanks!

Hello!
"the second jplot graph charts the same information as the first" - what code you use to sort first and second graph?
""altitude" label still doesn't show any data" do you mean it doesn't return results from geolocation service or incorrectly fill in your array with data?

1. My javascript on the "results" page looks like this:
   code
   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 plot1 = $&#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
   }
   }
   });
   var plot2 = $&#46;jqplot('plot2', [points], {
   series: [{
   showMarker: false
   }],
   axes: {
   xaxis: {
   label: 'Journey Time (minutes)',
   labelRender: $&#46;jqplot&#46;CanvasAxisLabelRenderer
   },
   yaxis: {
   label: 'Altitude (feet)',
   labelRenderer: $&#46;jqplot&#46;CanvasAxisLabelRenderer
   }
   }
   });/code
   
   Then I put code <div id="plot1"><&#47;div> and <div id="plot2"><&#47;div> /code respectively in each panel component.

   1. The label doesn't show any data from geolocation service. The top jplot array is meant to show "average speed over time." The bottom jplot array is meant to show "altitude change over time. The bottom jplot array currently only shows the same graph data as the top panel on the "results" page.

Hello! You don't fill in points array for the second graph. In your code before this line prevar plot2 = $&#46;jqplot('plot2', [points], {/pre you have to add code to retrieve new poins array. We don't know how in your coordsArray array variable for storing altitude is called. In code on geolocation service on success event you save array coordsArray with code we suggested:
precoordsArray&#46;push({'time': timeStamp, 'lat': data&#46;coords&#46;latitude, 'lng': data&#46;coords&#46;longitude, 'speed': speed});/pre
here is not saved altitude valiue. You have to rewrite this code to save altitude under some name (for example 'alt'). Then on result page before line prevar plot2 = $&#46;jqplot('plot2', [points], {/pre you have to add the following code prepoints = [];
for (var i = 0; i < coordsArray&#46;length; i++) {
points&#46;push([(coordsArray&#46;time - startTime) &#47; 1000, coordsArray&#46;alt]);
}/pre