My Wiki!

Table of Contents

Visualizer javascript

D3 Chart in angular

Angular & Directives

app.js

var nfcDemoApp = angular.module('nfcDemoApp', [
  'ngRoute',
  ...
  'nfcDemoApp.ModuleCarDirectives',
  ...
  'ui.router',
  'ui.bootstrap'
]);

car.acceleration.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" />

module-car/controller.js

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;
		}]);

Graph drawing

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

Trace: • python_clean_start • graph_api_jscript • 0_java_begin • python_begin • embedded_programming_resources • git_svn_workflow • python_programming • javascript_patterns • generics • javascript_visualizer

Navigation