chart.jsで描いたドーナツグラフをリアルタイムに更新し続けたい

前提・実現したいこと

現在Ruby on rails5でアプリケーションを作成しています。
そのアプリケーションの機能で経過時間ごとにchart.jsで描いたドーナツグラフをリアルタイムに更新し続けたいです。

具体的に説明するとビューのスタートボタンをクリックすると（今回この画像には載っていませんがしっかりボタンはあります）クリック時の時間がlocalstorageに保存され、それを元に経過時間を算出しドーナツグラフに反映させます。
今回は20分と言う時間制約の中でどれだけスタートしてから時間が経過したのか、比率をリアルタイムで更新し描写したいです。

※ここでいうリアルタイムで更新し描写したいとはドーナツグラフを表示し続けたまま経過時間と共に赤色の割合が少しづつ増えていきグレーの割合が少しづづ減って動いていくと言うことです。
（ドーナツグラフの赤色が経過時間の割合、グレーが残りの時間です）

どのようにすればドーナツグラフをリアルタイムに更新し続けられますか？

app/views/users/index.html.haml

%input{type: 'button', value: 'スタート', onclick: 'chartShowing();'}
%canvas#myPieChart

app/assets/javascripts/timer.js

var now = 0;
var elapsed = 0;
function chartShowing() {
   now = new Date();
　　var start = new Date();
　　localStorage.setItem("time", start.getTime());
　　elapsed = parseInt((new Date().getTime() - localStorage.getItem("time")) / 1000 / 60); //スタートボタン押してからの経過時間（分）
　　var ctx = document.getElementById("myPieChart");
		var myPieChart = new Chart(ctx, {
			type: 'doughnut',	//ドーナツチャートを描画する場合、typeに'doughnut'を指定する。
			data: {
				datasets: [{
						backgroundColor: [　
								"#FF0000",
								"#BDBDBD"
						],
						data: [elapsed, 20 - elapsed] //[経過時間,20 - 経過時間]
				}]
			},
			options: {
				title: {
					display: true,
					text: 'グラフ'
				}
			}
		})
}

行動規範の内容に同意します

回答1件

ベストアンサー

use Jquery

$(document).ready(function(){
setInterval(chartShowing, 1000);// 1sec
});

投稿2019/08/20 07:58

mgju

総合スコア11

Homaresan

2019/08/20 08:17

回答ありがとうございます！その方法だとドーナツグラフが表示し続けず1秒おきに一からドーナツグラフが描かれ続けてしまうのですが… $(document).ready(function(){ setInterval(chartShowing, 1000);// 1sec }); の記述を上記jsファイルのどこに記述すればうまくいきますか？