Office 365 Access アプリ -48- Access 用コンテンツ アプリ - 2

"Access アプリ / Access app" だけだど表現が乏しいから、"Access 用コンテンツ アプリ / Contents apps for Access" を使ってグラフの表示をやってみた。
スクラッチで実装するのは避けて Chart.js を使ってみることにした。Canvas を使用するけど、

Office 365 と Internet Explorer に関する FAQ

にある通り対応については問題なかろうかと。
で、出来上がり。

いろいろ決め打ちではあるけれども、

Bindings.addFromSelectionAsync メソッド / Bindings.addFromSelectionAsync method

を使うとバインドできるのは ビューのレコードソースなのでお試しであればちょうどよいかな。
表示に使用するフィールドも無理やりなので、本来ならば、

Bindings.addFromPromptAsync メソッド / Bindings.addFromPromptAsync method

で指定できるようにしておかないと。

(function () {
    "use strict";

    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();
            addBindingFromSelection();
        });
    };

    function addBindingFromSelection() {
        Office.context.document.bindings.addFromSelectionAsync(
            Office.BindingType.Table,
            { id: "myBinding" },
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    result.value.addHandlerAsync(
                        Office.EventType.BindingSelectionChanged,
                        drawChart
                        );
                    drawChart();
                }
            });
    }

    function drawChart() {
        Office.select("bindings#myBinding").getDataAsync(
            { rows: "thisRow" },
            function (result) {
                if (result.status === Office.AsyncResultStatus.Succeeded) {
                    var labelData = result.value.headers[0];
                    labelData.shift();
                    var pointData = result.value.rows[0];
                    pointData.shift();

                    var chartData =
                        {
                            labels: labelData,
                            datasets:
                                [{
                                    fillColor: "rgba(151, 187, 205, 0.5)",
                                    strokeColor: "rgba(151, 187, 205, 1)",
                                    pointColor: "rgba(151, 187, 205, 1)",
                                    pointStrokeColor: "#fff",
                                    data: pointData
                                }]

                        };

                    var options =
                        {
                            scaleOverride: true,
                            scaleSteps: 2,
                            scaleStepWidth: 5,
                            scaleStartValue: 0,
                            pointLabelFontFamily: "'Segoe UI'",
                            pointLabelFontSize: 16
                        };

                    var ctx = document.getElementById("chart-radar").getContext("2d");
                    var myChart = new Chart(ctx).Radar(chartData, options);
                }
            });
    }
})();