3ENGINE

Programación y otros cachivaches

Autor: David Miró

Página 4/104

Tecnologia

Chart.js: cómo añadir texto dentro de una grafica de tipo donut


A continuación te muestro cómo añadir texto dentro de una grafica de tipo donut en Chart.js

Chart.js es una libreria open source para crear gráficos en javascript basados en HTML5. Entre la amplia lista de gráficos disponibles de esta fantástica librería tenemos el donut (doughnut). Que básicamente es un gráfico de torta pero con un agujero en el centro … sorprendidos ¿verdad? 😉

Yo lo que quiero es aprovechar ese agujero del centro para añadir información, ya sea un simple texto o el total. Algo asi como los pop dots 😉

cómo añadir texto dentro de una grafica de tipo donut

Básicamente esto se consigue añadiendo un plugin e implementando el evento beforedraw. En mi ejemplo muestro el total pero podeis modificar el código para mostrar otra información.

Código HTML

<div id="mychart-holder">
    <canvas id="mychart"/>
</div>

Código Javascript

var data = {
    labels: ["Error", "Failure", "Success", "Skip", "Unknown"],
    datasets: [
        {
            data: [10, 5, 20, 2, 1],
            backgroundColor: ["red", "orange", "green", "blue", "violet"],
        }
    ]
};

var myChart = new Chart(document.getElementById('mychart'), {
    type: 'doughnut',
    data: data,
    options: {
        //cutoutPercentage: 50,
        maintainAspectRatio: true,
        responsive: true,
        legend: {
            display: false
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
    },
    plugins: [{
        id: 'total',
        beforeDraw: function(chart) {
            const width = chart.chart.width;
            const height = chart.chart.height;
            const ctx = chart.chart.ctx;
            ctx.restore();
            const fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em sans-serif";
            ctx.textBaseline = 'middle';
            var total = data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
            });
            const text = total;
            const textX = Math.round((width - ctx.measureText(text).width) / 2);
            const textY = height / 2;
            ctx.fillText(text, textX, textY);
            ctx.save();
        }
    }]
});

Aquí el código en jsfiddle

Si lo que queremos es utilizar el plugin en varias gráficas, entonces podemos registrar el plugin

Código Javascript (2)

var data = {
    labels: ["Error", "Failure", "Success", "Skip", "Unknown"],
    datasets: [
        {
            data: [10, 5, 20, 2, 1],
            backgroundColor: ["red", "orange", "green", "blue", "violet"],
        }
    ]
};

Chart.Chart.pluginService.register({
    beforeDraw: function(chart) {
        const width = chart.chart.width;
        const height = chart.chart.height;
        const ctx = chart.chart.ctx;
        ctx.restore();
        const fontSize = (height / 114).toFixed(2);
        ctx.font = fontSize + "em sans-serif";
        ctx.textBaseline = 'middle';
        var total = chart.data.datasets[0].data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
        });
        const text = total;
        const textX = Math.round((width - ctx.measureText(text).width) / 2);
        const textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.save();
    },
});

var myChart = new Chart(document.getElementById('mychart'), {
    type: 'doughnut',
    data: data,
    options: {
        //cutoutPercentage: 50,
        maintainAspectRatio: true,
        responsive: true,
        legend: {
            display: false
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
    }
});

Aquí el código en jsfiddle




Tecnologia

Bootstrap: cómo agregar estado checked a los elementos de un menu dropdown


A continuación te muestro cómo agregar estado checked a los elementos de un menu dropdown de Bootstrap

Bootstrap es un framework Open Source creado por Twitter que facilita el diseño web. En la lista de componentes facilitados por este genial framework tenemos el dropdown. Un dropdown permite mostrar una lista de opciones en un desplegable. El problema es que bootstrap no permite indicar si una opcion de la lista está checked (activada) o unchecked (desactivada). Para conseguir esto por nuestra cuenta vamos a necesitar un poco de css y javascript:

  • La clase dropdown-item-checked añade un símbolo ‘✓’ a la izquierda de la opción, esto se consigue con CSS.
  • Con HTML asociamos cada una de las opciones del dropdown a la clase option que nos servirá para capturar el evento click y añadimos la clase dropdown-item-checked a las opciones que queremos a checked por defecto.
  • Javascript captura el evento click sobre las opciones y conmuta la clase dropdown-item-checked de la opcion sobre la que hemos hecho click. Cuando la opción no tiene la clase dropdown-item-checked el símbolo ‘✓’ desaparece y viceversa, cuando la opción tiene la clase dropdown-item-checked el símbolo ‘✓’ aparece de nuevo.

Código HTML

<div class="btn-toolbar">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="menu">
        <li><a href="#" id="option-one" class="option dropdown-item-checked">My option one</a></li>
        <li><a href="#" id="option-two" class="option">My option two</a></li>
        <li><a href="#" id="option-three" class="option dropdown-item-checked">My option three</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#" id="option-five" class="option">My option five</a></li>
      </ul>
    </div>
  </div>
</div>

Código CSS

.dropdown-item-checked::before {
   position: absolute;
   left: .4rem;
   content: '✓';
   font-weight: 600;
}

Código Javascript

$(".option").click(function(event){
  event.preventDefault();
  var id = $(this).attr('id');
  $(this).toggleClass("dropdown-item-checked");
  var isChecked = $(this).hasClass("dropdown-item-checked");
  if (id == 'option-one') {
   if (isChecked) {
     // bla bla bla 
     }
  } else if (id == 'option-two') {
  // bla bla bla
  } else if (id == 'option-three') {
  // bla bla bla
  } else if (id == 'option-four') {
  // bla bla bla
  }
});

Aqui el código en jsfiddle




Aficiones

Gato nuevo en casa, consejos


Adultos y gatos conviven sin dificultad y se adaptan cada uno a los hábitos del otro sin inconvenientes. Sin embargo cuando llega un gato nuevo en casa, hay que tener en cuenta la convivencia entre nuestros pequeños felinos y los pequeños de la casa.

Un gato nuevo en casa

Si hay niños en la casa y el gatito que acabamos de comprar o adoptar es muy pequeño hay que hacer entender a los pequeños de la casa que el gato no es juguete y que podemos hacerle daño sin querer.

Los gatitos necesitan bastante descanso, dormir durante muchas horas, y descansar entre sueño y sueño. Esto puede resultar incompresible para un niño ya que va a querer jugar todo el rato con la nuevas mascota de casa, por eso hay que enseñarle que hasta que el gato no tenga los seis meses de vida, deberá tratarlo con tanto cuidado como si fuese un bebé. Si el niño lo coge por el cuello y lo zarandea durante los primeros meses de vida del gatito le provocará un sentido de desorientación fisiológica en la fase de desarrollo.

El zarandeo también puede provocarle un desequilibrio orgánico y fisiológico por eso hay que inculcarle a los niños de la casa que no tienen que atormentar al gatito con sus travesuras (estirarle de la cola, tirarlo al aire, morderle las patitas, estirarlo de las orejas, etc)

Hay que enseñarles a querer al gatito y hacerles entender que solamente con amor y buenas maneras podrán ser buenos amigos.

Os dejamos un video donde explican que no hacer cuando juegas con gatos




Aficiones

Los gatos de interior, cuidados


Aunque no es posible saber si los gatos de interior vive mejor que los gatos de exterior. En los dos casos es necesario cumplir con una serie de necesidades independientemente de si estilo de vida. Sin embargo sólo los gatos de interior tienen unas necesidades adicionales que deberá asegurarse que se cumplen para garantizar que esté sano y feliz.

Los gatos de interior suelen adaptarse bien a la vida de interior si se les acostumbra desde una edad temprana. Si un gato está acostumbrado a salir a la calle, puede resultar mas difícil adaptarlo a una vida de interior.

Por lo tanto a un gato acostumbrado a salir a la calle no es recomendable mantenerlo solo como gato de interior (excepto si es por una cuestión de salud). Si decide que su nuevo gatito sea de interior consideré la adopción de algún otro gato para hacerse compañía mutua.

Los ambientes de interior pueden llegar a ser predecible y aburridos, lo que puede llevar al estrés, la inactividad y la obesidad. Es importante proporcionar al gato todo lo que necesita.

Si tienes gatos de interior

Proporcione una caja de arena para gatos en un lugar tranquilo y límpiela con regularidad. Los gatos son a menudo reacios a utilizar una bandeja sucia o ubicada en una zona muy concurrida.

Asegúrese de que su gato tiene suficiente espacio. Sólo los gatos de interior deben tener acceso a varias habitaciones.

Permítale el acceso a dos tipos de lugar de descanso, una a nivel del suelo, cerrado por tres lados y otro en un lugar alto que tenga buenas vistas. Es importante que la posición más alta sea segura y no permitirá que su gato se caiga, ya que esto podría causar lesiones.

Proporcione varios puestos pueda arañar para que puedan marcar el territorio y así fortalecer los músculos y afilar las garras.

Dele oportunidades para el ejercicio diario para mantenerse en forma y saludable.

Cree nuevas maneras para que su gato se sienta estimulado y activo, tanto física como mentalmente. Los gatos pueden sentirse frustrados y aburridos en estilos de vida de interior.

Si su gato no tiene la libertad de interactuar con otros animales o personas, usted debe convertirse en su compañero principal. No deje a los gatos solos durante largos períodos de tiempo.

Aunque una vida de interior pueda parecer más segura para los gatos, ya que están protegidos de los peligros exteriores. Los ambientes interiores pueden ser igualmente peligrosos, los gatos pueden sufrir lesiones por accidentes domésticos. !Tenga cuidado! asegúrese de que su casa es un ambiente seguro y adecuado para los gatos.