|
|
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
<title>Chart</title> |
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> |
|
<link href="https://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"> |
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script> |
|
|
|
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script> |
|
<style> |
|
body{ |
|
font-family: 'Nunito', sans-serif; |
|
font-size: 11pt; |
|
background: #fff; |
|
color: #333; |
|
} |
|
</style></head> |
|
<body> |
|
<center> |
|
<div class="col-sm-12 text-center"> |
|
<div id="line-chart" style="width:600px;"></div> |
|
</div> |
|
</body> |
|
|
|
|
|
<script> |
|
var time_line = []; |
|
var d = new Date(); |
|
var today_key = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate(); |
|
|
|
var config = { |
|
apiKey: "AIzaSyB3tPlA4D6DB_p1m1Q5ZVS6zQmqfsv9ZU4", |
|
authDomain: "maxim-83cfc.firebaseapp.com", |
|
databaseURL: "https://maxim-83cfc.firebaseio.com", |
|
projectId: "maxim-83cfc", |
|
storageBucket: "", |
|
messagingSenderId: "611688048290" |
|
}; |
|
firebase.initializeApp(config); |
|
|
|
|
|
var config = { |
|
xkey: 'y', |
|
ykeys: 'a', |
|
labels: ['Total Clicks', 'Time'], |
|
fillOpacity: 0.6, |
|
hideHover: 'auto', |
|
behaveLikeLine: true, |
|
resize: true, |
|
pointFillColors:['#ffffff'], |
|
pointStrokeColors: ['rgb(121,173,210)'], |
|
lineColors:['rgb(121,173,210)','#fff'] |
|
}; |
|
|
|
config.element = 'line-chart'; |
|
var shoreham_g = Morris.Line(config); |
|
|
|
|
|
function read_data(){ |
|
var ref = firebase.database().ref('Data'); |
|
ref.on("value", function(mainSnapshot){ |
|
mainSnapshot.forEach(function (snapshotValue) { |
|
if(today_key == snapshotValue.key){ |
|
console.log(snapshotValue.key, snapshotValue.val()); |
|
time_line = snapshotValue.val(); |
|
console.log(time_line); |
|
var data =[]; |
|
i=1; |
|
for(var k in time_line){ |
|
if(time_line.hasOwnProperty(k)){ |
|
data.push({y: today_key+" " + time_line[k], a: i++}); |
|
} |
|
} |
|
<!-- i=1; --> |
|
<!-- time_line.forEach(function(val){ --> |
|
<!-- console.log(val); --> |
|
<!-- data.push({y: today_key+" " + val, a: i++}); --> |
|
|
|
<!-- }); --> |
|
|
|
|
|
|
|
shoreham_g.setData(data); |
|
|
|
} |
|
}); |
|
//console.log(mainSnapshot); |
|
}); |
|
|
|
} |
|
|
|
$(document).ready(function(){ |
|
|
|
read_data(); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</html> |
