路由器的流量图制作

1.绘制svg 矢量图 bandwidth.svg

注释：绘制流量图的方法有三种，

1) ：直接将 svg  嵌入的html 页面中

2 )：通过使用embed/frame 等引用到页面中去；

<div class="cbi-table">
<embed id="bwsvg" src="/JS/bandwidth.svg" style="width:100%; height:300px; border:1px solid #000000; background-color:#FFFFFF" type="image/svg+xml"   pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<div style="text-align:right"><small id="scale">2 分钟绘图，1 秒刷新</small></div>
<br />
</div>

3)：在html 页面中动态的创建

<div class="cbi-table">
<embed id="bwsvg" style="width:100%; height:320px; border:1px solid #000000; background-color:#FFFFFF" type="image/svg+xml"  pluginspage="http://www.adobe.com/svg/viewer/install/" src="/JS/bandwidth.svg" />
<div style="text-align:right"><small id="scale">2 分钟绘图，1 秒刷新</small></div>
<br />

</div>

function LoadFrame()
{
<% if tcwebApi_get("WebCustom_Entry","isSVGSupported","h")  = "Yes" then %>
var svg = document.getElementById('bwsvg');
var line_25=document.createElementNS("http://www.w3.org/2000/svg","line");
 //水平线25%
if(line_25)
    {
    line_25.setAttribute('x1',0);
    line_25.setAttribute('y1',"25%");
    line_25.setAttribute('x2',"100%");
    line_25.setAttribute('y2',"25%");
    line_25.setAttribute("style","stroke:black;stroke-width:0.1");
    svg.appendChild(line_25);
    }
text_25=document.createElementNS("http://www.w3.org/2000/svg","text");
if(text_25)
{
text_25.setAttribute('x',15);
    text_25.setAttribute('y',"75%");
text_25.setAttribute("id","label_25");
text_25.setAttribute("style","fill:black; font-size:9pt");
svg.appendChild(text_25);

}
    //水平线50%
var line_50=document.createElementNS("http://www.w3.org/2000/svg","line");


if(line_50)
    {
    line_50.setAttribute('x1',0);
    line_50.setAttribute('y1',"50%");
    line_50.setAttribute('x2',"100%");
    line_50.setAttribute('y2',"50%");
    line_50.setAttribute("style","stroke:black;stroke-width:0.1");
    svg.appendChild(line_50);
    }
text_50=document.createElementNS("http://www.w3.org/2000/svg","text");
if(text_50)
{
text_50.setAttribute('x',15);
    text_50.setAttribute('y',"50%");
text_50.setAttribute("id","label_50");
text_50.setAttribute("style","fill:black; font-size:9pt");
svg.appendChild(text_50);

}
   //水平线75%
var line_75=document.createElementNS("http://www.w3.org/2000/svg","line");


if(line_75)
    {
    line_75.setAttribute('x1',0);
    line_75.setAttribute('y1',"75%");
    line_75.setAttribute('x2',"100%");
    line_75.setAttribute('y2',"75%");
    line_75.setAttribute("style","stroke:black;stroke-width:0.1");
    svg.appendChild(line_75);
    }


text_75=document.createElementNS("http://www.w3.org/2000/svg","text");
if(text_75)
{
text_75.setAttribute('x',15);
    text_75.setAttribute('y',"25%");
text_75.setAttribute("id","label_75");
text_75.setAttribute("style","fill:black; font-size:9pt");
svg.appendChild(text_75);

}
text_v=document.createElementNS("http://www.w3.org/2000/svg","text");
if(text_v)
{
// text_v.setAttribute("x",50);
// text_v.setAttribute("y","74%");
text_v.setAttribute("id","label_v");
text_v.setAttribute("style","fill:#FF0000; font-size:9pt");
svg.appendChild(text_v);

}

//折线
line_rx=document.createElementNS("http://www.w3.org/2000/svg","polyline");
if(line_rx)
{
line_rx.setAttribute("point","");
line_rx.setAttribute("id","rx");
line_rx.setAttribute("style","fill:red;fill-opacity:0.4;stroke:red;stroke-width:1");
svg.appendChild(line_rx);
}
line_tx=document.createElementNS("http://www.w3.org/2000/svg","polyline");
if(line_tx)
{
line_tx.setAttribute("point","");
line_tx.setAttribute("id","tx");
line_tx.setAttribute("style","fill:blue;fill-opacity:0.4;stroke:blue;stroke-width:1");
svg.appendChild(line_tx);
}
for (var i = step * 60; i < width; i += step * 60)
                {


var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');


line.setAttribute('x1', i-5);
line.setAttribute('y1', 0);
line.setAttribute('x2', i-5);
line.setAttribute('y2', '100%');
line.setAttribute('style', 'stroke:black;stroke-width:0.1');


var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', i + 5);
text.setAttribute('y', 15);
text.setAttribute('style', 'fill:#999999; font-size:9pt');
text.appendChild(document.createTextNode(Math.round(i / step / 60) + 'min'));


text_v.parentNode.appendChild(line);
text_v.parentNode.appendChild(text);


                }
label_rx_cur  = document.getElementById('rx_bw_cur');
label_rx_avg  = document.getElementById('rx_bw_avg');
label_rx_peak = document.getElementById('rx_bw_peak');


label_tx_cur  = document.getElementById('tx_bw_cur');
label_tx_avg  = document.getElementById('tx_bw_avg');
label_tx_peak = document.getElementById('tx_bw_peak');
             window.setTimeout(update_graph, 1000);
<% end if %>

}

function update_graph()
    {
console.log("...data_max="+data_max);
data_max=0;
    bwxhr.get('/cgi-bin/traffic.cgi', null,
    function(x, data)
    {
   
    var data_scale = 0;


    var data_rx_avg = 0;
    var data_tx_avg = 0;


    var data_rx_peak = 0;
    var data_tx_peak = 0;
    for (var i = data_stamp ? 0 : 1; i < data.length; i++)
    {


    if (data[i][TIME] <= data_stamp)
    continue;




    //。两个时间数据之间的差值
    var time_delta = data[i][TIME] - data[i-1][TIME];
    if (time_delta)
    {
    data_rx.push((data[i][RXB] - data[i-1][RXB]) / time_delta);
    data_tx.push((data[i][TXB] - data[i-1][TXB]) / time_delta);
    }
    }




    //从数组中截取data_rx.length 0~data_rx.length - data_wanted
    data_rx = data_rx.slice(data_rx.length - data_wanted, data_rx.length);
    data_tx = data_tx.slice(data_tx.length - data_wanted, data_tx.length);








    //寻找这组数据的最大值
    for (var i = 0; i < data_rx.length; i++)
    {

    data_max = Math.max(data_max, data_rx[i]);
    // data_max = Math.max(data_max, data_tx[i]);

    data_rx_peak = Math.max(data_rx_peak, data_rx[i]);
    data_tx_peak = Math.max(data_tx_peak, data_tx[i]);