The problem is that inside the function that is called for every refresh you create a new instance of the chart. You should do it only once, and in the refresh, you should only call the draw() function of that chart.
Regards, VizGuy On Tue, Dec 29, 2009 at 8:32 PM, Mahesh <[email protected]> wrote: > 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]<google-visualization-api%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > > -- 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.
