1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
// Hrishi Hiraskar
// 2 October 2016
var eventSource;
var chart_list = [];
var chart_id_list = [];
var data_list = [];
var points_list = []
var option_list = [];
var INTERVAL = 100;
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);
}
var init = function(){
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
eventSource.addEventListener("DONE", function(event){
eventSource.close(); // Close connection
}, 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];
// Add points
for(var j=0;j<10 && !points.isEmpty();j++){
if(data.getNumberOfRows()>=40)
data.removeRow(0);
data.addRow(points.dequeue());
}
// Plot the new points
chart.draw(data, options);
}
}, INTERVAL);
}
// Initialize Google charts api
google.charts.setOnLoadCallback(init);
|
