MisNotasLinux_blog: Google Charts Tips

3 de agosto de 2014

Google Charts Tips

Unos de las apis más completos para la presentación gráfica de datos en páginas web es
Google Charts.

https://developers.google.com/chart/

Su manejo es muy sencillo y hay numerosos ejemplos, documentación, y muchos post de usuarios (muchos de ellos erróneos, que no funcionan!!) lo que ayuda y a veces dificulta su uso.

Con los ejemplos y documentación la curva de aprendizaje es muy rápida y pronto tendremos gráficas realmente impresionantes en nuestra web.

Aquí dejo un borrador de las notas de las configuraciones que he tenido que hacer y como lo he conseguido:

0) Ejemplo y opciones de una Gráfica con GoogleCharts:
https://developers.google.com/chart/interactive/docs/gallery/linechart

1) Max / Min del eje Y:
vAxis: { minValue: 0, maxValue: 100 },

Si hay algún valor de los datos superior o inferior a minValue o maxValue, no seran tenidos en cuenta.
Para que no se rendericen valores superiores o inferiores a unos max/min hay que hacerlo con:
vAxis: { viewWindow:{max:"value", min: "value"},

https://developers.google.com/chart/interactive/docs/gallery/areachart

2) Fechas en el eje X:
Representar datos con fechas.
Hay que usar new Date( "date", "valor);
La fecha se puede indicar de muchas maneras, tambien se puede usar directamente un TimeStamp.

https://groups.google.com/forum/#!searchin/google-visualization-api/haxis$20date/google-visualization-api/E3XyVBLz8kc/IUOBrgEPxxEJ

3) Formatear fechas en el eje X:
Yo quería que en el eje x indicara la hora, seguido de la letra "h", día y mes: 12h02/04
El código para conseguir esto:
hAxis: { format: "HH'h'dd/MM/yy" }

https://developers.google.com/chart/interactive/docs/reference#dateformatter

4) Quitar separador decimal en el eje Y:

vAxis: {format: '0'}

http://stackoverflow.com/questions/15154226/setting-vaxis-format-in-google-line-chart

5) Centrar titulo del gráfico
???

6) Quitar leyendas o fijar su posición:
http://stackoverflow.com/questions/14341673/change-color-of-data-title-google-visualization

7) Recopilación de opciones de configuración:

var chart = new google.visualization.LineChart(document.getElementById('visualization'))
.draw(data, {
legend: { position: "none" }, // turn off the legend
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ['#769dbb'], //Line color
backgroundColor: '#1b1b1b',
hAxis: { textStyle: {color: '#767676' , fontSize: 11} },
vAxis: { minValue: 0, textStyle: {color: '#767676'} },
});

http://stackoverflow.com/questions/14341673/change-color-of-data-title-google-visualization

8) Color y grosor de la lineas de la serie
http://stackoverflow.com/questions/6977877/how-to-change-the-appearance-of-the-google-line-chart

9) Borde y color del grafico:
backgroundColor: { stroke: '#000000', strokeWidth: 1, fill: 'color'}

https://developers.google.com/chart/interactive/docs/gallery/areachart_old?csw=1

10) Determinar color del area de la grafica y color del borde todo junto:
chartArea: { {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}}

https://developers.google.com/chart/interactive/docs/gallery/areachart_old?csw=1

11) Google Chars Wizart !!!!:
https://code.google.com/apis/ajax/playground/?type=visualization

Hay ejemplos y un editor de codigo en el que se pueder ver el resultado y debug

12) Determinar el número de lineas horizontales.
Todavia no he descubierto como hacer una division cada vg 50 puntos.

Se puede poner una matriz con la posición de cada linea.
vAxis: { ticks: [5,10,15,20] }

Y se pueden fijar el número de divisiones
vAxis: gridlines: { count: 4}

Fijar el numero de lineas secundarias entre dos principales:
vAxis: {minorGridlines: { count:1 } }

Ok, pero no aparecen los numeros en los minorGridlines ???!!!!!

Mi ALGORITMO PARA DETERMINAR NUMERO DE LINEAS:
vAxis: { format: '0', minValue: $ymin, maxValue: $ymax, gridlines:{count:(($ymax-$ymin)/$div)+1} },

https://developers.google.com/chart/interactive/docs/gallery/areachart?csw=1

13) Unir dos series de datos indpendientes en un mismo grafico:
Cuando X es comun a las dos series no se hace con una matriz del tipo:
[x, y1, y2 ...]
Pero cuando los datos son independientes y no coinciden la variable X hay que unir los datos:
http://jsfiddle.net/asgallant/XF7JE/
Esto no me ha funconado, aunque tengo que revisar el código.

Otra forma seria hacruna consmta combinada en SQL,

14) Varios graficas en un pagina web:
https://groups.google.com/forum/#!topic/google-visualization-api/OaG0wS2k2N0

impo: si hay graficos gauge hay que cargar: