Widget:Chartjs pie: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
VisualWikitext
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
Line 10: Line 10:
</noinclude>
</noinclude>
<includeonly>
<includeonly>
<!--{counter name="counterPie" assign="countPie"}-->
<!--{counter name="counterDonut" assign="countDonut"}-->
<!--{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-$countPie-$time-$randomValue"}-->
<!--{$ID = "donut-$countDonut-$time-$randomValue"}-->


<div>
<div>
Line 24: Line 24:
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->');
const ctx = document.getElementById('<!--{$ID|escape:'html'}-->');


function makeItemArray(itemString) {
function makeItemArray(items) {
   let itemArray = itemString.split(", ");  
   var itemList = items.split(", ");  
   for (var i = 0; i< itemArray.length; i++) {
   for (var i = 0; i< itemList.length; i++) {
     itemArray[i] = '"' + itemArray[i].trim() + '"';
     itemList[i] = itemList[i].trim();
   }
   }
   return itemArray;
   return itemList;
}
}


let labels = makeItemArray('<!--{$data_labels|default:''}-->');
var labels = makeItemArray('<!--{$data_labels|default:''}-->');
let dataIdentifier = '"<!--{$data_identifier|default:''}-->"';
var colors = makeItemArray('<!--{$colors|default:''}-->');
dataIdentifier = dataIdentifier.trim();
let colors = makeItemArray('<!--{$colors|default:''}-->');
let dataSeries = makeItemArray('<!--{$data_series|default:''}-->');
let title = '"<!--{$title|default:''}-->"';
title = title.trim();


function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title) {
new Chart(ctx, {
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: dataIdentifier,
         label: "<!--{$data_identifier|default:''}-->",
         backgroundColor: colors,
         backgroundColor: colors,
         data: dataSeries
         data: [<!--{$data_series|default:''}-->]
       }]
       }]
     },
     },
Line 60: Line 48:
       title: {
       title: {
         display: true,
         display: true,
         text: title
         text: '<!--{$title|default:''}-->'
       }
       }
     }
     }
  });
});
}


window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title);


});
});

Revision as of 08:29, 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.


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