Page 1 of 1

Doughnut-Charts in Details-View

Posted: 2018-07-25 10:08
by jsetzer
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:

chrome_2018-07-25_11-15-59.png
charts below fieldset in detailsview
chrome_2018-07-25_11-15-59.png (114.04 KiB) Viewed 3682 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: 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>
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;
        initDoughnutChart(ctx);
    });
    
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 = 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

The timesheets-details view looks like this now:

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

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

Kind Regards,
Jan

Re: Doughnut-Charts in Details-View

Posted: 2020-05-29 15:51
by lectura
Mr Jan, How do I implement this to display detail view data. Where do i paste the codes. I have tried to copy the codes to tablename-dv area but it does not display. Maybe a step by step procedure will be of help.