Practicando JS

by Anthony Fernando Torres Detquizan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  function calcularPorcentaje(post, valor, serie) {
    for (i = 0; i < serie.length; i++) {
      if (post == i) {
        return valor * 100 / serie[i];
      }
    }
  }
  var meta_actual = "Meta:201601";
  var periodo_actual = "Periodo:201601";
  var escuelas = ["ADMINISTRACIÓN DE EMPRESAS", "ADMINISTRACIÓN EN TURISMO Y HOTELERÍA", "ARQUITECTURA", "CONTABILIDAD", "DERECHO", "INGENIERÍA AMBIENTAL", "INGENIERÍA CIVIL", "INGENIERÍA DE SISTEMAS", "INGENIERÍA INDUSTRIAL", "NEGOCIOS INTERNACIONALES", "PSICOLOGÍA"];
  var data_metact = [1417, 249, 650, 880, 904, 350, 891, 995, 798, 663, 1301];
  var data_peract = [1070, 70, 173, 630, 658, 122, 354, 765, 256, 276, 831];
  var array = [{
    name: meta_actual,
    data: data_metact,
    color: 'rgba(248,161,63,1)'
  }, {
    name: periodo_actual,
    data: data_peract
  }]
  $('#container').highcharts({
    exporting: {
      enabled: false
    },
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Avance de Meta ' + meta_actual
    },
    subtitle: {
      text: ''
    },
    xAxis: {
      categories: escuelas,
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: '',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ''
    },
    plotOptions: {
      series: {
        pointWidth: 5
      },
      bar: {
        dataLabels: {
          enabled: true,
          formatter: function() {
            console.log(this.series.name);
            if (this.y > 5) return '$' + this.y;
          },
          style: {
            font: '9px Trebuchet MS, Verdana, sans-serif'
          }
        }
      }
    },
    legend: {
      shadow: true
    },
    series: array
  });
});