Статус сервера кольцом

Кидаем скрипт chart в папку js.

Прикручиваем его к сайту в index.tpl.

<script type="text/javascript" src="{template}/js/chart.js"></script>

Так же в index.tpl копируем вот это. (112px это размер кругаля, меняйте под себя)

<div class="server server_{game}" data-online="{online}">
<div class="server_status">
<div class="server_status_rate">
<img src="{template}/images/server_rate_x100.png" alt="" />
</div>
<div class="server_status_value">
<canvas id="server2" height="112" width="112" style="width: 112px; height: 112px;"></canvas>
</div>
</div>
<div class="server_inner">
<div class="status_inner_value">
<span>OFF</span>
</div>
</div>
</div>
</div>

Это копируем в css. Необходимо будет править код, для достижения нужного положения кругаля на сайте.

#status {padding: 70px 0 0 0; height: 390px;}
.server {
width: 100px;
height: 100px;
margin: 0 auto;
right: 71px;
bottom: 83px;
position: relative;
float: right;
}
.server_status {
position: relative;
}
.server_status_value {
overflow: hidden;
position: absolute; z-index: 4;
top: 4px; left: 30px;
}
.server_status_rate {
width: 100%;
position: absolute; z-index: 3;
top: 0px; left: 0;
text-align: center;
}
.server_inner {
height: 22px; width: 100%;

position: absolute; z-index: 5;
bottom: 0; left: 0;

text-align: center;
}
.status_inner_value {
position: relative; z-index: 3;
height: 22px;
color: #d5ba97;
font: 10px/18px 'Minion Pro';
}