円グラフのプラグイン Circliful：レッスンの進み具合を表示する

<div class="row">
  <div class="col-md-6 col-xs-12">
    <h2>はじめての表計算 全4回</h2>
    <ul class="lessons">
      <li>第1回 表を作ってみよう <button type="button" class="btn switch">未完了</button></li>
      <li>第2回 足し算と合計     <button type="button" class="btn switch">未完了</button></li>
      <li>第3回 グラフを作る     <button type="button" class="btn switch">未完了</button></li>
      <li>第4回 印刷のしかた     <button type="button" class="btn switch">未完了</button></li>
    </ul>
    <p>完了したレッスン：<b id="cmp">0</b> / 4回<br>
       進み具合：<b id="ratio">0</b>%</p>
  </div>
  <div class="col-md-6 col-xs-12">
    <div id="circle" style="width:260px; max-width:100%;"></div>
  </div>
</div>

  // ② 完了ボタンを押したら、完了／未完了を切り替える
  $("button.switch").on("click", function(){
    $(this).toggleClass("ON");                                   // ON というクラスを付けたり外したり
    $(this).text($(this).hasClass("ON") ? "完了済" : "未完了");   // ボタンの文字も切り替え
    update();
  });

  // ③ 完了数を数えて、グラフと数字を更新する
  function update() {
    var total = $("button.switch").length;      // レッスンの数（4）
    var cmp   = $("button.switch.ON").length;   // 完了したレッスンの数
    var ratio = Math.round(cmp / total * 100);  // 進み具合（%）

    $("#circle .circle").attr("stroke-dasharray", (ratio * 3.6) + ", 20000");
    $("#circle .number").text(ratio);
    $("#cmp").text(cmp);
    $("#ratio").text(ratio);
  }