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 |
||
| (53 intermediate revisions by the same user not shown) | |||
| Line 15: | Line 15: | ||
<!--{$ID = "donut-$countPie-$time-$randomValue"}--> | <!--{$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> | ||
| Line 23: | Line 23: | ||
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) { | function makeItemsArray(itemString) { | ||
let itemsArray = itemString.split(","); | let itemsArray = itemString.split(","); | ||
| Line 34: | Line 33: | ||
let labels = makeItemsArray('<!--{$data_labels|default:''}-->'); | let labels = makeItemsArray('<!--{$data_labels|default:''}-->'); | ||
let dataIdentifier = '<!--{$data_identifier|default:''}-->'; | let dataIdentifier = '<!--{$data_identifier|default:''}-->'; | ||
let colors = makeItemsArray('<!--{$colors|default:''}-->'); | let colors = makeItemsArray('<!--{$colors|default:'#36a2eb, #ff6384, #4bc0c0, #ff9f40, #9966ff, #ffcd56, #c9cbcf'}-->'); | ||
let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->'); | let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->'); | ||
let legend = '<!--{$legend|default:'yes'}-->'; | |||
let title = '<!--{$title|default:''}-->'; | let title = '<!--{$title|default:''}-->'; | ||
| Line 41: | Line 41: | ||
title = title.trim(); | title = title.trim(); | ||
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title) { | if (legend === 'no') { | ||
legend = false; | |||
} else { | |||
legend = true; | |||
} | |||
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) { | |||
//console.log('ctx: ' + ctx); | //console.log('ctx: ' + ctx); | ||
//console.log('labels: ' + labels); | //console.log('labels: ' + labels); | ||
//console.log('dataIdentifier: ' + dataIdentifier); | //console.log('dataIdentifier: ' + dataIdentifier); | ||
console.log('colors: ' + colors); | |||
//console.log('dataSeries: ' + dataSeries); | //console.log('dataSeries: ' + dataSeries); | ||
//console.log('title: ' + title); | //console.log('title: ' + title); | ||
| Line 59: | Line 65: | ||
}, | }, | ||
options: { | options: { | ||
maintainAspectRatio: false, | |||
responsive: true, | |||
title: { | title: { | ||
display: true, | display: true, | ||
text: title | text: title | ||
}, | |||
plugins: { | |||
legend: { display: legend } | |||
} | } | ||
} | } | ||
| Line 67: | Line 78: | ||
} | } | ||
window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title); | window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title); | ||
}); | }); | ||
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
For information on how to use this widget, see ...
Copy to your site
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.