Doughnut-Charts in Details-View
Posted: 2018-07-25 10:08
Hi,
in my timetracking application I am managing maintenance contracts and working times. Let's say a certain maintenance contract starts in April this year and has a runtime of 12 months, ending end of March next year. There is a given budget for the whole runtime. During this runtime I can add working times. They will be "booked against the given budget".
I needed some simple overview charts to see if I'm still in budget or not per contract. Therefore I have added some charts to my details view:
In this case I am using the chartJS library which I have included in my hooks/header_extras.php. You can download the library here: https://www.chartjs.org/
I am modifying $html in function timesheets_dv($selectedID, $memberInfo, &$html, &$args) of my timesheets-dv.js. For every doughnut-chart I have added a <canvas> element with a couple of data attributes.
As you can see the canvas has two classes: .chart and .chart-doughnut. Using jQuery $j(function() { /* ... */ }) I can select all canvas-elements having these classes, then get the data-attributes and render the charts using ChartJS-library.
On rendering I have already put the values, labels and colors into data-attributes. So there is no need to fetch data from the server via AJAX.
This is my code for rendering the doughnut-charts:
The timesheets-details view looks like this now:
I hope this gives you a good starting point for your own dashboards.
Kind Regards,
Jan
in my timetracking application I am managing maintenance contracts and working times. Let's say a certain maintenance contract starts in April this year and has a runtime of 12 months, ending end of March next year. There is a given budget for the whole runtime. During this runtime I can add working times. They will be "booked against the given budget".
I needed some simple overview charts to see if I'm still in budget or not per contract. Therefore I have added some charts to my details view:
In this case I am using the chartJS library which I have included in my hooks/header_extras.php. You can download the library here: https://www.chartjs.org/
Code: Select all
<script src="resources/charts/Chart.min.js"></script>
I am modifying $html in function timesheets_dv($selectedID, $memberInfo, &$html, &$args) of my timesheets-dv.js. For every doughnut-chart I have added a <canvas> element with a couple of data attributes.
Code: Select all
<canvas class="chart chart-doughnut" data-title="Verbrauch des Gesamt-Budgets (EURO)" data-labels="Verbraucht;Verfügbar" data-total="28645.99" data-value="5020.00" data-colors="green;#dedede"></canvas>
Code: Select all
$j('.chart-doughnut').each(function () {
var ctx = $j(this);
if (!ctx.length) return;
initDoughnutChart(ctx);
});
This is my code for rendering the doughnut-charts:
Code: Select all
function initDoughnutChart(ctx) {
var labels = ctx.data('labels').split(';');
var colors = ctx.data('colors') ? ctx.data('colors').split(';') : ["green", "#dedede"];
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
ctx.data('value'), (ctx.data('total') - ctx.data('value')),
],
backgroundColor: colors,
label: 'Dataset 1'
}],
labels: labels
},
options: {
responsive: true,
legend: {
position: 'right',
},
title: {
display: true,
text: (ctx.data('title'))
},
showTooltips: true,
animation: {
animateRotate: false,
animateScale: false
},
tooltip: {
enabled: true,
intersect: false,
show: true,
mode: 'dataset'
}
/* ... */
}
};
new Chart(ctx, config);
} // /initDoughnutChart
I hope this gives you a good starting point for your own dashboards.
Kind Regards,
Jan