目指す姿（後編）

以下のように、chart.jsのバブルチャートをスライダーでグリグリ動かすだけでなく、「スタート/ストップ」ボタンによってそのスライダーを自動再生させる。（＆ループさせる）

スライダーを作成するところまでは前回の記事に記載しましたので、良ければそちらもご覧下さい！
https://qiita.com/supinngassenn/items/ef4bfce194b1def0cf03

説明

ステップ１

HTMLに「スタート/ストップ」ボタンを設置する。

<input type="button" value="スタート/ストップ" onclick="button_fnc()">

上記によって、ボタンを押すとjavaScript側のbutton_fnc()が呼ばれるようになる。(ステップ３で定義します)

ステップ２

スライダーを一つ横に動かす関数を定義する。スライダーが右端まで来たら左端に戻るように、if,elseで条件分岐している。
document.getElementById("slider_position").valueにスライダーの位置情報が入っているので、そこに＋１すればいい。ただし文字列で格納されているので、parseIntしないと「0,1,11,100,,,」と増えていってしまう。parseIntすれば「0,1,2,,,」と増えていってくれる。
なお、ここに出て来るbubble_chart_move()は前回作成した関数である。

// スライダーを一つ横に動かす。バーが右端まで来たら左端に戻る
var auto = function () {
  // 今回はスライダーの範囲を0~4と設定している
  if (document.getElementById("slider_position").value < 4) {
    // valueはSting型で保持されているので、プラス1する前にparseIntする
    document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
    bubble_chart_move();
  }
  else {
    document.getElementById("slider_position").value = 0;
    bubble_chart_move();
  }
}

ステップ３

ステップ１で登場したbutton_fnc()の処理を作成する。
また、一つのボタンで「スタート」と「ストップ」を切り替えられるように、button_flagによって制御する。
「auto_func = setInterval("auto()",1000);」という書き方によって、「auto()を1000ミリ秒ごとに呼び出す」ことができる。止めるときは「clearTimeout(auto_func);」を用いる。

// スタート/ストップボタンが押された時の処理
var auto_func;
var button_flag = 0; // 初期状態を0としておく
function button_fnc() {
    // ボタンが押された時、button_flag = 0なら自動再生スタート
    if (button_flag == 0) {
        auto_func = setInterval("auto()",1000);
        button_flag = 1;
    }
    // ボタンが押された時、button_flag = 1なら自動再生ストップ
    else {
        clearTimeout(auto_func);
        button_flag = 0;
    }
}

以上で完成です！

最終刑のコード

以下のコードをそのままコピペしてブラウザで表示すれば、実際に試すことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
<title>グラフ</title> 
</head>
  <body>
<h1>バブルチャート</h1>
    <canvas id="myBubbleChart"></canvas>
    <input type="button" value="スタート/ストップ" onclick="button_fnc()"><br>
    <div class="slidecontainer" id="sliders">
        <input type="range" min="0" max="4" value="0" step="1" class="slider" id="slider_position">時系列 : <span id="val_position">4週間前</span><br/>
      </div>
      
    <!-- CDN -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

    <script>

        // バブルチャートのデータ定義（4週間前、3週間前、2週間前、1週間前、現在の順で格納）
        var data1 = [[{x: 15,y: 60,r: 35}],
        [{x: 21,y: 50,r: 32}],
        [{x: 36,y: 44,r: 24}],
        [{x: 46,y: 34,r: 34}],
        [{x: 56,y: 24,r: 58}]]

        var data2 = [[{x: 45,y: 50,r: 15}],
        [{x: 57,y: 60,r: 25}],
        [{x: 69,y: 70,r: 35}],
        [{x: 70,y: 80,r: 55}],
        [{x: 79,y: 83,r: 45}]]

        var data3 = [[{x: 25,y: 20,r: 30}],
        [{x: 35,y: 22,r: 32}],
        [{x: 55,y: 24,r: 34}],
        [{x: 60,y: 34,r: 39}],
        [{x: 65,y: 34,r: 30}]]

        var data4 = [[{x: 10,y: 70,r: 25}],
        [{x: 12,y: 72,r: 22}],
        [{x: 15,y: 74,r: 24}],
        [{x: 20,y: 84,r: 20}],
        [{x: 35,y: 74,r: 40}]]

        var data5 = [[{x: 30,y: 40,r: 30}],
        [{x: 51,y: 42,r: 32}],
        [{x: 60,y: 44,r: 34}],
        [{x: 70,y: 54,r: 34}],
        [{x: 73,y: 64,r: 54}]]

        var data6 = [[{x: 35,y: 50,r: 15}],
        [{x: 47,y: 60,r: 25}],
        [{x: 59,y: 70,r: 35}],
        [{x: 69,y: 80,r: 35}],
        [{x: 73,y: 70,r: 35}]]

        var data7 = [[{x: 15,y: 25,r: 30}],
        [{x: 17,y: 35,r: 40}],
        [{x: 28,y: 45,r: 50}],
        [{x: 30,y: 35,r: 60}],
        [{x: 40,y: 45,r: 70}]]

        var data8 = [[{x: 34,y: 40,r: 25}],
        [{x: 42,y: 50,r: 15}],
        [{x: 50,y: 60,r: 10}],
        [{x: 60,y: 70,r: 30}],
        [{x: 65,y: 45,r: 20}]]

        var data9 = [[{x: 12,y: 15,r: 10}],
        [{x: 17,y: 25,r: 20}],
        [{x: 38,y: 35,r: 30}],
        [{x: 40,y: 45,r: 30}],
        [{x: 45,y: 55,r: 30}]]

        // バブルチャートのデータ取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
        function get_data1(num) {            
            return data1[num];
        }
        function get_data2(num) {             
            return data2[num];
        }
        function get_data3(num) {             
            return data3[num];
        }
        function get_data4(num) {            
            return data4[num];
        }
        function get_data5(num) {             
            return data5[num];
        }
        function get_data6(num) {             
            return data6[num];
        }
        function get_data7(num) {             
            return data7[num];
        }
        function get_data8(num) {             
            return data8[num];
        }
        function get_data9(num) {             
            return data9[num];
        }
        
        // スライドバーのデータ定義と取得関数（添え字によって4週間前、3週間前、2週間前、1週間前、現在を切替）
        var bar_position = ['4週間前','3週間前','2週間前', '1週間前', '現在']
        function get_bar_position(num) {             
            return bar_position[num];
        }
        
        // バブルチャート本体
        var ctx = document.getElementById("myBubbleChart");
        var myBubbleChart = new Chart(ctx, {
            type: 'bubble',
            data: {
                datasets: [
                {
                        label:"プロジェクト1",
                        backgroundColor: "rgba(128,128,0,0.8)",
                        data:get_data1(0)
                    },
                    {
                        label:"プロジェクト2",
                        backgroundColor: "rgba(255,255,0,0.8)",
                        data:get_data2(0)
                    },
                    {
                        label:"プロジェクト3",
                        backgroundColor: "rgba(0,255,255,0.8)",
                        data:get_data3(0)
                    },
                    {
                        label:"プロジェクト4",
                        backgroundColor: "rgba(0,255,0,0.8)",
                        data:get_data4(0)
                    },
                    {
                        label:"プロジェクト5",
                        backgroundColor: "rgba(255,0,0,0.8)",
                        data:get_data5(0)
                    },
                    {
                        label:"プロジェクト6",
                        backgroundColor: "rgba(0,0,255,0.8)",
                        data:get_data6(0)
                    },
                    {
                        label:"プロジェクト7",
                        backgroundColor: "rgba(0,128,0,0.8)",
                        data:get_data7(0)
                    },
                    {
                        label:"プロジェクト8",
                        backgroundColor: "rgba(128,0,128,0.8)",
                        data:get_data8(0)
                    },
                    {
                        label:"プロジェクト9",
                        backgroundColor: "rgba(0,0,128,0.8)",
                        data:get_data9(0)
                    }
                ]
            },
            options: {
                title: {
                    display: true,
                    text: 'QCD状況（バブルが大きいほどコスト状況が悪い）'
                },
                scales: {
                    xAxes: [{
                        scaleLabel:{
                            display: true,
                            labelString: "進捗"
                        },
                        ticks: {
                            suggestedMax: 100,
                            suggestedMin: 0,
                            stepSize: 10,
                            callback: function(value, index, values){
                                return  value +  '%'
                            }
                        }
                    }],
                    yAxes: [{
                        scaleLabel:{
                            display: true,
                            labelString: "品質"
                        },
                        ticks: {
                            suggestedMax: 100,
                            suggestedMin: 0,
                            stepSize: 10,
                            callback: function(value, index, values){
                                return  value +  '%'
                            }
                        }
                    }]
                }
            },
        })

        //バーの位置によってバブルチャートに表示するデータを切り替える
        function bubble_chart_move() {
            let position = document.getElementById("slider_position").value;     // sliderの値を取得
            document.getElementById("val_position").textContent = get_bar_position(position);      // 取得した値を"#val_position"のテキストに表示
            myBubbleChart.data.datasets[0].data = get_data1(position)
            myBubbleChart.data.datasets[1].data = get_data2(position)
            myBubbleChart.data.datasets[2].data = get_data3(position)
            myBubbleChart.data.datasets[3].data = get_data4(position)
            myBubbleChart.data.datasets[4].data = get_data5(position)
            myBubbleChart.data.datasets[5].data = get_data6(position)
            myBubbleChart.data.datasets[6].data = get_data7(position)
            myBubbleChart.data.datasets[7].data = get_data8(position)
            myBubbleChart.data.datasets[8].data = get_data9(position)
            myBubbleChart.update();
        }

        // スライダーを動かしたときのイベント
        var sliders = document.getElementById("sliders");
        sliders.addEventListener("input", function() {
            bubble_chart_move();
        }, false);

        // スライドバーを一つ横に動かす。バーが右端まで来たら左端に戻る
        var auto = function () {
            // 今回はスライドバーの範囲を0~4と設定している
            if (document.getElementById("slider_position").value < 4) {
                // valueはSting型で保持されているので、プラス1する前にparseIntする
                document.getElementById("slider_position").value = parseInt(document.getElementById("slider_position").value) + 1;
                bubble_chart_move();
            }
            else {
                document.getElementById("slider_position").value = 0;
                bubble_chart_move();
            }
        }

        // スタート/ストップボタンが押された時の処理
        var auto_func;
        var button_flag = 0; // 初期状態を0としておく
        function button_fnc() {
            // ボタンが押された時、button_flag = 0なら自動再生スタート
            if (button_flag == 0) {
                auto_func = setInterval("auto()",1000);
                button_flag = 1;
            }
            // ボタンが押された時、button_flag = 1なら自動再生ストップ
            else {
                clearTimeout(auto_func);
                button_flag = 0;
            }
        }
 
    </script>

  </body>
</html>