Chart JS HTML Block Code

<div class="well well-sm">
    <div class="row">
        <div class="col-md-6">
            <h5>Year</h5>
            <div class="btn-group btn-group-xs year-buttons">
                
                

                
                    
                        <div class="btn btn-primary btn-sm" data-id="2024">2024</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2023">2023</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2022">2022</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2021">2021</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2020">2020</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2019">2019</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2018">2018</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2017">2017</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2016">2016</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2015">2015</div>
                    
                
                    
                        <div class="btn btn-default btn-sm" data-id="2014">2014</div>
                    
                
            </div>
        </div>
        <div class="col-md-6">
            <h5>Group By</h5>
            <div class="btn-group btn-group-xs  groupby-buttons">
                <div class="btn btn-default btn-sm default" data-id="1">Week</div>
                <div class="btn btn-default btn-sm" data-id="2">Month</div>
                <div class="btn btn-default btn-sm" data-id="3">Quarter</div>
            </div>
        </div>
    </div>
</div>

<div class="chart-container" style="position: relative; height:500px; width:100%;">
    <canvas id="attendanceChart1"></canvas>
</div>

<script>
(function() {
    var groupBy = function(xs, key) {
        return xs.reduce(function(rv, x) {
            (rv[x[key]] = rv[x[key]] || []).push(x);
            return rv;
        }, {});
    };
    
    var config = {
        type: 'line',
        data: {
            datasets: []
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: {
                duration: 2500,
            },
            legend: {
                position: 'right'
            },
            tooltips: {
                callbacks: {
                    title: function(tooltipItem, data) {
                        var groupby = $('.groupby-buttons .btn-primary').map(function () { return $(this).data('id'); }).get().join(',');
                        var groupByLabel = groupby;
                        if (groupby == 1) {
                            var groupByLabel = 'Week';
                        }
                        else if (groupby == 2) {
                            var groupByLabel = 'Month';
                        }
                        else if (groupby == 3) {
                            var groupByLabel = 'Quarter';
                        }
                        
                        if ( tooltipItem[0].datasetIndex === 0 ) {
                            return groupByLabel + " " + tooltipItem[0].xLabel;
                        }
                        else {
                            return groupByLabel + " " + tooltipItem[0].xLabel + " (" + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].dateLabel + ")";
                        }
                    },
                    label: function(tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + " Total: $" + Number(tooltipItem.yLabel).toFixed(2).replace(/./g, function(c, i, a) {
                            return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                        });
                    }
                }
            },
            scales: {
                xAxes: [{
                    type: 'linear',
                    ticks: {
                        beginAtZero: false,
                        stepSize: 1
                    },
                    scaleLabel: {
                        display: true
                    }
                } ],
                yAxes: [{
                    ticks: {
                      callback: function(value, index, values) {
                        if(parseInt(value) >= 1000){
                          return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                        } else {
                          return '$' + value;
                        }
                      }
                    }
                  }]
            }
        }
    };
    
    var chartColors = [
        "rgb(54, 162, 235)",
        "rgb(75, 192, 192)",
        "rgb(255, 159, 64)",
        "rgb(153, 102, 255)",
        "rgb(255, 99, 132)",
        "rgb(255, 205, 86)",
        "rgb(19, 141, 117)",
        "rgb(160, 64, 0)",
        "rgb(27, 79, 114)",
        "rgb(210, 180, 222)" ];

    var ctx = document.getElementById("attendanceChart1").getContext('2d');
    var chart = new Chart(ctx, config);
    
    var getTotalDataSet = function(rows) {
        var groups = groupBy(rows, 'XValue');
        var dataset = { label: 'House', borderWidth: 4, fill: false, data: [] };

        for (k in groups) {
            var value = 0;
            groups[k].forEach((row) => {
                value += row.Value;
            });
            dataset.data.push({ x: k, y: value });
        }
        
        return dataset;
    };
    
    var addDataSetsInGroups = function(groups) {
        for (k in groups) {
            var dataset = { label: k, borderWidth: 2, fill: false, data: [] };

            dataset.borderColor = chartColors[config.data.datasets.length % chartColors.length];
            dataset.backgroundColor = dataset.borderColor;
            dataset.lineTension = 0;
            
            groups[k].forEach((row) => {
                dataset.data.push({ x: row.XValue, y: row.Value, dateLabel: row.XValueLabel });
            });

            chart.data.datasets.push(dataset);
        }
    };
    
    var updateChart = function() {
        var year = '';
        var accounttype = '';
        
        year = $('.year-buttons .btn-primary').map(function () { return $(this).data('id'); }).get().join(',');
        accounttype = $('.accounttype-buttons .btn-primary').map(function () { return $(this).data('id'); }).get().join(',');
        groupby = $('.groupby-buttons .btn-primary').map(function () { return $(this).data('id'); }).get().join(',');
	
	    console.log( '/Webhooks/Lava.ashx/FinancialTrendsCampus?Year=' + year + '&GroupBy=' + groupby );

        $.ajax({
            url: '/Webhooks/Lava.ashx/FinancialTrendsCampus?Year=' + year + '&GroupBy=' + groupby,
            success: function (rows) {
                chart.data.datasets = [];

                var ds = getTotalDataSet(rows);
                    ds.borderColor = chartColors[config.data.datasets.length % chartColors.length];
                    ds.backgroundColor = ds.borderColor;
                    ds.hidden = true;
                    ds.lineTension = 0;
                    chart.data.datasets.push(ds);

                    addDataSetsInGroups(groupBy(rows, 'Campus'));
                    
                // update x axis label
                var xLabel = groupby;
                if (groupby == 1) {
                    var xLabel = 'Week';
                }
                else if (groupby == 2) {
                    var xLabel = 'Month';
                }
                else if (groupby == 3) {
                    var xLabel = 'Quarter';
                }

                chart.options.scales.xAxes[0].scaleLabel.labelString = xLabel;
                chart.update();
            }
        });
    };

    Sys.Application.add_load(function () {
        $('.accounttype-buttons .btn.default').addClass('btn-primary').removeClass('btn-default');
        $('.year-buttons .btn.default').addClass('btn-primary').removeClass('btn-default');
        $('.groupby-buttons .btn.default').addClass('btn-primary').removeClass('btn-default');

        $('.year-buttons .btn').on('click', function () {
            $('.year-buttons .btn').removeClass('btn-primary').addClass('btn-default');
            $(this).toggleClass('btn-default').toggleClass('btn-primary');

            updateChart();
        });
        
        $('.accounttype-buttons .btn').on('click', function () {
            if ($(this).hasClass('btn-primary') && $('.accounttype-buttons .btn-primary').length == 1) {
                return false;
            }

            $(this).toggleClass('btn-default').toggleClass('btn-primary');

            updateChart();
        });
        
        $('.groupby-buttons .btn').on('click', function () {
            $('.groupby-buttons .btn').removeClass('btn-primary').addClass('btn-default');
            $(this).toggleClass('btn-default').toggleClass('btn-primary');

            updateChart();
        });
        
        updateChart();
    });
})();
</script>