-
-
Save bobcollopy/3a0bb8bfc66177a83af5 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
DataFish | |
</head> | |
<script src="//www.parsecdn.com/js/parse-1.4.0.min.js"></script> | |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 3px; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script> | |
Parse.initialize("6EnLIzyHrrOymib3oID8OOMxuQzv8jYajyCFksdC", "oNFjekXsjnZ2olcwqXrq76MQp6zOHEJUr3FQjhZu"); | |
var TestObject = Parse.Object.extend("DiverData"); | |
var testObject = new TestObject(); | |
var query = new Parse.Query(TestObject); | |
var data = []; | |
//get all data from parse. this is likely where you can place an offset. You want the second query of 1000 to be an object not array. | |
query.find({ | |
//on success populate data points | |
success:function(list) { | |
// console.log("LIST\n" + list); | |
for (var i = 0; i < list.length; i++) { | |
var point = {} | |
point.date = list[i].get("timeOfDataCollection" ); | |
point.pressure = list[i].get("pressure"); | |
data.push(point); | |
}//after we populate datapoints render the graph | |
drawGraph(); | |
} | |
}); | |
// var data = [ | |
// {'date': new Date(2015, 2, 25,13,00,0,0), 'temp': 100}, | |
// {'date': new Date(2015, 2, 25,13,02,0,0), 'temp': 90}, | |
// {'date': new Date(2015, 2, 25,13,03,0,0), 'temp': 80}, | |
// {'date': new Date(2015, 2, 25,13,04,0,0), 'temp': 81}, | |
// {'date': new Date(2015, 2, 25,13,05,0,0), 'temp': 62} | |
// ]; | |
//http://bl.ocks.org/mbostock/3883245 | |
function drawGraph() { | |
var margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var parseDate = d3.time.format("%d-%b-%y").parse; | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var line = d3.svg.line() | |
.x(function(d) { return x(d.date); }) | |
.y(function(d) { return y(d.pressure); }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
x.domain(d3.extent(data, function(d) { return d.date; })); | |
y.domain(d3.extent(data, function(d) { return d.pressure; })); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Price ($)"); | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("d", line); | |
} | |
</script> | |
<script> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment