Create handlers for the Chart.onActivated and Chart.onDeactivated events. - Shared with Script Lab

Events - Chart Activate.yaml

name: Events - Chart Activate
description: Create handlers for the Chart.onActivated and Chart.onDeactivated events.
author: Rick-Kirkham
host: EXCEL
api_set: {}
script:
    content: |-
        $("#setup").click(() => tryCatch(setup));
        $("#register-onactivated-deactivated-handlers").click(() => tryCatch(registerActivatonHandlers));

        $("#create-pie-chart").click(() => tryCatch(createPieChart));
        $("#create-cylinder-chart").click(() => tryCatch(createCylinderChart));



        async function registerActivatonHandlers() {
            await Excel.run(async (context) => {

                const pieChart = context.workbook.worksheets.getActiveWorksheet().charts.getItem("Pie");

                pieChart.onActivated.add(chartActivated);
                pieChart.onDeactivated.add(chartDeactivated);

                await context.sync();

                console.log("Added handlers for Chart onActivated and onDeactivated events.");
            });
        }

        async function chartActivated(event) {
            await Excel.run(async (context) => {
                console.log("The pie chart is the active chart. ID: " + event.chartId);
            });
        }

        async function chartDeactivated(event) {
            await Excel.run(async (context) => {
                console.log("The pie chart is NOT active.");
            });
        }

        async function setup() {
            await Excel.run(async (context) => {
                await OfficeHelpers.ExcelUtilities.forceCreateSheet(context.workbook, "Sample");
                const sheet = context.workbook.worksheets.getItem("Sample");

                let expensesTable = sheet.tables.add('A1:E1', true);
                expensesTable.name = "SalesTable";

                expensesTable.getHeaderRowRange().values = [["Product", "Qtr1", "Qtr2", "Qtr3", "Qtr4"]];

                expensesTable.rows.add(null, [
                    ["Frames", 5000, 7000, 6544, 4377],
                    ["Saddles", 400, 323, 276, 651],
                    ["Brake levers", 12000, 8766, 8456, 9812],
                    ["Chains", 1550, 1088, 692, 853],
                    ["Mirrors", 225, 600, 923, 544],
                    ["Spokes", 6005, 7634, 4589, 8765]
                ]);

                if (Office.context.requirements.isSetSupported("ExcelApi", 1.2)) {
                    sheet.getUsedRange().format.autofitColumns();
                    sheet.getUsedRange().format.autofitRows();
                }

                createPieChart();
                createCylinderChart();

                sheet.activate();

                await context.sync();
            });
        }

        async function createCylinderChart() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getItem("Sample");
                const salesTable = sheet.tables.getItem("SalesTable");
                const dataRange = salesTable.getDataBodyRange();

                let chart = sheet.charts.add("CylinderCol", dataRange, "Auto");

                chart.name = "Cylinder";
                chart.setPosition("A27", "F40");
                chart.title.text = "Quarterly sales chart";
                chart.legend.position = "Bottom"
                chart.legend.format.fill.setSolidColor("white");
                chart.dataLabels.format.font.size = 15;
                chart.dataLabels.format.font.color = "black";
                chart.series.getItemAt(0).name = "Q1";
                chart.series.getItemAt(1).name = "Q2";
                chart.series.getItemAt(2).name = "Q3";
                chart.series.getItemAt(3).name = "Q4";

                await context.sync();
            });
        }

        async function createPieChart() {
            await Excel.run(async (context) => {
                const sheet = context.workbook.worksheets.getItem("Sample");
                const salesTable = sheet.tables.getItem("SalesTable");
                const dataRange = salesTable.getDataBodyRange();

                let chart = sheet.charts.add("Pie", dataRange, "Auto");

                chart.name = "Pie";
                chart.setPosition("A10", "F25");
                chart.title.text = "1st Quarter sales chart";
                chart.legend.position = "Bottom"
                chart.legend.format.fill.setSolidColor("white");
                chart.dataLabels.format.font.size = 15;
                chart.dataLabels.format.font.color = "black";

                await context.sync();
            });
        }

        /** Default helper for invoking an action and handling errors. */
        async function tryCatch(callback) {
            try {
                await callback();
            }
            catch (error) {
                OfficeHelpers.UI.notify(error);
                OfficeHelpers.Utilities.log(error);
            }
        }
    language: typescript
template:
    content: "<section class=\"ms-font-m\">\n    <p>This sample shows how to create handlers for the Chart onActivated and onDeactivated events.</p>\n</section>\n\n<section class=\"setup ms-font-m\">\n    <h3>Set up</h3>\n    <button id=\"setup\" class=\"ms-Button\">\n        <span class=\"ms-Button-label\">Setup</span>\n    </button>\n</section>\n\n<section class=\"samples ms-font-m\">\n    <h3>Try it out</h3>\n    <p>Click the button to register handlers for the pie chart's activated and deactivated events. Then click the chart to activate it. Watch the console. Finally, click the cylinder chart to deactivate the pie chart.</p>\n\t<button id=\"register-onactivated-deactivated-handlers\" class=\"ms-Button\">\n        <span class=\"ms-Button-label\">Register Activated/Deactivated handlers</span>\n    </button>\n</section>"
    language: html
style:
    content: |
        /* Your style goes here */
    language: css
libraries: |
    https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
    https://appsforoffice.microsoft.com/lib/beta/hosted/office.d.ts

    office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
    office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css

    core-js@2.4.1/client/core.min.js
    @types/core-js

    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.min.js
    @microsoft/office-js-helpers@0.7.4/dist/office.helpers.d.ts

    jquery@3.1.1
    @types/jquery