Widget:Chartjs bar: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: 2017 source edit |
No edit summary Tag: 2017 source edit |
||
| (14 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 34: | Line 34: | ||
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 title = '<!--{$title|default:''}-->'; | let title = '<!--{$title|default:''}-->'; | ||
let legend = '<!--{$legend|default:'yes'}-->'; | let legend = '<!--{$legend|default:'yes'}-->'; | ||
let orientation = '<!--{$orientation|default:''}-->'; | |||
dataIdentifier = dataIdentifier.trim(); | dataIdentifier = dataIdentifier.trim(); | ||
| Line 48: | Line 49: | ||
} | } | ||
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) { | if (orientation === 'horizontal') { | ||
indexAxis = 'y'; | |||
} else { | |||
indexAxis = 'x'; | |||
} | |||
function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title) { | |||
//console.log('ctx: ' + ctx); | //console.log('ctx: ' + ctx); | ||
//console.log('labels: ' + labels); | //console.log('labels: ' + labels); | ||
| Line 54: | Line 61: | ||
//console.log('colors: ' + colors); | //console.log('colors: ' + colors); | ||
//console.log('dataSeries: ' + dataSeries); | //console.log('dataSeries: ' + dataSeries); | ||
//console.log('indexAxis: ' + indexAxis); | |||
console.log('legend: ' + legend); | |||
//console.log('title: ' + title); | //console.log('title: ' + title); | ||
new Chart(ctx, { | new Chart(ctx, { | ||
type: 'bar', | type: 'bar', | ||
| Line 67: | Line 76: | ||
}, | }, | ||
options: { | options: { | ||
//maintainAspectRatio: false, | |||
//responsive: true, | |||
indexAxis: indexAxis, | |||
title: { | title: { | ||
display: true, | display: true, | ||
text: title | text: title | ||
} | }, | ||
plugins: { | |||
legend: { display: false }, | |||
} | |||
} | } | ||
}); | }); | ||
} | } | ||
window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title); | window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title); | ||
}); | }); | ||
Latest revision as of 13:52, 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 bar.