-if labels.empty? || series.empty?

== empty_alert({ :title => "Sin datos suficientes", :message => "No hay suficientes datos para mostrar esta información."})

-else

.ct-chart.bar-chart id="#{id}"

.table-responsive.chart-table
  table.table.table-striped
    tbody
      tr
        -for label in labels
          th #{label}
      -for serie in series
        tr
          -for element in serie
            td #{element}

javascript:
  var labels = #{{labels}};
  var series = #{{series}};

  var options = {
    seriesBarDistance: 30,
    fullWidth: true,
    chartPadding: {
      right: 40
    },
    height: '300px',
    showLabel: true,
    plugins: [
      Chartist.plugins.legend({
          legendNames: #{{names}},
      })
    ]
  };

  var responsiveOptions = [
    ['screen and (max-width: 640px)', {
      seriesBarDistance: 5,
      axisX: {
        labelInterpolationFnc: function (value) {
          return value[0];
        }
      }
    }]
  ];

  new Chartist.Bar("##{id}", {
      labels: labels,
      series: series
    },
    options,
    responsiveOptions
  );

css:
  ##{{id}} .ct-bar {
    stroke-width:  #{{100/(labels.count*series.count)}}%
  }