billnoard.js를 이용한 실시간 Donut Chart

/* 도넛 차트 */

//도넛 차트를 실시간으로 갱신하기 위한 interval 메서드

function donutIntervalFun() {
donutInterval = window.setInterval('donut_update ()', 30000);
}

 

let donut_update = function() {

document.getElementById("DiskUsage").innerHTML ="<div id='disk_usage' style='position:relative; width:130%; height: 130%;'></div>"

 

disk_usage(30); //실제로 도넛 차트 메서드를 호출하는 부분

}

 

let donut_chart = null;
function donut_usage(remainDisk) {
donut_chart = bb.generate({
  data: {
        colors: {
                "Disk Usage" : "#2E9AFE",
                'Remaining charge' : "#E6E6E6"
                 },
    columns: [
                  ["Disk Usage",(100-Number(remainDisk))],
                  ['Remaining charge', Number(remainDisk)]
                ],
    type: "donut"
  },
  size: {
    height: 150,
    width: 150
  },
  donut: {
    label: {
     show : false
     }
  },
  legend: {
    show: false
  },
  bindto: "#disk_usage"
});
donut_chart.flush(true);
}