Widget:Chartjs pie: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
← Older editNewer edit →
VisualWikitext
No edit summary
Tags: Reverted 2017 source edit
Undo revision 2002 by Uschuetzenmeister (talk)
Tag: Undo
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 = makeItemArray('<!--{$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: [2478,5267,734,784,433]
       }]
       }]
     },
     },
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:37, 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.


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