chartjs group

chartjs group chart bar

by Reinventatuweb

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas data-group-id="3320" data-labels="[[1,2],[3, 4]]" data-values="[[2,4],[3,5]]" class="sm_e_chart_group_canvas" width="544" height="272" style="display: block; box-sizing: border-box; height: 272px; width: 544px;"></canvas>

JavaScript

var chart_bgc = ["rgba(97, 159, 202, 0.8)","rgba(226, 90, 90, 0.8)","rgba(94, 189, 94, 0.8)","rgba(255, 165, 85, 0.8)","rgba(173, 134, 208, 0.8)","rgba(169, 134, 62, 0.8)","rgba(145, 222, 163, 0.8)","rgba(123, 218, 212, 0.8)","rgba(129, 120, 221, 0.8)","rgba(106, 109, 110, 0.8)","rgba(237, 195, 167, 0.8)","rgba(216, 207, 201, 0.8)"];

$(".sm_e_chart_group_canvas").each(function(index, element) {

  var labels = JSON.parse($(this).attr("data-labels"));
  var values = JSON.parse($(this).attr("data-values"));

  var datasets = [];
	
  var labels_list = [].concat.apply([], labels);
  var values_list = [].concat.apply([], values);
  
 
  var datasets = [];

      values.forEach(function(val, index) {
          datasets.push({
              label: 'Encuesta '+(index+1),
              data: val,
              backgroundColor: chart_bgc[index],
              borderWidth: 1
          });
      });
console.log(labels);   



var ctx = element.getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels_list,
          datasets: datasets
        },
        options: {
          plugins: {
            legend: {
              position: 'top',
            },
            title: {
              display: true,
              text: "titulo"
            }
          },
          scales: {
            y: {
              beginAtZero: true
            },
            xAxes: [{ barPercentage: 1.0 }],
          }
        }
      }); 






});