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 |
||
| (40 intermediate revisions by the same user not shown) | |||
| 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, | responsive: true, | ||
title: { | title: { | ||
display: true, | display: true, | ||
text: title | text: title | ||
}, | |||
plugins: { | |||
legend: { display: legend } | |||
} | } | ||
} | } | ||
| Line 68: | 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[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.