Widget:Chartjs pie: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
VisualWikitext
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 10: Line 10:
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<!--{counter name="counterDonut" assign="countDonut"}-->
<!--{counter name="counterPie" assign="countPie"}-->
<!--{math equation='rand(0,1000)' assign="randomValue"}-->
<!--{math equation='rand(0,1000)' assign="randomValue"}-->
<!--{assign var=time value=time()}-->
<!--{assign var=time value=time()}-->
<!--{$ID = "donut-$countDonut-$time-$randomValue"}-->
<!--{$ID = "donut-$countPie-$time-$randomValue"}-->


<div>
<div>
Line 24: Line 24:
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->');
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->');


function makeItemArray(items) {
function makeItemArray(itemString) {
   var itemList = items.split(", ");  
   let itemArray = itemString.split(", ");  
   for (var i = 0; i< itemList.length; i++) {
   for (var i = 0; i< itemArray.length; i++) {
     itemList[i] = itemList[i].trim();
     itemArray[i] = '"' + itemArray[i].trim() + '"';
   }
   }
   return itemList;
   return itemArray;
}
}


var labels = makeItemArray('<!--{$data_labels|default:''}-->');
let labels = makeItemArray('<!--{$data_labels|default:''}-->');
var colors = makeItemArray('<!--{$colors|default:''}-->');
let dataIdentifier = '<!--{$data_identifier|default:''}-->';
dataIdentifier = dataIdentifier.trim();
let colors = makeItemArray('<!--{$colors|default:''}-->');
let dataSeries = '<!--{$data_series|default:''}-->';
let title = '<!--{$title|default:''}-->';
title = title.trim();


new Chart(ctx, {
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, 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',
     type: 'pie',
     data: {
     data: {
       labels: labels,
       labels: labels,
       datasets: [{
       datasets: [{
         label: "<!--{$data_identifier|default:''}-->",
         label: dataIdentifier,
         backgroundColor: colors,
         backgroundColor: colors,
         data: [<!--{$data_series|default:''}-->]
         data: [dataSeries]
       }]
       }]
     },
     },
Line 48: Line 60:
       title: {
       title: {
         display: true,
         display: true,
         text: '<!--{$title|default:''}-->'
         text: title
       }
       }
     }
     }
});
  });
}


window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title);


});
});

Revision as of 08:31, 19 March 2024

This widget allows you to add ... widget to your wiki page.

Created by [idea-sketch.com idea-sketch.com]

Using this widget[edit source]

For information on how to use this widget, see ...

Copy to your site[edit source]

To use this widget on your site, just install MediaWiki Widgets extension and copy the full source code of this page to your wiki as page Widget:Chartjs pie.


Retrieved from "https://visualdata.idea-sketch.com/index.php?title=Widget:Chartjs_pie&oldid=1999"