Widget:Chartjs bar: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(21 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'}-->');


new Chart(ctx, {
    function makeItemsArray(itemString) {
  type: 'bar',
      let itemsArray = itemString.split(",");
  data: {
      for (var i = 0; i< itemsArray.length; i++) {
    labels: ['Jan', 'Feb'],
        itemsArray[i] = itemsArray[i].trim();
    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();
   },
 
  options: {
    if (legend === 'no') {
    indexAxis: 'y',
        legend = false;
    // Elements options apply to all of the options unless overridden in a dataset
    } else {
    // In this case, we are setting the border of each horizontal bar to be 2px wide
        legend = true;
    elements: {
    }
      bar: {
 
        borderWidth: 2,
    if (orientation === 'horizontal') {
      }
         indexAxis = 'y';
    },
    } else {
    responsive: true,
        indexAxis = 'x';
    plugins: {
     }
    legend: {
 
      position: 'right',
    function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title) {
    },
       //console.log('ctx: ' + ctx);
    title: {
      //console.log('labels: ' + labels);
      display: true,
       //console.log('dataIdentifier: ' + dataIdentifier);
       text: 'Chart.js Horizontal Bar Chart'
       //console.log('colors: ' + colors);
      //console.log('dataSeries: ' + dataSeries);
      //console.log('indexAxis: ' + indexAxis);
       console.log('legend: ' + legend);
      //console.log('title: ' + title);
    
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: dataIdentifier,
            backgroundColor: colors,
            data: dataSeries
          }]
        },
        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

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 bar.


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