Widget:Chartjs bar: Difference between revisions

From Visual Data Wiki
Jump to navigation Jump to search
No edit summary
Tag: 2017 source edit
No edit summary
Tag: 2017 source edit
 
(10 intermediate revisions by the same user not shown)
Line 34: Line 34:
     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:'#36a2eb, #ff6384, #4bc0c0, #ff9f40, #9966ff, #ffcd56, #c9cbcf'}-->');  
     let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->');
     let dataSeries = makeItemsArray('<!--{$data_series|default:''}-->');
     let title = '<!--{$title|default:''}-->';
     let title = '<!--{$title|default:''}-->';
     let legend = '<!--{$legend|default:'yes'}-->';
     let legend = '<!--{$legend|default:'yes'}-->';
    let orientation = '<!--{$orientation|default:''}-->';


     dataIdentifier = dataIdentifier.trim();
     dataIdentifier = dataIdentifier.trim();
Line 48: Line 49:
     }
     }


     function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, legend, title) {
    if (orientation === 'horizontal') {
        indexAxis = 'y';
    } else {
        indexAxis = 'x';
    }
 
     function drawPieChart(ctx, labels, dataIdentifier, colors, dataSeries, indexAxis, legend, title) {
       //console.log('ctx: ' + ctx);
       //console.log('ctx: ' + ctx);
       //console.log('labels: ' + labels);
       //console.log('labels: ' + labels);
Line 54: Line 61:
       //console.log('colors: ' + colors);
       //console.log('colors: ' + colors);
       //console.log('dataSeries: ' + dataSeries);
       //console.log('dataSeries: ' + dataSeries);
      //console.log('indexAxis: ' + indexAxis);
      console.log('legend: ' + legend);
       //console.log('title: ' + title);
       //console.log('title: ' + title);
      //console.log('legend: ' + legend);
 
       new Chart(ctx, {
       new Chart(ctx, {
         type: 'bar',
         type: 'bar',
Line 67: Line 76:
         },
         },
         options: {
         options: {
           responsive: true,
           //maintainAspectRatio: false,
           legend: { display: legend },
          //responsive: true,
           indexAxis: indexAxis,
           title: {
           title: {
             display: true,
             display: true,
             text: title
             text: title
           }
           },
          plugins: {
            legend: { display: false },
          } 
         }
         }
       });
       });
     }
     }


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


   });
   });

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.