Hugo shortcode for Chart.js

chart.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.9/jquery.csv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script>

<canvas id="{{ .Get "id"}}" width="{{ .Get "width" }}" height="{{ .Get "height" }}"></canvas>

<script>
    var rawCSV = '{{ (.Get "data") }}'

    var data, labels, dataPoints;
    var config;

    function drawCanvas() {
        config = {
            type: 'line',
            scaleFontColor: 'red',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Recorded HR Value',
                    pointStyle: "circle",
                    data: dataPoints,
                    backgroundColor: "rgba(255, 99, 132, 0.5)",
                    borderColor: "rgba(255, 99, 132, 0.5)",
                    showLine: false,
                    lineTension: 0,
                    borderWidth: 0,
                    pointRadius: 7,
                    pointHoverRadius: 13,
                }],
                borderWidth: 1
            },
            options: {
                responsive: true,
                legend: {
                    display: true,
                    labels: {
                        fontColor: 'rgb(255, 99, 132)'
                    },
                    position: "bottom"
                },
                hover: {
                    mode: 'index'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            displayFormats: {
                                second: 'HH:mm:ss',
                                minute: 'HH:mm:ss',
                                hour: 'HH:mm'
                            }
                        },
                        display: true,
                        gridLines: {
                            display: false
                        },
                        ticks:
                        {
                            fontColor: "#c6cddb"
                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: '#c6cddb5d'
                        },
                        ticks:
                        {
                            fontColor: "#c6cddb"
                        }
                    }]
                },
                title: {
                    display: true,
                    text: 'First Day of Data From the Apple Watch',
                    fontColor: "#c6cddb"
                }
            }
        };

        var ctx = document.getElementById('{{ .Get "id" }}').getContext('2d');
        window.myLine = new Chart(ctx, config);
    };

    function obtainData() {
        $.ajax({
            type: "GET",
            url: rawCSV,
            dataType: "text",
            success: function (response) {
                data = $.csv.toObjects(response);
                labels = _.map(data, 'endDate');
                dataPoints = _.map(data, 'value');

                drawCanvas();
            }
        });
    };

    $(document).ready(function () {
        obtainData();
    });

    window.onload = function () {

    };

</script>