Click on the button below to copy the code, and then paste it into your "Chart JS" block.
or
Download 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>