Template:Chart pie

From Visual Data Wiki
Revision as of 19:25, 18 March 2024 by Uschuetzenmeister (talk | contribs) (Created page with "{{widget:chartjs pie}}")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


 <canvas id=""></canvas>

<script> // defer script execution until the mediawiki loader and jQuery are available RLQ.push([[], function () {

 mw.loader.using('ext.iswiki.chartjs').then(function(){
   const ctx = document.getElementById();
   function makeItemsArray(itemString) {
     let itemsArray = itemString.split(","); 
     for (var i = 0; i< itemsArray.length; i++) {
       itemsArray[i] = itemsArray[i].trim();
     }
     return itemsArray;
   }
   let labels = makeItemsArray();
   let dataIdentifier = ;
   let colors = makeItemsArray();  
   let dataSeries = makeItemsArray();
   let legend = ;
   let title = ;
   dataIdentifier = dataIdentifier.trim();
   title = title.trim();
   if (legend === 'no') {
       legend = false;
   } else {
       legend = true;
   }
   function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) {
     //console.log('ctx: ' + ctx);
     //console.log('labels: ' + labels);
     //console.log('dataIdentifier: ' + dataIdentifier);
     console.log('colors: ' + colors);
     //console.log('dataSeries: ' + dataSeries);
     //console.log('title: ' + title);
     new Chart(ctx, {
       type: 'pie',
       data: {
         labels: labels,
         datasets: [{
           label: dataIdentifier,
           backgroundColor: colors,
           data: dataSeries
         }]
       },
       options: {
         maintainAspectRatio: false,
         responsive: true,
         title: {
           display: true,
           text: title
         },
         plugins: {
           legend: { display: legend }
         }
       }
     });
   }
   window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title);
 });

}]); </script>