fosslien/mbutton.html

## mbutton.html

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

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