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'] ]);
Archivo
Posts Tagged ‘google chart’
Map de Google Chart
26 de agosto de 2014
1 comentario
No confundir con la API de Google Maps!!
Map nos va a permitir posicionar pares Lat-Long en un mapa. Podría utilizarse con direcciones también, pero eso no me interesa, voy a trabajar exclusivamente con coordenadas X-Y.
Ejemplo Completo:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.load('visualization', '1', { 'packages': ['map'] }); google.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Population'], ['China', 'China: 1,363,800,000'], ['India', 'India: 1,242,620,000'], ['US', 'US: 317,842,000'], ['Indonesia', 'Indonesia: 247,424,598'], ['Brazil', 'Brazil: 201,032,714'], ['Pakistan', 'Pakistan: 186,134,000'], ['Nigeria', 'Nigeria: 173,615,000'], ['Bangladesh', 'Bangladesh: 152,518,015'], ['Russia', 'Russia: 146,019,512'], ['Japan', 'Japan: 127,120,000'] ]); var options = { showTip: true }; var map = new google.visualization.Map(document.getElementById('chart_div')); map.draw(data, options); }; </script> </head> <body> <div id="chart_div"></div> </body> </html>
Podemos ver cómo la estructura es exactamente igual a la estructura de cualquier otro control de Google Chart.
Paquete a cargar
map
google.load("visualization", "1", {packages: ["map"]});
.
Datos
Antes he comentado que sólo voy a utilizar pares Latitud-Longitud, no como en el ejemplo anterior, así que la estructura de los datos serían como en el siguiente ejemplo:
Vemos como la estructura es Latitud – Longitud – Nombre.
Limitación: Sólo se pueden cargar 400 marcadores.
.
Opciones
Modificando marcadores:
Ejemplo.
var options = { icons: { default: { normal: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png', selected: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png' } } };
La opción icons nos lo va a permitir.
Otras opciones:
- Habilitar la rueda del ratón para hacer zoom – enableScrollWheel. Por defecto está a false
- showTip – Habilitar que se muestre el valor Name cuando hacemos clic. Por defecto está a false.
- showLine – Dibuja una línea que une los puntos. Por defecto a false.
- lineColor y lineWidth – Sirven para configurar la línea anterior.
- mapType – Tipo de mapa que aparecerá. Por defecto está hybrid. Los valores posibles son ‘normal’, ‘terrain’, ‘satellite’ or ‘hybrid’.
- useMapTypeControl – sirve para que aparezca el control que nos permite cambiar el tipo de mapa.
- zoomLevel – Es el nivel de zoom. Va desde 0 (mundo completo) a 19. De todas formas, el nivel de zoom se ajusta a los datos dibujados
Nota: Las opciones width y height parecen no funcionar. Modificar las CSS del DIV para darle alto y ancho.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/map
.
Categorías: Desarrollo web
google chart, google maps, google maps api, map, mapa, marcador, marker, zoom
Gauge – El Indicador de Google Chart
26 de agosto de 2014
Deja un comentario
Gauge
Paquete a cargar
gauge
google.load("visualization", "1", {packages: ["gauge"]});
.
Datos
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.
Opciones
Ejemplo:
var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 };
- redFrom: Nos permite indicar el valor (en %) donde comienza el rojo
- redTo: Nos permite indicar el valor en % donde termina (debería ser siempre 100)
- yellowFrom
- yellowTo
- greenFrom
- greenTo
- majorTicks: número de líneas grandes en el visor
- minorTicks: número de líneas pequeñas en el visor entre cada par de líneas grandes
- animation: {duration: ms} Podemos expresar la animación de la aguja (el tiempo en milisegundos que tarda en ponerse en su lugar). Por defecto es 400 ms.
- animation: {easing: ms}Es el modo en el que se mueve. Por defecto es ‘linear’, pero puede ser:
- ‘in’ – Comienza despacio y acelera
- ‘out’ – Comienza rápido y frena
- ‘inAndOut’ – El inicio y el fin son lentos
A
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge
.
Categorías: Desarrollo web
acelerador, gauge, google chart, gráfico, indicador, javascript, magnitud
Table – La Tabla de Google Chart
26 de agosto de 2014
Deja un comentario
Table
Paquete a cargar
table
google.load("visualization", "1", {packages: ["table"]});
.
Datos
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;
Opciones
- Con cssClassNames se pueden aplicar estilos CSS a las distintas partes de la tabla.
- Paginación con la opción page que por defecto está a ‘disable’. Puede tomar los valores ‘enable’ y ‘event’.
- Tamaño de página (si paginación está activado) con pageSize.
- Ordenación al hacer clic en la columna. Está activada por defecto la opción sort, es decir, valor ‘enable’, también tiene ‘disable’ y ‘event’ (esta última servirá para capturar el evento).
NOTA: Me encanta la sencillez de la paginación en Table.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/table.
Categorías: Desarrollo web
google chart, gráfico, javascript, paginación, paginar, tabla, table
ClandestickChart – Candelabro en Google Chart
25 de agosto de 2014
Deja un comentario
No sé la verdad si se llama Candelabro este tipo de gráfico… Tendré que preguntarle a algún matemático. Desde luego la traducción es candelabro.
Un gráfico candelabro es una manera de graficar los mercados financieros. Contrasta con los gráficos de barras y los de líneas como una forma común de observar el comportamiento de los precios.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Datos
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
Opciones
Los colores de relleno del candelabro:
candlestick: {'fallingColor' : {'fill': 'red'}}
candlestick: {'risingColor' : {'fill': 'green'}}
.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart
.
Categorías: Desarrollo web
candelabro, candlestickchart, google chart, gráfico, javascript
Histogram – Histograma en Google Chart
25 de agosto de 2014
Deja un comentario
Histogram
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Datos
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.
Histogramas con multiseries:
Es posible crear programas con múltiples series, para ello simplemente hay que añadir más columnas numéricas, no tener solo una. Se puede hacer, pero para mi estudio no es interesante.
Opciones
- bucketSize – Cambiar el tamaño del cubo (Si no, él lo hará según estime)
histogram: { bucketSize: 10000000 }
- lastBucketPercentile – Percentiles – Para eliminar por encima y por debajo. (En el caso del ejemplo, se eliminan el 5% por encima y el 5% por debajo, quedando un Histograma mucho más legible.
histogram: { lastBucketPercentile: 5 }
.
Recomendación de opciones:
Creo que lo más recomendable es eliminar la leyenda (legend: ‘none’)
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram
Categorías: Desarrollo web
corechart, google chart, histograma, javascript, percentil
Tablas de Datos en Google Chart
25 de agosto de 2014
Deja un comentario
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;
.
Categorías: Desarrollo web, Uncategorized
DataTable, datos, google chart, gráficos, javascript, tabla
AreaChart – Gráfico de Áreas con Google Chart
24 de agosto de 2014
Deja un comentario
El gráfico de áreas funciona igual que BarChart, ColumnChart y LineChart.
Utilizaremos la misma tipología a la hora de crear los datos, tendrán las mismas opciones, e incluso se pueden apilar:
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
.
Opciones
Al igual que BarChart y ColumnChart, podemos apilar
- isStacked – Por defecto está a false. Sirve para poner áreas apiladas.
isStacked: true
Al igual que LineChart y ScatterChart, podemos modificar la forma y tamaño del punto:
Forma y tamaño del punto:
Se expresa mediante la opción pointShape. Por defecto, la forma del punto es un círculo (circle), pero puede tener los siguientes valores:
- ‘circle’,
- ‘triangle’,
- ‘square’,
- ‘diamond’,
- ‘star’,
- ‘polygon’
Entonces, si el valor por defecto es el circle, ¿por qué no se ve el punto en el gráfico de líneas? Básicamente porque la opción pointSize está a 0, por eso no se ve. Si modificamos su valor, ya sí podremos verlo:
'pointShape': 'triangle',
'pointSize': 10,
.
Datos
Por ejemplo serían:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/areachart
.
Categorías: Desarrollo web
apilado, área, corechart, google chart, gráfico
LineChart – El gráfico de líneas de Google Chart
24 de agosto de 2014
Deja un comentario
Es el típico gráfico de líneas.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
.
Opciones
Curvar las líneas:
Para conseguir un gráfico como el siguiente:
Simplemente hay que utilizar la opción curveType:
curveType: 'function'
Cambiar la orientación del gráfico
Utilizando la opción orientation, que por defecto está a horizontal, poniéndola a vertical:
orientation: 'vertical'
Anchura de la línea:
Utilizando lineWidth. Por defecto está a 2, podemos variarla para aumentar el grosor de la línea.
lineWidth: 5
Color de fondo del gráfico:
Utilizando backgroundColor se puede establecer. Hexadecimal recomendable
Forma y tamaño del punto:
Se expresa mediante la opción pointShape. Por defecto, la forma del punto es un círculo (circle), pero puede tener los siguientes valores:
- ‘circle’,
- ‘triangle’,
- ‘square’,
- ‘diamond’,
- ‘star’,
- ‘polygon’
Entonces, si el valor por defecto es el circle, ¿por qué no se ve el punto en el gráfico de líneas? Básicamente porque la opción pointSize está a 0, por eso no se ve. Si modificamos su valor, ya sí podremos verlo:
'pointShape': 'triangle',
'pointSize': 10,
.
Datos
Por ejemplo serían:
var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]);
Es decir, los Datos en LineChart son iguales que en BarChart y en ColumnChart.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
Categorías: Desarrollo web
corechart, google chart, gráfico, javascript, líneas, line, LineChart
ScatterChart – Gráfico de dispersión en Google Chart
24 de agosto de 2014
Deja un comentario
Este gráfico es muy interesante, ya que vamos a poder ver una nube de puntos comparando dos variables, cada una representada en un eje.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Opciones
Aunque es válida para muchos otros tipos de Gráficos, voy a hablar de la Leyenda:
- legend
Para no tener leyenda:
legend: 'none'
Posición:
'legend':'left'
Tamaño de la leyenda:
width: 400,
chartArea: {width: '50%'}Con lo anterior, conseguimos reservar sólo para el área del gráfico el 50%, así habrá más sitio para la leyenda.
Para cambiar la fuente de la leyenda:
legend: {position: 'top', textStyle: {fontSize: 14}}Recomendación de opciones:
Creo que lo más recomendable es eliminar la leyenda (legend: ‘none’) y ponerle título a los ejes (vAxis: {title: ‘vertical’}).
Datos
Ejemplo:
var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]);
Para especificar los datos vemos que hay que especificar dos columnas numéricas (siempre en la primera fila expresamos los nombres de cada una de las variables.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart
.
Categorías: Desarrollo web, Uncategorized
chart, dispersión, google chart, gráfico, puntos
ColumnChart – Gráfico de Columnas verticales con Google Chart
24 de agosto de 2014
1 comentario
El ColumnChart es un gráfico de columnas igual que el gráfico de barras, pero ahora en vertical.
No hay apenas diferencias con el BarChart, incluyendo incluso las columnas apiladas con la opción isStacked.
Opciones
Por ejemplo, no comentado hasta ahora, tenemos la opción hAxis y la opción vAxis que nos permiten poner un titulillo a los ejes.
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
.
Paquete a cargar
corechart
google.load("visualization", "1", {packages: ["corechart"]});
Datos
La misma estructura tiene ColumnChart que BarChart.
Más info:
https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart.
Categorías: Desarrollo web, Uncategorized
columnas, columnchart, google chart, gráfico
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 