Widget:Chartjs pie: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
← Older editNewer edit →
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

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=2023"