Widget:Chartjs pie: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: 2017 source edit |
No edit summary Tag: 2017 source edit |
||
(118 intermediate revisions by the same user not shown) | |||
Line 10: | Line 10: | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
<!--{counter name=" | <!--{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-$ | <!--{$ID = "donut-$countPie-$time-$randomValue"}--> | ||
<div> | <div class="chart-container" style="position: relative;"> | ||
<canvas id="<!--{$ID|escape:'html'}-->"></canvas> | <canvas id="<!--{$ID|escape:'html'}-->"></canvas> | ||
</div> | </div> | ||
<script> | <script> | ||
// defer script execution until the mediawiki loader and jQuery are available | // defer script execution until the mediawiki loader and jQuery are available | ||
RLQ.push([[], function () { | RLQ.push([[], function () { | ||
mw.loader.using('ext.iswiki.chartjs').then(function(){ | mw.loader.using('ext.iswiki.chartjs').then(function(){ | ||
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->'); | const ctx = document.getElementById('<!--{$ID|escape:'html'}-->'); | ||
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('<!--{$data_labels|default:''}-->'); | |||
let dataIdentifier = '<!--{$data_identifier|default:''}-->'; | |||
let colors = makeItemsArray('<!--{$colors|default:'#36a2eb, #ff6384, #4bc0c0, #ff9f40, #9966ff, #ffcd56, #c9cbcf'}-->'); | |||
let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->'); | |||
let legend = '<!--{$legend|default:'yes'}-->'; | |||
let title = '<!--{$title|default:''}-->'; | |||
dataIdentifier = dataIdentifier.trim(); | |||
title = title.trim(); | |||
if (legend === 'no') { | |||
legend = false; | |||
} else { | |||
legend = true; | |||
} | |||
} | |||
new Chart(ctx, { | 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> | </script> | ||
</includeonly> | </includeonly> |
Latest revision as of 13:51, 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.