Widget:Chartjs bar: 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
 
(23 intermediate revisions by the same user not shown)
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 class="chart-container" style="position: relative;">
<canvas id="myChart-1"></canvas>
  <canvas id="<!--{$ID|escape:'html'}-->"></canvas>
</div>
</div>
<script>
<script>
// 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_doughnut').then(function(){
  mw.loader.using('ext.iswiki.chartjs').then(function(){
const ctx = document.getElementById('myChart-1');
    const ctx = document.getElementById('<!--{$ID|escape:'html'}-->');


const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
    function makeItemsArray(itemString) {
const cfg = {
      let itemsArray = itemString.split(",");  
  type: 'bar',
      for (var i = 0; i< itemsArray.length; i++) {
  data: {
        itemsArray[i] = itemsArray[i].trim();
    labels: ['Jan', 'Feb'],
    datasets: [{
      label: 'Net sales',
      data: data,
      parsing: {
        yAxisKey: 'net'
       }
       }
     }, {
      return itemsArray;
      label: 'Cost of goods sold',
     }
      data: data,
 
      parsing: {
    let labels = makeItemsArray('<!--{$data_labels|default:''}-->');
        yAxisKey: 'cogs'
    let dataIdentifier = '<!--{$data_identifier|default:''}-->';
      }
    let colors = makeItemsArray('<!--{$colors|default:'#36a2eb, #ff6384, #4bc0c0, #ff9f40, #9966ff, #ffcd56, #c9cbcf'}-->');
     }, {
    let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->');
      label: 'Gross margin',
    let title = '<!--{$title|default:''}-->';
      data: data,
    let legend = '<!--{$legend|default:'yes'}-->';
      parsing: {
    let orientation = '<!--{$orientation|default:''}-->';
         yAxisKey: 'gm'
 
      }
     dataIdentifier = dataIdentifier.trim();
     }]
    title = title.trim();
  },
 
};
    if (legend === 'no') {
        legend = false;
    } else {
         legend = true;
    }
 
    if (orientation === 'horizontal') {
        indexAxis = 'y';
     } else {
        indexAxis = 'x';
    }


new Chart(ctx, {
    function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title) {
  type: 'bar',
      //console.log('ctx: ' + ctx);
  data: data
      //console.log('labels: ' + labels);
  options: {
      //console.log('dataIdentifier: ' + dataIdentifier);
    indexAxis: 'y',
      //console.log('colors: ' + colors);
    // Elements options apply to all of the options unless overridden in a dataset
      //console.log('dataSeries: ' + dataSeries);
    // In this case, we are setting the border of each horizontal bar to be 2px wide
      //console.log('indexAxis: ' + indexAxis);
    elements: {
      console.log('legend: ' + legend);
      bar: {
      //console.log('title: ' + title);
        borderWidth: 2,
 
      }
      new Chart(ctx, {
    },
        type: 'bar',
    responsive: true,
        data: {
    plugins: {
          labels: labels,
    legend: {
          datasets: [{
      position: 'right',
            label: dataIdentifier,
    },
            backgroundColor: colors,
    title: {
            data: dataSeries
      display: true,
          }]
       text: 'Chart.js Horizontal Bar Chart'
        },
        options: {
          //maintainAspectRatio: false,
          //responsive: true,
          indexAxis: indexAxis,
          title: {
            display: true,
            text: title
          },
          plugins: {
            legend: { display: false },
          } 
        }
       });
     }
     }
  }
},
})


});
    window.drawPieChart = drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title);
 
  });
}]);
}]);
</script>
</script>
</includeonly>
</includeonly>

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.


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