====== Visualizer javascript ======
   * http://enja.org/2012/12/08/plotting-the-sensors-in-my-android-phone-with-d3-js-and-three-js/
   * https://github.com/enjalot/tributary/blob/master/sandbox/templates/inlet.handlebars#L198
   * http://www.fullscale.co/blog/2013/03/20/getting_started_with_elasticsearch_and_AngularJS_d3.html
   * http://www.fullscale.co/dangle/

  * https://github.com/cmaurer/angularjs-nvd3-directives


====== D3 Chart in angular ======
  * http://plnkr.co/edit/NeLZg9?p=preview
===== Angular & Directives =====
==== app.js ====
<code Javascript>
var nfcDemoApp = angular.module('nfcDemoApp', [
  'ngRoute',
  ...
  'nfcDemoApp.ModuleCarDirectives',
  ...
  'ui.router',
  'ui.bootstrap'
]);

</code>

==== car.acceleration.html ====
<code html>
<p>car.acceleration</p>

<style>
path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;

}

.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
}
.grid path {
	stroke-width: 0;
}
</style>

<acc-plot bind="plotData" on-click="filter" field="Tags" />
</code>

==== module-car/controller.js ====

<code Javascript>
CarFragmentControllers.controller('FragmentCarAccelerationController', ['$scope', 
	'$state', 'NFCComm', '$timeout',
	function ($scope, $state, NFCComm, $timeout) {
    		$scope.testdata = NFCComm.testdata;
		
		// Cordova Plugin
		var args = [{watch:true, data: "Acceleration"}];
		var fnSuccess = function(pluginResult) {
		//$scope.testdata = '';
		$scope.testdata = pluginResult;
		//alert("Success! " + pluginResult);
		// Refresh html immediately
		$scope.$apply();
		     //$scope.$watch('testdata', function () { alert($scope.testdata) });
		};
		
                var fnError = function(pluginResult) {
		  alert(pluginResult);
		};
		// Call native plugin
		$scope.getAccelerationData = function() {
		  NFCComm.registerNFCDataListener(
			args,
			fnSuccess,
			fnError					
			);
		};			
		
                /*
			$scope.getAccelerationData = (function() {
				return function() {
					NFCComm.registerNFCDataListener(
						args,
						fnSuccess,
						fnError					
						);
				};
			}());
			*/

			// first call may not succeed.
			//cordovaReady(function () {
				//TDxxx: exclusion for local test.
				$scope.getAccelerationData();
			//});

			/* test directives */
			 $scope.format = 'M/d/yy h:mm:ss a';
			/* -- */

			 /* Plot */
			$scope.plotData = [];

			function addOne() {
				var len = $scope.plotData.push({
					time: Date.now(),
					accx: 1 * Math.random()
				});

				if (len > 50) $scope.plotData.shift();
				$timeout(addOne, 250);
			}

			addOne();
			//- Plot End

			$scope.ui = $scope.ui || {};
			//$scope.ui.menu.isCollapsed = true;
		}]);

</code>

===== Graph drawing =====

<code Javascript>

// Acceleration Plot
angular.module('nfcDemoApp.ModuleCarDirectives')
.directive('accPlot', function() {
	return {
		restrict: 'E',
	scope: {
		onClick: '=',
	bind:    '=',
	field:   '@'
	},
	link: function(scope, element, attrs) {
		//element.text("Hello World!");
		var ch=65;
		var cw=1000;

		var margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

var svg = d3.select(element[0]) // replace element with svg.
	.append("svg")
	.attr("id", "accGraph")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("viewBox", "0 0 " + 
			(width + margin.left + margin.right) + " " +
			(height + margin.top + margin.bottom))
	.attr("preserveAspectRatio", "xMidYMid")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// draw x-/y-axis
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");

svg.append("g")			// Add the X Axis
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

svg.append("g")			// Add the Y Axis
	.attr("class", "y axis")
	.call(yAxis);
//- x-/y-axis


// make grid
function make_x_axis() {		
	return d3.svg.axis()
		.scale(x)
		.orient("bottom")
		.ticks(100)
}

function make_y_axis() {		
	return d3.svg.axis()
		.scale(y)
		.orient("left")
		.ticks(5)
}

svg.append("g")			// Add X Grid 
.attr("class", "grid")
	.attr("transform", "translate(0," + height + ")")
	.call(make_x_axis()
			.tickSize(-height, 0, 0)
			.tickFormat("")
			);

	svg.append("g")			// Add the Y Grid
	.attr("class", "grid")
	.call(make_y_axis()
			.tickSize(-width, 0, 0)
			.tickFormat("")
			);
	//- make grid

	/* Code from http://tributary.io/inlet/9343554 */

	// Make drawLines as fn to be called in watch().
	var drawLines = function(data) {

		var valueline = d3.svg.line()
			.x(function(d) { return x(d.time); })
			.y(function(d) { return y(d.accx); });

		//console.log(data);

		// Scale the range of the data
		x.domain(d3.extent(data, function(d) { return d.time; }));
		y.domain([0, d3.max(data, function(d) { return d.accx; })]);

		// clear old lines.
		svg.selectAll('path').remove();

		// Manipulate all paths' data
		svg.selectAll('path')
			// this is new data.
			.data(data)
			// loop through data. Add 'path'and 'attr' for each record.
			.enter().append('path')
			.attr('class', 'line')
			// add the line's drawing instruction.
			.attr('d', valueline(data));

		// redraw x-/y-Axis
		svg.select(".x")
			.call(xAxis);
		svg.select(".y")
			.call(yAxis);
	}; // drawLines	

scope.$watch('bind', function(data) {
	drawLines(data);
}, true); //- watch

// resize graph
var aspect = 660 / 400,
		chart = $("#accGraph");
$(window).on("resize", function() {
	var targetWidth = chart.parent().width();
	chart.attr("width", targetWidth);
	chart.attr("height", targetWidth / aspect);
});
} //-link

}; //-return
}); //- accPlot

</code>