chart.js
53 lines
| 1 | jQuery(document).ready(function(){ |
| 2 | jQuery('.matomo-table[data-chart]').each(function() { |
| 3 | let $this = jQuery(this); |
| 4 | let $postbox = $this.parents('div.postbox'); |
| 5 | let $table = $postbox.find('table'); |
| 6 | $table.hide(); |
| 7 | let $canvas = jQuery('<canvas/>',{'id':$this.attr('data-chart')}); |
| 8 | $canvas.insertAfter($table); |
| 9 | let data = []; |
| 10 | let labels = []; |
| 11 | let title = $postbox.find('h2').text(); |
| 12 | let $row; |
| 13 | let value; |
| 14 | $table.find('tr').each(function() { |
| 15 | $row = jQuery(this); |
| 16 | value = $row.find('td:nth-child(2)').text(); |
| 17 | if ( '-' === value ) { |
| 18 | value = 0; |
| 19 | } |
| 20 | data.push(value); |
| 21 | labels.push($row.find('td:nth-child(1)').text()); |
| 22 | }); |
| 23 | |
| 24 | var myChart = new Chart($canvas, { |
| 25 | type: 'line', |
| 26 | data: { |
| 27 | labels: labels.reverse(), |
| 28 | datasets: [{ |
| 29 | label: title, |
| 30 | data: data.reverse(), |
| 31 | borderColor: "#55bae7", |
| 32 | pointBackgroundColor: "#55bae7", |
| 33 | pointBorderColor: "#55bae7", |
| 34 | pointHoverBackgroundColor: "#55bae7", |
| 35 | pointHoverBorderColor: "#55bae7", |
| 36 | }] |
| 37 | }, |
| 38 | options: { |
| 39 | plugins: { |
| 40 | legend: { |
| 41 | display: false |
| 42 | } |
| 43 | }, |
| 44 | scales: { |
| 45 | y: { |
| 46 | beginAtZero: true |
| 47 | } |
| 48 | } |
| 49 | } |
| 50 | }); |
| 51 | }); |
| 52 | }); |
| 53 |