Permalink
Browse files

We now connect the HighCharts graph to our server through SSE

  • Loading branch information...
penso committed May 23, 2013
1 parent 82f245c commit 9a2b95e13286348f67be140d7981813d5ded2c9d
View
@@ -12,6 +12,7 @@ gem 'sinatra-sse'
gem 'thin'
gem "highcharts-rails"
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Gems used only for assets and not required
# in production environments by default.
View
@@ -53,6 +53,9 @@ GEM
jquery-rails (2.2.1)
railties (>= 3.0, < 5.0)
thor (>= 0.14, < 2.0)
jquery-ui-rails (4.0.3)
jquery-rails
railties (>= 3.1.0)
json (1.8.0)
libv8 (3.11.8.17)
mail (2.4.4)
@@ -132,6 +135,7 @@ DEPENDENCIES
coffee-rails (~> 3.2.1)
highcharts-rails
jquery-rails
jquery-ui-rails
rails (= 3.2.12)
sass-rails (~> 3.2.3)
sinatra
@@ -1,47 +1,21 @@
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
//
//= require highcharts
//= require highcharts/highcharts-more
$(function() {
// Create the chart
$('#container').highcharts({
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
plotBorderWidth: 0,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
// Previous value +/- 10 max
y = Math.round(series.data.slice(-1)[0]['y'] + (Math.random() * 10 * (Math.round(Math.random()) * 2 - 1)));
if (y < 0) {
y = -y
}
series.addPoint([x, y], true, true);
}, 1000);
}
}
plotBorderWidth: 0
},
title: {
text: 'Live random data'
text: 'Live random data received through SSE'
},
xAxis: {
type: 'datetime'
@@ -71,14 +45,45 @@ $(function() {
name: 'Random data',
lineWidth: 2,
data: (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
var previous;
for( i = -60; i <= 0; i+=1) {
data.push([time + i * 1000, Math.round(Math.random() * 100)]);
// Initializing points 20 points to 0
var datapoints = [], time = (new Date()).getTime(), i=-20;
while(i <= 0) {
// time is milliseconds, we display the last 20 sec points
datapoints.push([(time + (i*1000)), 0]);
i += 1;
}
return data;
return datapoints;
})()
}]
});
if (!!window.EventSource) {
var source = new EventSource('/realtime-analytics');
var date = new Date();
// counter matches what you send in lib/realtime_analytics.rb
source.addEventListener('FOOBAR', function(e) {
x = (new Date().getTime());
y = parseFloat(e.data)
chart.series[0].addPoint([x, y], true, true);
$("#last_received").html(y);
$("#last_received").effect( "highlight", {}, 500 );
}, false);
source.addEventListener('message', function(e) {
console.log(e.data);
}, false);
source.addEventListener('open', function(e) {
console.log("SSE connection opened");
}, false);
source.addEventListener('error', function(e) {
if (e.readyState == EventSource.CLOSED) {
console.log("SSE connection closed");
}
}, false);
} else {
console.log("SSE not supported by your browser");
}
});
@@ -1,9 +1,15 @@
// Place all the styles related to the analytics controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
body {
font-family: "Times New Roman",Georgia,Serif;
}
#container {
width: 500px;
margin: auto;
height: 300px;
min-width: 300px;
}
#last_received_div {
margin: auto;
width: 500px;
text-align: center;
padding-top: 2em;
}
@@ -1,3 +1,4 @@
<div id="container"></div>
<div id="last_received_div">Last data received: <span id="last_received">-</span></div>
View
@@ -1,3 +1,5 @@
require 'realtime_analytics'
BlogSse::Application.routes.draw do
mount AnalyticsSSE => '/realtime-analytics'
root to: 'analytics#index'
end
View
@@ -0,0 +1,12 @@
class AnalyticsSSE < Sinatra::Base
include Sinatra::SSE
get '/' do
sse_stream do |out|
number = 0
EM.add_periodic_timer(2) do
number = 10 + rand(50)
out.push :event => 'FOOBAR', :data => number.to_s
end
end
end
end

0 comments on commit 9a2b95e

Please sign in to comment.