Flot JSON data
187 views
Skip to first unread message
John Lewis
Aug 14, 2015, 10:29:52 AM8/14/15
to Flot graphs
Hi,
I have cycling route data I would like flot to display. So first I take the GPX and convert to JSON http://codebeautify.org/xmltojson/9f695a
Then I create this simple HTML and jQuery file http://pastie.org/10350647
But, only a box is displayed. I am new to this so any assistance would be appreciated.
Many thanks,
John
I have cycling route data I would like flot to display. So first I take the GPX and convert to JSON http://codebeautify.org/xmltojson/9f695a
Then I create this simple HTML and jQuery file http://pastie.org/10350647
But, only a box is displayed. I am new to this so any assistance would be appreciated.
Many thanks,
John
Ced
Aug 16, 2015, 5:19:55 PM8/16/15
to Flot graphs
You need to convert the GPX data into an object usable by flot.
Here is a sample function:
Here is a working example:
http://jsfiddle.net/2wvxa6yy/
Here is a sample function:
function gpxToFlot(gpx) {
var speed = {
data: [],
label: "Speed"
};
var elev = {
data: [],
label: "Elevation",
yaxis: 2
};
var points = gpx.gpx.trk.trkseg.trkpt;
for (var p=0; p<points.length; p++) {
// Use date.js to parse date/time string (http://www.datejs.com/)
var ts = Date.parse(points[p].time).getTime();
speed.data.push([ts, points[p].speed * 2]);
elev.data.push([ts, points[p].ele]);
}
return [speed, elev];
}Here is a working example:
http://jsfiddle.net/2wvxa6yy/
John Lewis
Aug 20, 2015, 9:47:03 PM8/20/15
to Flot graphs
Thank you so much for taking time to do this!
I have built the page then, but still nothing. Given you've shown a working jsfiddle equivalent, I can imagine I've not included something correctly.
I have built the page then, but still nothing. Given you've shown a working jsfiddle equivalent, I can imagine I've not included something correctly.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flot Line Chart</title>
<link href="examples.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>
<script type="text/javascript">
$(function() {
var gpx = {
"gpx": {
"time": "2015-08-12T18:30:08Z",
"trk": {
"name": "SpeedView",
"trkseg": {
"trkpt": [
{
"time": "2015-08-12T18:14:02Z",
"speed": "2.5",
"ele": "39",
"desc": "5 mph",
"_lat": "52.558019",
"_lon": "0.091800"
},
{
"time": "2015-08-12T18:14:04Z",
"speed": "3.0",
"ele": "39",
"desc": "6 mph",
"_lat": "52.558010",
"_lon": "0.091891"
},
{
"time": "2015-08-12T18:14:06Z",
"speed": "3.75",
"ele": "41",
"desc": "8 mph",
"_lat": "52.558004",
"_lon": "0.092013"
},
{
"time": "2015-08-12T18:14:08Z",
"speed": "3.5",
"ele": "42",
"desc": "7 mph",
"_lat": "52.558006",
"_lon": "0.092111"
}
]
}
},
"_version": "1.0",
"_creator": "SpeedView - http://codesector.com/speedview",
"_xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
"_xmlns": "http://www.topografix.com/GPX/1/0",
"_xsi:schemaLocation": "http://www.topografix.com/GPX/1/0 http://www.topografix.com/GPX/1/0/gpx.xsd"
}
};
var options = {
points: {
show: true
},
lines: {
show: true
},
xaxis: {
mode: "time"
},
yaxes: [{},{position:"right"}]
};
function gpxToFlot(gpx) {
var speed = {
data: [],
label: "Speed"
};
var elev = {
data: [],
label: "Elevation",
yaxis: 2
};
var points = gpx.gpx.trk.trkseg.trkpt;
for (var p=0; p<points.length; p++) {
// Use date.js to parse date/time string (http://www.datejs.com/)
var ts = Date.parse(points[p].time).getTime();
speed.data.push([ts, points[p].speed * 2]);
elev.data.push([ts, points[p].ele]);
}
return [speed, elev];
}
$.plot($("#placeholder"), gpxToFlot(gpx), options);
});
</script>
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages