Chart.jsによるグラフの自動更新

Question

ASP.NETでWebアプリケーションを作成しており、以下のhtmlでグラフを描写しています。
サーバ側では随時データを更新しており、
HomeControllerクラスのChartDataメソッドでデータを取得しています。
ページをリロードすればグラフが更新されるのですが、リロードせずに、あるインターバルでグラフだけ自動で更新するような処理をhtml側に記述する方法はないでしょうか。

<div class="row">
    <div class="col-md-6">
        <h2>Overview</h2>
        <canvas id="graph"></canvas>
    </div>
</div>

@section scripts {
    <script src="~/lib/chart/Chart.js"></script>
    <script src="~/lib/chart//Common.js"></script>

    <script>
        var c = document.getElementById("graph");
        var ctx = c.getContext("2d");
        var tData = $.getValues("/Home/ChartData");
        var myLineChart = new Chart(ctx, {
            type: 'line',
            data: tData,
        })
    </script>
}

Answer 1

余計なお世話的なレスかもしれませんが・・・

ASP.NET MVC でも、ToolTip など一部の機能を除けば、ASP.NET Web Forms で利用できる Chart が使えます。その利用も検討されてはいかがでしょう。

興味がありましたら以下の記事を見てください。

MVC で Chart を利用する方法
http://surferonwww.info/BlogEngine/post/2018/05/23/how-to-use-chart-control-in-mvc-application.aspx

Chart の画像を生成しそれを返すアクションメソッドの url を img 要素の src 属性に設定した結果が上の記事の画像です。

定期的に画像を取得して差し替えるようにすればよさそうです。

余計なお世話＆役に立たないレスでしたら失礼しました。

Comments

[andrewkasea1]

ご回答頂きありがとうございました。
今回はクライアント側がデータを受け取り描写する方針で実装を進めましたが、
大変参考になりました。
ありがとうございます。

Answer 2

定期的にデータを呼んでアップデートすればよいと思います。

【JavaScriptでsetIntervalを使う方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5537

【チャートの更新 · Chart.js 日本語ドキュメント】
https://misc.0o0o.org/chartjs-doc-ja/developers/updates.html

Comments

[andrewkasea1]

SetIntervalを使用して無事解決できました！
ご回答頂きありがとうございます。