-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathclient-Chart.html
executable file
·129 lines (101 loc) · 3.16 KB
/
client-Chart.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<head>
<title>Uber Simple Websockets</title>
<!-- Websocket -->
<script type="text/javascript">
// Config
var port = 9000;
var host = "ws://127.0.0.1:"+port; // No need to change this if using localhost
//Declare Variables
var socket;
var explodedValues = [0,0,0,0]; //initial value for the plot = 0
function init() {
try {
socket = new WebSocket(host);
console.log('WebSocket status '+socket.readyState);
socket.onopen = function(msg) {
console.log("Welcome - status "+this.readyState);
};
socket.onmessage = function(msg) {
console.log("Message Received: "+msg.data);
explodedValues = msg.data.split(';');
//console.log("Separate Values: "+explodedValues);
//convert strings to numbers
for(var i=0; i<explodedValues.length; i++) { explodedValues[i] = +explodedValues[i]; }
drawVisualization();
};
socket.onclose = function(msg) {
console.log("Disconnected - status "+this.readyState);
};
}
catch(ex){
console.log(ex);
}
}
function quit(){
if (socket != null) {
console.log("Close Socket");
socket.close();
socket=null;
}
}
function reconnect() {
quit();
init();
}
</script>
<!-- Google Chart -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table from the values received via websocket
var data = google.visualization.arrayToDataTable([
['Tracker', '1'],
['Apples', explodedValues[0]],
['Bananas', explodedValues[1]],
['Oranges', explodedValues[2]],
['Peaches', explodedValues[3]]
]);
// use a DataView to 0-out all the values in the data set for the initial draw
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () {return 0;}
}]);
// Create and draw the plot
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
var options = {
title:"Fruit Consumption",
width: 600,
height: 400,
bar: { groupWidth: "95%" },
legend: { position: "none" },
animation: {
duration: 800
},
hAxis: {
// set these values to make the initial animation smoother
minValue: 0,
maxValue: 10
}
};
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.draw(data, options);
});
chart.draw(view, options);
// you can handle the resizing here - no need to recreate your data and charts from scratch
$(window).resize(function() {
chart.draw(data, options);
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
</script>
</head>
<body onload="init()">
<h3>Uber Simple Websockets - Real Time Chart</h3>
<div id="visualization"></div>
<button onclick="reconnect()">Reconnect</button>
</body>
</html>