Im trying to get a gauge to update realtime using javascript in rails, I
have got a starting point and the gauges move in realtime using a maths
random function. When I try to pull the data from the database It seems
that the mysql command is only being called once, it is updated once
then it doesnt move again. My code is below, any help would be great. I
will first post the variables first that are in the helper.
############################Variables#############################################
def timevariables()
Log.uncached do
@oneminute = 1.minutes.ago
@todaydate = 0.days.ago
@yesturdaydate = 1.days.ago
@lastweekdate = 1.week.ago
@lastmonthdate = 1.month.ago
@lastyeardate = 1.year.ago
@countlogsminute = Log.count(:conditions =>{ :datetime =>
@oneminute..@todaydate})
@countlogs24 = Log.count(:conditions =>{ :datetime =>
@yesturdaydate..@todaydate})
@countlogsweek = Log.count(:conditions =>{ :datetime =>
@lastweekdate..@todaydate})
@countlogsmonth = Log.count(:conditions =>{ :datetime =>
@lastmonthdate..@todaydate})
@countlogsyear = Log.count(:conditions =>{ :datetime =>
@lastyeardate..@todaydate})
end
end
#############################################################################
######################Gauge
Page###############################################
<%timevariables%>
<div id ="subtitle">Number of Events</div>
<script type="text/javascript">CODESITE_docEarlyProcessing();</script>
<script type="text/javascript"
src="http://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['gauge']}]}"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"~CCC
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body onload="load()" onunload="GUnload()">
<div id="chart_div" style="width: 400px; height: 120px;"></div>
<script type="text/javascript">
function Timer(){this.t={};this.tick=function(a,b){this.t[a]=[(new
Date).getTime(),b]};this.tick("start")}var loadTimer=new
Timer;window.jstiming={Timer:Timer,load:loadTimer};if(window.external&&window.external.pageT)window.jstiming.pt=window.external.pageT;if(window.jstiming)window.jstiming.report=function(g,d){var
c="";if(window.jstiming.pt){c+="&srt="+window.jstiming.pt;delete
window.jstiming.pt}if(window.external&&window.external.tran)c+="&tran="+window.external.tran;var
a=g.t,h=a.start;delete a.start;var i=[],e=[];for(var b in
a){if(b.indexOf("_")==0)continue;var
f=a[1];if(f)a[f][0]&&e.push(b+"."+(a[0]-a[f][0]));else
h&&i.push(b+"."+(a[0]-h[0]))}if(d)for(var j in d)c+="&"+j+"="+d[j];(new
Image).src=["http://csi.gstatic.com/csi?v=3","&s=gviz&action=",g.name,e.length?"&it="+e.join(",")+c:c,"&rt=",i.join(",")].join("")};
</script>
<script type="text/javascript">
var csi_timer = new window.jstiming.Timer();
csi_timer.name = 'docs_gauge';
google.setOnLoadCallback(drawChart);
function drawChart() {
csi_timer.tick('load');
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows(3);
data.setValue(0, 0, 'Memory');
data.setValue(0, 1, <%=@countlogs24-%>);
data.setValue(1, 0, 'CPU');
data.setValue(1, 1, 55);
data.setValue(2, 0, 'Network');
data.setValue(2, 1, 68);
csi_timer.tick('data');
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
csi_timer.tick('new');
var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90, minorTicks: 5, min:0, max:100};
chart.draw(data, options);
csi_timer.tick('draw');
window.jstiming.report(csi_timer);
setInterval(function() {
data.setValue(0, 1,<%=@countlogs24-%>);
chart.draw(data, options);
},5000);
setInterval(function() {
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
chart.draw(data, options);
}, 5000);
setInterval(function() {
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
chart.draw(data, options);
}, 26000);
}
</script>
<div id="map"></div>
</body>
</html>