Chart.JS testing

by whelkaholism

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="chartjs-plugin-datalabels"></script>
 <h1>Bar Chart</h1>
 <div>
     <canvas 
       width="600"
       height="250"
       data-bind="chartJS: ChartOptions">
         
       </canvas>
     <div class="legend">
       <ul data-bind="chartJSLegend: ChartOptions">
         <li data-bind="click: toggle, text: label, style: { color: color }">dwedewd</li>
       </ul>     
     </div>
</div>

 
 <button data-bind="click: updateChart">
 Update <span data-bind="text: ChartType"></span> chart
 </button>
    <p>Using example code from <a href="http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/" target="_blank">tobiasahlin.com.</a></p>

JavaScript

(function()
{
    var _buildChart = function(el, buildoptions)
    {
        var chart = Chart.getChart(el);
        chart && chart.destroy();

        var cfg = buildoptions.cfg;

        var options = $.extend(true, {}, {
            type: 'bar',
            data: {},
            options: {
                scales: {
                    y: {
                        ticks: {
                            min: 0,
                        }
                    }
                }
            }
        }, cfg);

        options.data.datasets = ko.unwrap(cfg.source);
        var chart = new Chart(el, options);

        if (ko.isObservable(cfg.chart))
            cfg.chart(chart);
        else
            cfg.chart = chart;
    };

    ko.bindingHandlers.chartJS = {
        init:
            function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
            {
                var cfg = ko.unwrap(f_valueaccessor());
                $(el).toggleClass('ko-chart-js', !!cfg);

                if (!!cfg)
                    _buildChart(el, { cfg: cfg });
            },
        update:
            function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
            {
                var cfg = ko.unwrap(f_valueaccessor());
                var chart = Chart.getChart(el);

                if (cfg && chart)
                {
                    if (chart.type != ko.unwrap(cfg.type))
                        _buildChart(el, { cfg: cfg });
                    else
                        chart.update();
                }
            }

    };

    var CJSLegend = function(el, cfg, bindingcontext)
    {
        var _this = this;

        this.nodes = [];

        this.init = function()    
        {
            $(el).children().each(function(i, o) 
            {
                _this.nodes.push(o);
                o.remove();
            });

            var a = [];
            a.push($('<!-- ko with: $cfextension --><!-- ko foreach: series -->'));
          ...