Forum | Appery.io

Any updates today?

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

Any progress today?

Hi Joe,

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

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

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!

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

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.

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

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).