Widget:Chartjs pie: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
VisualWikitext
No edit summary
Tags: Manual revert 2017 source edit
No edit summary
Tag: 2017 source edit
Line 21: Line 21:
// defer script execution until the mediawiki loader and jQuery are available
// defer script execution until the mediawiki loader and jQuery are available
RLQ.push([[], function () {
RLQ.push([[], function () {
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(",");  
  for (var i = 0; i< itemsArray.length; i++) {
      for (var i = 0; i< itemsArray.length; i++) {
    itemsArray[i] = itemsArray[i].trim();
        itemsArray[i] = itemsArray[i].trim();
  }
      }
  return itemsArray;
      return itemsArray;
}
    }


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:''}-->');
let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->');
    let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->');
let title = '<!--{$title|default:''}-->';
    let title = '<!--{$title|default:''}-->';


dataIdentifier = dataIdentifier.trim();
    dataIdentifier = dataIdentifier.trim();
title = title.trim();
    title = title.trim();


function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, title) {
    function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, 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('colors: ' + colors);
console.log('dataSeries: ' + dataSeries);
      //console.log('dataSeries: ' + dataSeries);
console.log('title: ' + title);
      //console.log('title: ' + title);
  new Chart(ctx, {
      new Chart(ctx, {
    type: 'pie',
        type: 'pie',
    data: {
        data: {
      labels: labels,
          labels: labels,
      datasets: [{
          datasets: [{
        label: dataIdentifier,
            label: dataIdentifier,
        backgroundColor: colors,
            backgroundColor: colors,
        data: dataSeries
            data: dataSeries
      }]
          }]
    },
        },
    options: {
        options: {
      title: {
          title: {
        display: true,
            display: true,
        text: title
            text: title
       }
          }
        }
       });
     }
     }
  });
}


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


});
  });
}]);
}]);
</script>
</script>
</includeonly>
</includeonly>

Revision as of 09:40, 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=2023"