Skip to content

Commit

Permalink
We now connect the HighCharts graph to our server through SSE
Browse files Browse the repository at this point in the history
  • Loading branch information
penso committed May 23, 2013
1 parent 82f245c commit 9a2b95e
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 40 deletions.
1 change: 1 addition & 0 deletions Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 4 additions & 0 deletions Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
79 changes: 42 additions & 37 deletions app/assets/javascripts/application.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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");
}
});
12 changes: 9 additions & 3 deletions app/assets/stylesheets/analytics.css.scss
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions app/views/analytics/index.html.erb
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<div id="container"></div>

<div id="last_received_div">Last data received: <span id="last_received">-</span></div>
2 changes: 2 additions & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
require 'realtime_analytics'
BlogSse::Application.routes.draw do
mount AnalyticsSSE => '/realtime-analytics'
root to: 'analytics#index'
end
12 changes: 12 additions & 0 deletions lib/realtime_analytics.rb
Original file line number Diff line number Diff line change
@@ -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.