-if serie.empty?

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

-else

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

.table-responsive.chart-table
  table.table.table-striped
    tbody
      tr
        -for label in labels
          th #{label}
      tr
        -for element in serie
          td #{element}
      tr
        -total = [1,serie.reduce(:+)].max
        -for element in serie
          td #{(element.to_f*100/total).round(0)}%

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

  new Chartist.Pie("##{id}", {
      labels: labels,
      series: serie
    }, {
      fullWidth: true,
      showLabel: false,
      height: '300px',
      plugins: [
        Chartist.plugins.legend()
      ]
    }
  );

css:
  .pie .ct-legend.ct-legend-inside {
    position: absolute;
    top: 60px;
  }