Eliminar «,» final en PHP

Básicamente lo que digo es usar esto:

$cadena = trim($cadena, ‘,’);

¿Cuál es el problema?

Imagina, estás consultando una base de datos, extrayendo un número indeterminado de elementos y generando un array para Javascript como el siguiente:

[«Rojo», «Azul», «Amarillo», «Verde», «Morado», «Naranja»]

Lo normal sería hacer algo así:

    while ($fila = $resultado->fetch_row()){
      $cadena=$cadena.$fila[$columna].»,»;
    }

Lógicamente te va a salir una cadena como:

[«Rojo», «Azul», «Amarillo», «Verde», «Morado», «Naranja»,]

Y eso te va a dar un error.

Podrías hacer muchas cosas para quitarle esa coma (o incluso no ponérsela nunca), pero con el uso de trim se queda muy fino y bonito.

Opciones de configuración de gráficos con Chart.js

Ya sabemos que para crear un gráfico con Chart.js tenemos que hacer, como mínimo, algo así:

var elementoCanvas = document.getElementById("micanvas");
var migrafico = new Chart(elementoCanvas, {
type: 'bar',
data: {
    labels: ["xxx", "yyy"...],
    datasets: [{
        label: 'nombre de la serie',
        data: [valores numéricos],
        backgroundColor: "color",
        borderColor: "otrocolor",
        borderWidth: 1
    }, // Segundo dataset
        {
          label: 'Otra serie',
          data: [más datos],
          backgroundColor: "otro color más",
          borderColor: "más colores",
          borderWidth: 1
        }],
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});

Es simple. Básicamente tenemos que definir el tipo de gráfico:

• bar
• line
• radar
• polarArea
• pie
• doughnut
• bubble

Después definimos los datos, que será un array de etiquetas de los valores y un array de datasets (que contendrán tantos datos numéricos como etiquetas de valores hayamos definido).

Y por último las opciones del gráfico.

Colores

Para un dataset podremos definir un color (o array de colores). Chart.js soporta la notación en hexadecimal, RGB y HSL. También puedes utilizar las típicas constantes (blue, red, etc…).

Una buena opción es definir el color como nosotros queramos con rgb:

rgba(0, 0, 0, 0.1);

Los 3 primeros valores (entre 0 y 255 nos darán el rojo, verde y azul) el último valor, entre 0 y 1, nos da la opacidad (1) o transparencia (0) del color.

Otra manera de definir un color:

color(window.chartColors.red).alpha(0.5).rgbString()

Lo anterior lo pone en el propio github del proyecto, pero a mí no me funciona.

Colores de un dataset:

1. backgroundColor:
2. borderColor:

Ejes del gráfico

Si no quiero mostrar las etiquetas de debajo del gráfico (eje X):

options: {
        scales: {
            xAxes: [{
                display: false
            }]
        }
    }

Lo mismo sucederá con yAxes.

Título del Gráfico

options: {
    title: {
      display: true,
      text: 'Título del gráfico'
    }
}

Por defecto, display está a false, así que si quieres título hay que ponerlo a true.

Se puede cambiar su posición con position, asignándole valores: ‘top’, ‘left’, ‘bottom’ o ‘right’.

Se le puede cambiar la fuente, color, tamaño, padding, etc.

Leyenda

Dentro de options:

    legend: {
      display: true,
      labels: {
        fontColor: 'rgb(255, 99, 132)'
      },
      position: 'right'
      }

 

.

 

Tipos de gráficos de Chart.js

tipo de gráfico:

• bar
• line
• radar
• polarArea
• pie
• doughnut
• bubble

Bar

Su aspecto es el siguiente:

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

O si queremos las barras horizontales:

var myBarChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: data,
    options: options
});

.

line

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Si en un dataset pones:

lineTension: 0,

conseguirás que las líneas sean rectas, no tendrás ninguna curva para suavizar el punto.

Con pointRadius podrás establecer el radio del punto.

fill: false, –> no aparecerá relleno por debajo de la línea.

showLine: false, –> no aparecerá la línea.

Es decir, si ponemos fill y showLine a false, tendremos un gráfico de puntos, en lugar de un gráfico de líneas.

pointStyle: ‘circle’, ‘triangle’, ‘rect’, ‘rectRounded’, ‘rectRot’, ‘cross’, ‘crossRot’, ‘star’, ‘line’, and ‘dash’ Podría ser incluso una imagen.

spanGaps está por defecto a false. Si lo ponemos a true, cuando te falte un valor en la línea, no se romperá la línea.

radar

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: data,
    options: options
});

.

polarArea

new Chart(ctx, {
    data: data,
    type: 'polarArea',
    options: options
});

startAngle, en las opciones del gráfico, nos dirá dónde comienza el gráfico, el ángulo inicial para el primer elemento.

animation.animateRotate y animation.animateScale las tiene por defecto a true, por lo que nos hará una animación de rotación y escala inicial.

pie

var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data,
    options: options
});

rotation –> para establecer el ángulo inicial

Todas estas opciones son aplicables al siguiente gráfico.

.

doughnut

var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
})

bubble

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: options
});

Ojo: La estructura del Dataset es distinta:

var data = {
    datasets: [
        {
            label: 'First Dataset',
            data: [
                {
                    x: 20,
                    y: 30,
                    r: 15
                },
                {
                    x: 40,
                    y: 10,
                    r: 10
                }
            ],
            backgroundColor:"#FF6384",
            hoverBackgroundColor: "#FF6384",
        }]
};

El data del Dataset es un array de tuplas de 3 elementos: x, y, r (coordenada x, coordenada y, radio).

{
    // X Value
    x: ,

    // Y Value
    y: ,

    // Radius of bubble. This is not scaled.
    r: 
}

.

Trabajar en MySQL/MariaDB con un campo varchar en lugar de date

Sí, hay veces que cometes el error de importar datos desde un CSV, un TXT o un XLS a una BD MySQL/MariaDB y no te das cuenta de que has almacenado un campo, que en realidad es una fecha, como una cadena de caracteres.

Es decir, tengo mi campo «Cumpleaños» como Varchar en lugar de Date.

Cuando comiences a hacer consultas te darás cuenta de que tienes un problema, sobre todo cuando empieces a consultar por años, meses, días de la semana, etc.

Lo lógico es hacer un ALTER TABLE seguido de un UPDATE, generando un campo nuevo, ahora sí como date y llenándolo de los valores que inicialmente almacenaste en el varchar, pero hay veces que ya no se puede. Imposible. Porque has desarrollado ya todo y no puedes cambiar la estructura de la BD.

Chapuza para solucionarlo: la función STR_TO_DATE

Esta función recibe 2 parámetros, el nombre del campo y el patrón que sigue la fecha almacenada en esa cadena.

Ejemplo:

select sum(aviones) as 'Número de viajes', 
year(STR_TO_DATE(fechaida, '%d/%m/%Y')) as Año 
from viajes 
group by Año

Lo único «complicado» es el patrón. Tienes que ponerlo exactamente como está almacenado en la base de datos en la cadena de caracteres. En el ejemplo sería algo como:

20/05/2017

.

Empezando con Chart.js

Retomo esta librería y a ver si esta vez profundizamos algo más.

La página principal de la misma la tienes en:

http://www.chartjs.org/

En Github en https://github.com/chartjs/Chart.js. Démosle una estrellita y un watch.

Y la documentación en una página: http://www.chartjs.org/docs/

Licencia

Chart.js está disponible bajo licencia MIT. MIT license.

Instalación

Nos podemos descargar la librería desde Github. Tendremos un fichero

Chart.js-master.zip

También tenemos el CDN: https://cdnjs.com/libraries/Chart.js

Desde Github nos podemos ir a la última versión (en la actualidad la 2.5.0) y descargar los ficheros Chart.js y Chart.min.js

https://github.com/chartjs/Chart.js/releases/tag/v2.5.0

Podemos incluir dos builds (script src=…):

• Chart.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js
• Chart.min.js – https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

Comenzamos

1. Añadimos el script Chart.js
2. Tenemos que añadir un elemento canvas, como parámetros, añadiremos width y height (en realidad, lo que pongamos aquí sólo se va a utilizar para ajustar la relación de altura y anchura, pero el canvas se va a intentar ajustar a la página o al elemento en el que esté incluído)
3. Si queremos, podemos incluir un div al que le pondremos la altura y anchura que nos interese.
4. Después, en el script debemos crear el gráfico: var myChart = new Chart(ctx, { type: ‘bar’, data: {…
   definiendo el tipo del mismo (bar en este caso).
5. Un gráfico puede tener 1 o mas datasets, pero estos datasets deben tener la misma estructura para darle el mismo significado al gráfico. En este ejemplo vamos a insertar solo un dataset.

La estructura de la variable data podemos ver que es algo muy similar a json, principalmente esta dividida en labels y datasets.

• labels: son las etiquetas que aparecen en la parte inferior del gráfico, en nuestro caso serían «Rojo», «Azul», «Amarillo», «Verde», «Morado», «Naranja».
• datasets: Los datasets son los grupos de datos que se mostrarán en el gráfico, podemos mostrar 1 o 2 o mas datasets, siempre y cuando todos conserven la misma estructura, el nodo de datasets esta dividido en: label, data, backgroundColor, borderColor, borderWidth.
  • label: Label es la etiqueta del dataset, el significado de los datos de la grafica por ejemplo “# de Votos”.
  • data: data al igual que las siguientes propiedades, son listas y las siguientes propiedades deben coincidir con el número de elementos que contenga la propiedad data, en nuestro caso la propiedad data cuenta con 6 elementos: [12, 19, 3, 5, 2, 3], estos datos pueden ser diferentes en cada dataset.
  • backgroundColor: es una propiedad que sirve para guardar un color y se traduce como el color de fondo del gráfico, al ser una lista de colores podemos darnos cuenta de que los colores pueden ser diferentes para cada barra.
  • borderColor: es una propiedad que sirve para guardar un color y se tradude como el color de borde de las barras, la lista de colores debe coincidir en número con la lista de valores en data y backgroundColor.
  • borderWidth: este es un solo valor numerico y el valor contenido se traduce como el ancho o grosor del borde de las barras o lineas.

Opciones

La libreria tambien nos permite controlar ciertas opciones, las cuales las podemos encontrar en la documentacion y estas opciones dependen del tipo de gráfico que usemos.

Basicamente lo que hacemos con la opción que hemos usado en este caso es forzar el eje Y de la grafica para que empieze en valor 0, ya que por default el valor del eje Y empieza en el valor mínimo que tengamos en los datos de nuestros datasets.

El resultado:

<canvas id="myChart" width="400" height="400">canvas>
<script>
      // Debemos crear una instancia del objeto canvas.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
script>

En resumen, para crear un gráfico:

varchart1 = newChart(ctx, {

type: 'bar',

data: mydata,

options: myoptions

});

Siendo ctx el objeto canvas, mydata el dataset, y myoptions la opciones del gráfico.

Atención: Si no quieres que te ocupe todo el ancho, debes meter el canvas dentro de un div y a este div aplicarle un style=»width:60%». Si no lo haces así y lo intentas de cualquier otra forma, te ignorará y ocupará el ancho de la pantalla.

Basado en http://evilnapsis.com/2016/08/14/crear-graficas-de-barra-y-lineas-en-javascript-usando-la-libreria-chart-js/.

Ofuscación de variables con PHP para GET

Hay muchas formas de hacerlo, en fin comento una.

Básicamente quiero tener esta URL:

http://www.midominio.com/consulta.php?id=1

Lógicamente no quiero un 1, para que puedas ir probando tranquilamente cosas, ese valor hay que ofuscarlo.

Con PHP se pueden utilizar las funciones:

base64_encode y base64_decode

Nos podrían quedar las funciones de codificación y decodificación como siguen:

<?php
function codifica_ID($data) {
  return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
}

function decodifica_ID($data) {
  return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT));
}

 ?>

 

Sí, es cutrecillo, hay muchas mejores maneras de hacerlo.

Pasar a DATE un campo VARCHAR en MySQL/MariaDB

Nos enfrentamos a lo siguiente:

Por ejemplo, hemos importado un fichero CSV a MySQL/MariaDB utilizando phpMyAdmin. Este proceso de importación funcionó perfectamente, pero, como no habíamos creado la estructura de la tabla previamente, los campos de tipo fecha nos los ha generado como cadena en la base de datos. Es decir, tengo varios campos VARCHAR y quiero convertirlos en tipo DATE.

En primer lugar nos creamos un campo tipo DATE, sobre el que haremos el UPDATE.

Si nuestro campo VARCHAR tiene el formato: 07/05/2017 (es lo típico que nos pasará si importamos desde un CSV), tenemos que convertirlo en 2017-05-07 para que funcione correctamente.

La sentencia UPDATE sería algo tal que así:

UPDATE `mitabla` SET `campofecha` = CONCAT(SUBSTRING(`campocadena`,7,4),’-‘,SUBSTRING(`campocadena`,4,2),’-‘,SUBSTRING(`campocadena`,1,2)) WHERE 1

Posteriormente, eliminamos el campocadena y renombramos el campofecha para que tenga el nombre primitivo.

Mostrar con PHP tabla de MySQL/MariaDB con número variable de campos

Partiendo de una tabla o consulta de MySQL/MariaDB, queremos obtener un código HTML utilizando PHP y la librería MySQLi en forma OO.

El código fuente lo puedes encontrar en:

https://github.com/pedroguirado/bd_mysql/blob/master/tabla_dinamica.php

<?php

/* ————————————— */
function conectar($maq, $usu, $con, $bas){
$conexion = new mysqli($maq, $usu, $con, $bas);

if ($conexion->connect_error) {
    die(‘Error de Conexión (‘ . $conexion->connect_errno . ‘) ‘. $conexion->connect_error);
}
$acentos = $conexion->query(«SET NAMES ‘utf8′»);

return $conexion;
}

/* ————————————— */

function tabla_dinamica (){
  include_once(«paramconexion.php»);
  $conexion=conectar($maquina,$usuario,$contrasena,$basededatos);
  $resultado=$conexion->query(«Select * from viajes»);
  //printf(«<p>La selección devolvió %d filas y %d columnas.</p>\n», $resultado->num_rows, $resultado->field_count);
  echo «<table><tr>»;
  /* Obtener la información del campo para todas las columnas */
  $info_campo = $resultado->fetch_fields();
  foreach ($info_campo as $valor) {
    printf(«<td>%s</td>»,$valor->name);
  }
  echo «</tr>»;
  /* obtener el array de objetos */
  while ($fila = $resultado->fetch_row()) {
      echo «<tr>»;
      foreach ($fila as $valor)
        printf(«<td>%s</td>»,$valor);
      echo «</tr>»;
  }

  echo «</table>»;

  $resultado->free();
  $conexion->close();
}

?>

 

Desde nuestro documento llamaremos a la función tabla_dinamica()

Modifica la consulta y en el fichero paramconexion.php define las variables para establecer la conexión.

Capas base de un mapa con Leaflet.js

Referencia de la API

Uso de TileLayer para cargar la capa base de nuestro mapa.

Ejemplo de uso:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

Por un lado está la URL template y por otro lado, las opciones del tileLayer que será evaluadas.

Sintaxis

L.tilelayer( urlTemplate, <TileLayer options> options?)

Opciones

Podemos definir un zoom máximo y un zoom mínimo (minZoom, maxZoom), entre 0 y 18 (siendo 18 el valor máximo de zoom).

Ejemplos

Openstreetmap

  
  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade',
  maxZoom: 18
}).addTo(mymap);

Mapbox

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data © OpenStreetMap contributors, ' +
    'CC-BY-SA, ' +
    'Imagery © Mapbox',
  id: 'mapbox.light'
}).addTo(mymap);

---

Leaflet-providers

Puedes entrar en esta web para descargarte estos códigos y ver una preview:

http://leaflet-extras.github.io/leaflet-providers/preview/index.html

También tienes en Leaflet-extras el plugin Leaflet-providers

Te bajas el plugin, lo descomprimes, el fichero importante es:

leaflet-providers.js

Tendrás que incluirlo en tu web:

/js/leaflet-providers.js

Y el uso será el siguiente:

L.tileLayer.provider(‘capabase‘).addTo(mymap);

Por ejemplo:

L.tileLayer.provider(‘OpenMapSurfer.Roads’).addTo(mymap);

o

  L.tileLayer.provider(‘OpenStreetMap.Mapnik’).addTo(mymap);

Así, tenemos algunos identificadores como:

• OpenStreetMap.Mapnik
• OpenStreetMap.BlackAndWhite
• OpenTopoMap
• Stamen.Terrain
• …

.