Orbit/app/views/admin/dashboards/_server_loading.erb

<div class="box-header">
    <h2>
        <i class="icons-book-2"></i>
        <span class="break"></span>
        <%= t(:server_usage) %>
    </h2>
</div>
<div class="box-content" style='overflow: hidden;'>
    <span id="cpu_usage" style="display:inline-block;margin: 0 auto"></span>
    <span id="mem_usage" style="display:inline-block;margin: 0 auto"></span>
    <span id="disk_usage" style="display:inline-block;margin: 0 auto"></span>
</div>
<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});

var UsageTpye = {'CPU':{'fn':'get_cpu_usage','chart':null,'id':'cpu_usage','interval':2000},
                                'Mem':{'fn':'get_mem_usage','chart':null,'id':'mem_usage','interval':5000},
                                'Disk':{'fn':'get_disk_usage','chart':null,'id':'disk_usage','interval':30000}};

$(function () {
    $.each(UsageTpye,function(type,option){
        option['chart'] = new google.visualization.Gauge(document.getElementById(option['id']));
        update_usage(type,option);

        setInterval(function() { update_usage(type,option); }, option['interval']);
    });
});

function update_usage(type,option){
    $.get('/admin/dashboards/'+option['fn'],function(usage){
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [type, parseInt(usage)]
        ]);

        var options = {
          width: 400, height: 180,
          redFrom: 80, redTo: 100,
          yellowFrom:60, yellowTo: 80,
          minorTicks: 5
        };
        
        option['chart'].draw(data, options);
    });
}
</script>