|

Muestra gráficas con el API de Google

ByLuis

Aunque a veces no es bueno depender de librerías externas, no todo el mundo puede permitirse usar recursos propios, por lo que esta librería de Google nos puede ser de mucha ayuda. Se trata de un API que nos permite mediante una llamada mostrar una imagen con una gráfica. Eso sí, hay que tener que el uso de esta librería está limitado a 50.000 queries por día y si se sobrepasa este límite se bloqueará temporalmente su uso y si se excede aún más el uso se bloqueará indefinidamente.

Por ejemplo esta llamada tendrá el siguiente resultado:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Gráfica de Google

La API es muy completa y nos permite indicar datos en varios formatos, diferentes tipos de gráficas (líneas, barras, tarta…), colores, relleno, background y mucho más.

Ejemplos

http://chart.apis.google.com/chart?cht=lc&chd=s:9gounjqGJD&chco=008000&chls=2.0,4.0,1.0&chs=200x125&chxt=x&chxl=0:||c|d|a|o|x|v|V|a|&chm=a,990066,0,3.0,9.0|c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|o,FF9900,0,4.0,20.0|s,3399CC,0,5.0,10.0|v,BBCCED,0,6.0,1.0|V,3399CC,0,7.0,1.0|x,FFCC33,0,8.0,20.0|h,000000,0,0.30,0.5

Gráfica de Google

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chs=200x125&chf=c,lg,45,ffffff,0,76A4FB,0.75|bg,s,EFEFEF

Gráfica de Google

http://chart.apis.google.com/chart?cht=bhs&chco=ff0000,00ff00,0000ff,&chs=200x125&chd=s:FOE,THE,Bar&chxt=x,y&chxl=1:|Dec|Nov|Oct|0:||20K||60K||100K|

Gráfica de Google

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200x125

Gráfica de Google

Google Chart API

Vía / WebAppers

Similar Posts

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers

jsMath: incluye fórmulas matemáticas en tu web

ByLuis

jsMath es una paquete basado en la capa de matemáticas TeX, que nos permite añadir ecuaciones y notaciones matemáticas en nuestras páginas web. Con soporte para muchos navegadores en diferentes sistemas operativos, lo cual nos ahorra un problema de compatibilidades.
jsmath.png
jsMath intenta usar fuentes TeX, y cuando no se disponga de ellas usará imágenes que son escalables y con fuentes Unicode, por lo que a la hora de imprimir no perdería resolución. No utiliza directamente MathML porque este no está pensado para ser escrito directamente y porque no hay demasiados navegadores que lo admitan.
jsMath
Vía / dzone

Crear aplicaciones offline con HTML5

ByLuis

Cuando cada día la gente está más online, no está de mal del todo permitir que nuestras aplicaciones web se vean de modo offline, o crear una versión offline de nuestra web. Podemos preguntarnos para qué pensar en lo offline cuando todo el mundo está conectado a todas horas, pues por ejemplo para versiones para móviles, que no siempre se está 100% conectado.

HTML5 permite indicar qué elementos de nuestra web se pueden ver offline o mostrar una página offline en caso de que se acceda a ella. Su uso es bastante sencillo y no nos llevará mucho tiempo.

Lo primero es indicar el manifiesto:

El manifiesto será un fichero que contendrá la información sobre los ficheros cacheables, la página a mostrar offline o contenidos no cacheables. Para que el navegador lo entienda habrá que indicar su MIME type:

AddType text/cache-manifest manifest

Luego habrá que indicar en el fichero que es un manifiesto añadiendo CACHE MANIFEST a la primera línea y luego indicando los ficheros cacheables, la página offline o los contenidos no cacheables:

CACHE MANIFEST
# v1
# Contenido cacheable
pagina.html
pagina.css
pagina.js
pagina.png
# Pagina offline
FALLBACK: / /estoy-desconectado.html
# Paginas dinamicas no cacheables
NETWORK: /path/*

Si la aplicación ha cambiado y necesitamos que el navegador lo refresque, deberemos modificar el fichero, por ejemplo cambiando el número de versión. El fichero .manifiest también puede ser cacheable (mediante htaccess, por ejemplo), ya que el navegador intentará acceder a él siempre que se acceda a la página.

No hay que olvidarse de la API del cache, el cual nos puede aportar mucho en nuestro desarrollo, sobre todo para detectar si el navegador está online u offline:

window.navigator.onLine

Offline Apps with Application Cache: Quickstart, Tips, and Deep Dive

|

YouTube, Picasa Web Albums y Documents List en PHP!

ByLuis

La gente de Google ha sacado un API en PHP para tres de sus productos: Youtube, Picasa Web Albums y Document Lists. El API está disponible en el framework Zend Framework 1.03+ y como un paquete independiente.
La documentación es muy completa y su uso sencillo. Hay que estar seguro de que nuestra instalación soporta OpenSSL para poder leer feeds autenticados.
YouTube, Picasa Web Albums and Documents List in PHP!
Vía / Ajaxline

| |

Crea tu motor de búsqueda con Google y PHP

ByLuis

google.pngAlgunas veces nos podemos encontrar con la necesidad de incluir un motor de búsquedas en nuestra aplicación web, no me refiero a uno interno, sino a uno que busque dentro de todo Internet.

Normalmente se soluciona mediante un formulario que llama a la página de Google, pero eso puede ser un tanto “feo” y no ser exáctamente lo que buscamos.

Si lo que quieres es un script que llame al API de Google para poder recibir las resultados de una búsqueda a Google y luego mostrarla, verás como se hace en la traducción que hacemos del siguiente artículo.

Read More “Crea tu motor de búsqueda con Google y PHP”

Añade skins a tu página web

ByLuis

Muy buen truco para añadirle pieles (skins) a tu página web. Normalmente una página web no suele tener la necesidad de modificar el diseño, pero una aplicación web del estilo comunidad de usuarios si puede ser buena idea el personalizar la apariencia de la página.
En este caso se trata de un método para que el usuario modifique la página que ve, aunque pequeños cambios pueden hacer que sea el programador quien modifique la piel según circunstancias.
El método es sencillo, nos creamos un directorio dónde almacenaremos todas las pieles, cada una en un directorio. En cada directorio de pieles habrá una página que contenga la cabecera, el pie de página, la barra lateral y el resto de partes de la página que queramos personalizar.
Mediante cookies almacenaremos la piel que el usuario desea ver o que haya usado con anterioridad. En esta cookie lo que guardaremos realmente será el nombre del directorio de la piel, aunque claro, esto no es muy seguro y yo más bien almacenaría un índice que corresponda al directorio.
Si le damos un par de vueltas más, podríamos tener una piel por defecto y en el caso de que un elemento de la página (por ejemplo el footer) no se encuentre, obtener ese elemento en la piel por defecto (algo parecido usa Seagull).
Podéis ver el código necesario en el enlace que os ofrecemos.
Skinning Your Website
Vía / Good PHP Tutorials