Doughnut-Charts in Details-View

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
AppGini Super Hero
AppGini Super Hero
Posts: 535
Joined: 2018-07-06 06:03
Location: Kiel, Germany

Doughnut-Charts in Details-View

Post by jsetzer » 2018-07-25 10:08


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:

charts below fieldset in detailsview
chrome_2018-07-25_11-15-59.png (114.04 KiB) Viewed 1401 times

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:

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>
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.

Code: Select all

$j('.chart-doughnut').each(function () {
        var ctx = $j(this);
        if (!ctx.length) return;
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:

Code: Select all

function initDoughnutChart(ctx) {
    var labels ='labels').split(';');
    var colors ='colors') ?'colors').split(';') : ["green", "#dedede"];
    var config = {
      type: 'doughnut',
      data: {
        datasets: [{
          data: [
  'value'), ('total') -'value')),
          backgroundColor: colors,
          label: 'Dataset 1'
        labels: labels
      options: {
        responsive: true,
        legend: {
          position: 'right',
        title: {
          display: true,
          text: ('title'))
        showTooltips: true,
        animation: {
          animateRotate: false,
          animateScale: false
        tooltip: {
          enabled: true,
          intersect: false,
          show: true,
          mode: 'dataset'
        /* ... */

    new Chart(ctx, config);
  } // /initDoughnutChart

The timesheets-details view looks like this now:

details view
2018-07-25_12-00-51.png (106.58 KiB) Viewed 1401 times

I hope this gives you a good starting point for your own dashboards.

Kind Regards,

Post Reply