Utilities.js

function initializeCounterComponent(container) {
    var chart = container.querySelector('#myChart');
    inicializarChart(chart);
    var button = container.querySelector("#counterClick");
    var title = container.querySelector("h1");
    if (button) {
        button.addEventListener("click", (e) => {
            let button = e.target;
            button.innerHTML = "Hello";
            title.innerHTML = "The button has been clicked!";
        });
    }

    var $dateStart = $(container.querySelector('#dateStart'));
    var $dateEnd = $(container.querySelector('#dateEnd'));

    $dateStart.datetimepicker(
        { useCurrent: false }
    );

    $dateEnd.datetimepicker();

    $dateStart.on("change.datetimepicker", function (e) {
        $dateEnd.datetimepicker('minDate', e.date);
    });
    $dateEnd.on("change.datetimepicker", function (e) {
        $dateStart.datetimepicker('maxDate', e.date);
    });
};

function inicializarChart(chart) {
    var ctx = chart.getContext('2d');

    var data = [0, 10, 5, 2, 20, 30, 45];

    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: data
            }]
        },

        // Configuration options go here
        options: {}
    });

}