Update script.js

1 files changed, 74 insertions, 58 deletions

diff --git a/testing/SendLog/js/script.js b/testing/SendLog/js/script.js
index e368531..fb3bf71 100644
--- a/testing/SendLog/js/script.js
+++ b/testing/SendLog/js/script.js
@@ -1,60 +1,71 @@
 // Hrishi Hiraskar
-// 2 October 2016
+// 3 October 2016
 
-var eventSource;
-var chart_list = [];
 var chart_id_list = [];
-var data_list = [];
-var points_list = []
-var option_list = [];
-var INTERVAL = 100;
+var points_list = [];
+var INTERVAL = 50;
+var eventSource;
 
 var create_new_chart = function(id){
-	// Fuction to create and initialize Google chart on page
-	var data = new google.visualization.DataTable();
-	data.addColumn('number', 'x');
-	data.addColumn('number', 'y');
-	var options = {
-	      'title' : 'Figure '+id.toString(),
-	      curveType: 'function',
-	      hAxis: {
-		 title: 'x',
-	      },
-	      vAxis: {
-		 title: 'y',
-			     min: -2,
-			     max: 2
-	      },   
-	      'width':550,
-	      'height':400
-	};
-	document.body.innerHTML += "<div id='chart-"+id.toString()+"'></div>";
-	var chart = new google.visualization.LineChart(document.getElementById('chart-'+id.toString()));
-	chart.draw(data, options);
-	chart_id_list.push(id)
-	chart_list.push(chart);
-	data_list.push(data);
-	option_list.push(options);
-	points_list.push(new Queue);
+	// Function to create a new chart
+	$('#charts').append("<div id='chart-"+id.toString()+"'></div>");
+	$('#chart-'+id.toString()).highcharts({
+		chart: {
+			type: 'spline',
+			animation: false
+		},
+		title : {
+			  text: 'Figure '+id.toString()
+		   },
+		   xAxis : {
+			   title: {
+				 text: 'x'
+			   },
+			   min: 0,
+			   max: 30,
+			   tickInterval: 2
+		   },
+		   yAxis : {
+			  title: {
+				 text: 'y'
+			  },
+			  plotLines: [{
+				 width: 1,
+				 color: '#808080'
+			  }]
+		   },
+		   plotOptions : {
+				marker: {
+					enabled: false,
+				}
+		   },
+		   legend : {
+			  enabled: false
+		   },
+		   exporting : {
+			  enabled: false
+		   },
+		   series : [{
+			  name: "Series "+id.toString(),
+			  data: []  
+		   }]
+	});
+	chart_id_list.push(id);
+	points_list.push(new Queue());
 }
-
-var init = function(){
+        
+function init(){
 	eventSource = new EventSource('/SendLog');
 	// Start listening to server
 	eventSource.addEventListener("log", function(event){
-		// Parse data
 		var data = event.data.split(' ');
 		var id = parseInt(data[2]),
 			x  = parseFloat(data[8]),
 			y  = parseFloat(data[9]),
 			z  = parseFloat(data[10]);
-		// If there is new figure
-		// Create a new chart
 		if(chart_id_list.indexOf(id)<0)
 			create_new_chart(id);
-		// Get index of figure
 		var index = chart_id_list.indexOf(id);
-		// Add point to the queue
 		points_list[index].enqueue([x,y]);
 	}, false);	
 	// Stop listening
@@ -63,26 +74,31 @@ var init = function(){
 	}, false);
 	
 	setInterval(function(){
-		for(var  i=0;i<chart_id_list.length;i++){
-			// For each figure,  plot incoming points
-			// Get figure id
-			var id = chart_id_list[i];
-			// Get chart details
-			var chart   = new google.visualization.LineChart(document.getElementById('chart-'+id.toString())),
-			    data    = data_list[i],
-			    options = option_list[i],
-			    points  = points_list[i];
+		for(var i=0;i<chart_id_list.length;i++){
+			// For each chart
+			// Get id and points queue
+			var id = chart_id_list[i],
+				points = points_list[i];
+			// Get chart container	
+			var chart = $('#chart-'+id.toString()).highcharts();
+			// Get chart data
+			var series = chart.series[0];
 			// Add points
-			for(var j=0;j<10 && !points.isEmpty();j++){
-				  if(data.getNumberOfRows()>=40)
-					    data.removeRow(0);
-				  data.addRow(points.dequeue());
+			for(var j=0;j<500 && !points.isEmpty();j++){
+				var point = points.dequeue();
+				var x = point[0],
+					y = point[1];
+				// If there are more points
+				// Remove old points
+				if(series.data.length>=300)
+					series.removePoint(0, false);
+				series.addPoint([x,y], false);
 			}
-			// Plot the new points
-			chart.draw(data, options);
+			// Shift chart axis to display new values
+			if(x>30) chart.xAxis[0].setExtremes(Math.floor(x-30),Math.floor(x));
+			// Draw the chart
+			chart.redraw();
 		}
 	}, INTERVAL);
+	
 }
-
-// Initialize Google charts api
-google.charts.setOnLoadCallback(init);