D3.js para representar matrices Origen/Destino

Viendo un gráfico de Uber, he encontrado una posibilidad muy buena para representar las matrices Origen/Destino de transporte público, peatones, bicicletas o cualquier elemento de Movilidad.

Esta imagen la he tomado de un curso que estoy haciendo de Big Data en unimooc.com

Mirando las posibilidades para representar este tipo de diagrama, que puede venir muy bien para una MOD, tenemos la librería D3.js.

En esta librería encontramos D3 Chord.

https://github.com/d3/d3-chord

Iré completando este post con los pasos a seguir para visualizar los datos .

 

Software para generar gráficos de cuerdas: http://circos.ca/

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: 
}

.

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/.

Dashboards con Zoho.com

AVISO: Esto es una iniciación, sin manual, todo intuitivo, para ver qué resultados se pueden conseguir.

Bueno, no solo Dashboards (paneles) sino Reports en general: Gráficos, Tablas, Tablas dinámicas, etc. Lo que no hace es mapificar, asunto muy interesante, pero la verdad es que Zoho.com está bastante bien para los fines que voy persiguiendo.

http://www.zoho.com/reports/

Material

Está en inglés la página, pero tenemos material en castellano.

En http://www.zoho.com/reports/Video-Demo.html se pueden encontrar unos cuantos videos tutoriales de unos minutos de duración para poder empezar.

Por ejemplo, para crear Dashboards:

Licencias y Precios

Hay muchos tipos de licencias. Yo voy a probar con la gratuita. Está muy limitada, únicamente puedes tratar con 10.000 registros y dos usuarios.

Crear Base de datos

Tras registrarnos e identificarnos, lo primero que hay que hacer es crear una Base de Datos para trabajar sobre ella.

En este caso voy a hacerlo desde una hoja de Excel, así que selecciono la primera opción. Nos aparece un asistente:

Pondremos el nombre a la base de datos, una descripción y seleccionaremos el fichero, que puede ser de distintos tipos:

Me muestra una previsualización de los datos en el siguiente paso del asistente. En mi caso, como es un fichero de Excel con una única hoja, sólo me aparece esta, si no, me preguntaría qué hoja quiero importar:

En el siguiente paso indico el nombre de la tabla, puedo seleccionar qué campos quiero importar, cuáles son los nombres de los campos, tipos, etc.

Cuando se termina el proceso de importación te muestra un resumen de los datos que ha conseguido importar, algo muy interesante en este tipo de asistentes y que pocas veces nos dan:

Por último nos pide que si queremos generar de forma automática informes:

Le dije que sí y me generó unos cuantos:

La idea es buena, pero el problema es que debería decirte sobre qué campos quieres realizar los resúmenes. Me explico, básicamente lo que hace es para los campos numéricos, realiza una serie de informes, realizando sumas. ¿Cuál es el problema? Pues que me ha cogido los campos ID y los campos de Coordenadas y los ha ido sumando.

Debería permitirme el seleccionar qué campos quiero que no sean tratados, para luego no tener que ir eliminando tantos análisis.

Reports

Ya sea sobre los informes que nos ha generado automáticamente o sobre uno que hemos creado nosotros, tendremos dos modos:

• Vista
• Diseño

Edición:

El aspecto al editar un gráfico es el siguiente:

Depende del tipo de gráfico nos aparecerán distintas pestañas, con informaciones relativas a los ejes. Podemos hacer drag and drop desde el panel de la izquierda sobre los controles de la derecha para personalizar nuestro gráfico y obtenemos una vista preliminar en la parte de abajo. El diseño es bastante sencillo.

Crear un informe

Desde la pestaña Explorer podemos crear tablas, informes, paneles o carpetas:

Al Crear un informe, nos aparece la siguiente ventana:

Vemos que tenemos varios tipos de informes:

• Gráficos
  • De muy diversos tipos. Cada tipo puede necesitar distintos parámetros para configurar
• Tablas
  • Básicamente es mostrar campos y registros en una rejilla, a modo de Excel
• Tablas dinámicas
  • Agrupamos por filas y columnas y mostramos resúmenes de los datos
• Resúmenes
  • Es como las dinámicas pero más simples, ya que no se categoriza por columnas
• Panel (un panel o dashboard es simplemente una combinación de los anteriores)

Cuando pulsamos sobre cualquiera de las opciones anteriores, nos va a preguntar cuál es la tabla de la que cogeremos los datos:

1. Gráficos

Al crear un gráfico nos sale al principio la siguiente ventana:

A la izquierda tenemos un panel del que haremos drag&drop de sus campos sobre el panel de diseño de la derecha arriba.

Vamos a hacer un gráfico con los turismos implicados por año:

Cogemos el campo de tipo fecha (fácilmente identificable por el icono de la izquierda) y los soltamos sobre el Eje X. En este momento aparece algo INTERESANTÍSIMO: Puedo estudiar la fecha por año, día, mes, trimestre, etc.

Sobre el Eje Y suelto el campo de Turismos implicados. Me da la opción de calcular sumas, conteos, medias, etc:

Puedo configurar muchas más cosas: Un campo con el nombre de las columnas, con el color de las columnas, tengo varios tipos de gráfico, puedo aplicar filtros, ordenar, editar la leyenda, etc.

2. Tablas

Con una vista de tabla simplemente nos aparecerá un grid con nuestros datos y campos:

Podemos ordenar según un campo, aplicar filtros, mostrar/ocultar columnas, cambiar el orden de las columnas, etc.

Estas tablas no permiten modificar los datos, para hacerlo puedes irte directamente a la tabla originaria, a través de la pestaña Explorer, y hacerlo sobre ella. Recuerda que esto son Vistas.

Poder modificar los datos es muy interesante, ya que no tendremos que estar cargando los datos si ha habido un error en el origen.

3. Tablas dinámicas

Cuando creamos una tabla dinámica nos aparece la siguiente ventana para configurar:

Haremos drag&drop con los campos y pulsaremos sobre Generar Dinámica para ver una vista preliminar de la tabla.

Para los campos en blanco nos genera la columna NO VALUE. Al final aparece una suma de todas las columnas para esa fila:

Puedo:

• Editar los nombres de las columnas (bueno, excepto los campos y el -No Value-), ya que eso de Quarter&Year de fecha puede quedar un poco raro.
• Cambiar los anchos de las columnas
• Modificar el nombre de «Recuento Total» que nos aparece en la última fila
• Así como ordenar y filtrar, como en el resto de informes

4. Tabla resumen

Cuando creamos o editamos una tabla resumen el aspecto es el siguiente:

Como vemos, le doy un nombre a la tabla resumen, le digo qué campos son los que quiero resumir (el orden es importante) y le digo qué quiero contar, sumar, etc.

El aspecto final sería:

Vemos que los filtros se deben aplicar en modo diseño o el usuario también, pulsando sobre Datos subyacentes:

5. Panel o dashboard

En un panel vamos a poder recopilar todos los elementos anteriores (tablas, gráficos, tablas dinámicas, resúmenes) así como Widgets (básicamente un widget contiene resultados de consultas, sobre todo se asocian a totales).

En la zona de arriba del panel puedo añadir Filtros de usuario:

Voy añadiendo campos (según el tipo aparecerán usando unos controles u otros)

y puedo ir configurándolos:

El añadir gráficos o tablas es lo más sencillo. Simplemente un drag & drop desde el panel de la izquierda. En un principio se ajustan al ancho, pero se puede modificar para que ocupen la mitad o el tamaño que uno quiera. También podemos cambiarlos de sitio.

El aspecto en modo edición sería:

Y en modo de vista:

En este modo vista, si pulso sobre un quesito del gráfico de sectores me aparecerá un menú contextual en el que me permite:

• Ver los datos subyacentes (aparecerá una capa en la que tendré una rejilla con los datos filtrados para el año concreto, en este caso)
• Explorar en profundidad (aparece un gráfico con los datos divididos por trimestres para el año seleccionado)

Informes de dos tablas distintas

¿Qué sucede si quiero hacer un informe que una dos tablas distintas que he cargado? Básicamente me tengo que crear una Tabla de Consulta.

Mediante SQL especifico la consulta. En cuanto ya tengo esta consulta almacenada, ya podré generar informes con este origen.

Exportar

Los paneles y gráficos puedo exportarlos como PDF o como HTML.

Las tablas o vistas puedo exportarlas como CSV, XLS, etc.

Puedo enviar por correo electrónico.

Resumen.

Zoho Reports es muy muy intuitivo, no necesitas de manuales para poder trabajar. Los conceptos están claros. los procesos de creación e importación son sencillos.

Únicamente me falla el hecho de la limitación porque no es una licencia gratuita y que no se pueden mapificar los datos.

Tablas de Datos en Google Chart

Después de un «análisis minucioso», voy a ir recopilando la estructura que deben tener las tablas de datos según el tipo de gráfico que queremos mostrar.

Voy a poner aquí exclusivamente los gráficos que me interesan.

PieChart

Ejemplo:

var datos = new google.visualization.DataTable();
            datos.addColumn('string', 'Ingredientes');
            datos.addColumn('number', 'Trozos');
            datos.addRows([
                  ['Setas', 3],
                  ['Champiñones', 8],
                  ['Aceitunas', 1],
                  ['Zucchini', 1],
                  ['Pepperoni', 2]
            ]);

.

Descripción:

Utilizo DataTable como método de creación de la tabla de datos. El número de columnas debe ser dos siempre. Puedo tener tantas filas como quiera.

El formato de la tabla será:

Nombre de las series	Nombre de lo que se cuenta (Número)
Serie1	Número1
Serie2	Número2

 Ejemplo de Consulta:

SELECT sum(piña) as Piña, sum(atun) as Atún,

       sum(pepperoni) as Pepperoni, sum(aceitunas) as Aceitunas

       from pizzas;

Teniendo en cuenta que hay que pasarle los nombres de la primera fila.

---

BarChart, ColumnChart, LineChart y AreaChart

Ejemplo:

var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
]);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

Cada fila representa un grupo de barras. Cada columna representa una serie. Puedo tener tantas filas y columnas como quiera.

La primera fila lleva todo entrecomillado. La primera columna lleva todo entrecomillado. El resto va sin comillas ya que debe ser numérico

El formato de la tabla será:

Nombre de los grupos de barras	Nombre de la serie1	Nombre de la serie2
Grupo de barras 1	Número1	Número2
Grupo de barras 2	Número3	Número4

 Ejemplo de Consulta:

SELECT ciudad, sum(piña) as Piña, sum(atun) as Atún, sum(pepperoni) as Pepperoni 
from pizzas group by ciudad;

 

Teniendo en cuenta que el primer campo será el del group by y que es el nombre de los grupos de barras o columnas o áreas o líneas (eje X).

---

ScatterChart

Ejemplo:

        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

Cada fila representa un punto. Cada columna representa una serie. Hay 2 columnas exactamente y tantas filas como quieras (cada fila se convertirá en un punto). Los valores de las filas 2 y siguientes obligatoriamente son siempre numéricos.

El formato de la tabla será:

Nombre de la serie1	Nombre de la serie2
Número1	Número2
Número3	Número4

 Ejemplo de Consulta:

SELECT piña as Piña, atun as Atún from pizzas;

Campos numéricos siempre.

---

Histogram

Ejemplo:

        var data = google.visualization.arrayToDataTable([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

Cada fila representa un elemento. Tengo exactamente 2 columnas, en la primera el nombre del elemento y en la segunda el valor numérico asociado al mismo.

El formato de la tabla será:

Nombre del elemento	Nombre del valor numérico
Elemento1	Número1
Elemento2	Número2

 Ejemplo de Consulta:

SELECT pizzeria, precio from pizzas;

Campo de texto el primero, campo numérico el segundo.

---

Table

Ejemplo:

  var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

.

Descripción:

Utilizo DataTable como método de creación de la tabla de datos.

Cada fila representa un elemento. Debo añadir las columnas especificando el tipo. Puedo tener tantas filas y columnas como quiera. La manera de trabajo es parecida a PieChart.

El formato de la tabla será:

Nombre campo 1	Nombre campo 2	Nombre campo 3
Elemento1	Elemento3	Elemento5
Elemento2	Elemento4	Elemento6

 Ejemplo de Consulta:

SELECT ciudad, pizzeria, fecha, hora, precio from pizzas;

---

CandlestickChart

Ejemplo:

    var data = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80],
      ['Thu', 77, 77, 66, 50],
      ['Fri', 68, 66, 22, 15]
      // Treat first row as data as well.
    ], true);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

Cada fila representa un elemento. Debo tener siempre 5 columnas:

• La primera columna es string, las siguientes son numéricas.
• La segunda columna, es decir, la primera columna numérica, representa el Mínimo
• La tercera columna es el valor Inicial
• La 4ª columna es el valor Final
• La 5ª columna es el valor Máximo

El formato de la tabla será:

Elemento1	Minimo1	Inicial1	Final1	Máximo1
Elemento2	Minimo2	Inicial2	Final2	Máximo2

 Ejemplo de Consulta:

SELECT ciudad, min(precio), first(precio), last(precio), max(precio) from pizzas;

---

Gauge

Ejemplo:

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

En la primera fila expreso ‘Label’ y ‘Value’.

Por cada una de las filas siguientes, tendremos un gauge. Cada fila tendrá siempre 2 columnas: el nombre y el valor

El formato de la tabla será:

‘Label’	‘Value’
Elemento1	Valor1
Elemento2	Valor2

 Ejemplo de Consulta:

SELECT ciudad, max(precio) from pizzas;

Aunque debería darse la posibilidad de hacer otro tipo de consultas:
SELECT sum(piña) as Piña, sum(atun) as Atún, sum(cebolla) as Cebolla
from pizzas;
Y en el tratamiento de la misma capturar el nombre del campo y el valor devuelto.

.

---

 

Map

Ejemplo:

  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);

.

Descripción:

Utilizo arrayToDataTable como método de creación de la tabla de datos.

En la primera fila expreso ‘Lat’ ‘Long’ y ‘Name’, es decir, Latitud, Longitud y Nombre.

Por cada una de las filas siguientes, tendremos un marcador.

El formato de la tabla será:

‘Lat’	‘Long’	‘Name’
numérico coordenada X 1	numérico coordenada Y 1	Nombre del marcador 1
numérico coordenada X 2	numérico coordenada Y 2	Nombre del marcador 2

 Ejemplo de Consulta:

select x, y, pizzeria from pizzas  where provincia=»Granada» group by x, y;

.

 

Chart.js

Hoy he encontrado una página que me ha encantado, me ha abierto un nuevo horizonte.

http://www.chartjs.org/

En esta página te puedes descargar y encuentras información sobre una librería de Javascript orientada totalmente a generar gráficos dentro del CANVAS de HTML5.

Prometo utilizarlo e iré subiendo resultados.

Galerías de Gráficos con Google Chart

• Area Charts
• Bar Charts
• Bubble Charts
• Candlestick Charts
• Column Charts
• Combo Charts
• Gauge Charts
• Geo Charts
• Line Charts
• Pie Charts
• Scatter Charts
• Stepped Area Charts
• Table Charts
• Tree Map Charts

…Ver galería

Inicio a los gráficos con Google Chart y PHP

Una manera clara y eficaz de presentar informes o estadísticas en web es usando la API chart.

En pocas lineas de código HTML se pueden generar diversos gráficos: columnas, pastel, mapa, área, lineal y mas. A cada gráfico le puedes configurar una serie de parámetros como por ejemplo: el color, ancho, alto, etc.
Si tu página web está creada con PHP, de una manera muy sencilla podemos generar gráficos dinámicos con una gran apariencia.

La página oficial es https://google-developers.appspot.com/chart/