In many cases, sometimes we need a Chart view that can explain in full the information needed. You may often use the threshold as a reference in achieving something.
In this post, I will try to use the threshold in a Chart that serves as a tool in presenting information that is easy to understand.
Like the previous post, I still use Chart.js as the Chart library to present data sets visually. Here I use an additional library called Chart Plugins Annotation. You can download it here.
After successfully downloading it, you can insert it into your project as a library. Then we can add a few lines in javascript to determine the threshold value. In this case, I tried to give a threshold value of 70.
$(function() {
var color = Chart.helpers.color;
var UserVsMyAppsData = {
labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
datasets: [{
label: 'Users',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
borderWidth: 1,
data: [53,117,79,56,45,89,61]
}, {
label: 'My Users',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
borderWidth: 1,
data: [43,105,76,50,33,97,52]
}]
};
var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
type: 'bar',
data: UserVsMyAppsData,
options: {
responsive: true,
legend: {
position: 'bottom',
display: true,
},
"hover": {
"animationDuration": 0
},
"animation": {
"duration": 1,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
title: {
display: false,
text: ''
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 70, // SET THRESHOLD
borderColor: 'rgb(75, 192, 192)',
borderWidth: 4,
label: {
enabled: false,
content: 'Threshold'
}
}]
}
}
});
});
After the line is added, we see in the web browser that the threshold is visible.
Thank you for reading my post! Happy Coding!
