Hi,
I am trying to reload the column chart using setinterval function but
I see that it is appending the graphs instead of refreshing the same
columnchart.
Please let me know how to come around this .
Using the same code I dont see any problem with Gauge
Here is the html code used :
<html>
<head>
<script>
function overall_status() {
var ThresholdQ = new google.visualization.Query('http://localhost:8080/
ProMonitor/csv?col=SN&url=overall_status.csv');
ThresholdQ.send(Server_Threshold);
}
</script>
<script>
function init()
{
overall_status();
}
</script>
<title>Monitoring Account</title>
<script type='text/javascript' src='http://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':
['annotatedtimeline,barchart,gauge,columnchart']});
google.setOnLoadCallback(init);
// Check for error and return datatable from query response
function getDataTable(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return(null);
}
return(response.getDataTable());
}
</script>
<!-- CSS -->
<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
media="print" />
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection" />
</head>
<body>
<div class="container">
<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[b]
[1];if(f)a[f][0]&&e.push(b+"."+(a[b][0]-a[f][0]));else h&&i.push(b+"."+
(a[b][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>
<div id="header" class="span-24 last">
<font style="BACKGROUND-COLOR: #e40e62" color="white" size=
+1><b>  SSO HEALTH  </b></font>
<h1 id="service_header">Monitoring Group</h1>
</div>
<div id="Server_ALARM" class="span-24 last">
<!--SERVER graph -->
<script type="text/javascript">
function reload_gauge() {
location.reload(true);
//overall_status();
}
var CPUAlarmChart;
var CPUAlarmTable, CPUAlarmView;
var csi_timer = new window.jstiming.Timer();
csi_timer.name = 'docs_gauge';
function Server_Threshold(response) {
csi_timer.tick('load');
CPUAlarmTable = getDataTable(response);
CPUAlarmView = new google.visualization.DataView(CPUAlarmTable);
csi_timer.tick('CPUAlarmView');
CPUAlarmChart = new google.visualization.ColumnChart
(document.getElementById('CPUAlarmGraph'));
csi_timer.tick('new');
var options = {width: 800, height: 500, greenFrom: 0, greenTo: 74,
redFrom: 90, redTo: 100,yellowFrom:75, yellowTo: 90, minorTicks: 5};
//CPUAlarmChart.draw(CPUAlarmView, options);
CPUAlarmChart.draw(CPUAlarmView, {width: 400, height: 240, is3D:
false, colors:['CC327F'], title: 'Performance'});
csi_timer.tick('draw');
window.jstiming.report(csi_timer);
}
setInterval("reload_gauge()",120000);
</script>
<div id="CPUAlarmGraph" style='width: 500px; height: 300px;'></div>
</div>
</div>
<div id="footerR" class="span-12 last">
<p class="small quiet" align="right">Updated Tuesday, 22-Dec-2009
14:42:28 EET</p>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
