En el Blog e posteado algunos tutoriales sobre gráficas utilizando la librería Jpgraph, que para mi es muy completa y sencilla de utilizar. Pero hoy vamos a ver otra librería (Plugin) que nos permite crear gráficas se llama HighCharts.
La principal diferencia entre las dos:
- JpGraph funciona de lado del servidor ya que es una librería PHP.
- HighCharts funciona del lado del cliente usando Js.
Y creo con eso englobo las diferencias jajaja.
Pero si es del lado del cliente entonces ¿Cómo las podrías utilizar para hacerla funcionar con consultas en Mysql?. Bueno una respuesta rápida podría ser Ajax. Así que no hay gran trabajo para utilizarla.
Hoy les voy a dejar el ejemplo de inicio que nos presenta HighCharts en su página oficial, los invito a que la prueben y me dejen sus comentarios, que pros y contras encuentran en utilizar esta utilieria en lugar de Jpgraph. En lo general creo que las 2 son muy buenas. La diferencia rádica tal vez en lo visual.
Bueno para no entrar en más detalle les dejo una imagen de como se vería el resultado Final y empecemos con el código.
Lo que vamos a hacer es una gráfica muy sencilla sobre el consumo de fruta y entonces tenemos en nuestro eje Y las frutas que se han consumido(manzanas,platanos,naranjas) y en el eje X las personas que han consumido(Ana y Juan).
Lo primero que tenemos que hacer es un archivo HTML con la siguiente estructura:
<html>
<head>
<title>Ejemplo 1 Highcharts</title>
</head>
<body>
<div id="container" style="width:80%; height:300px;"></div>
</body>
</html>
Es una estructura básica con el titulo "Ejemplo 1 HighCharts" y en el body incluí un div con el id="container" al que le indicamos que tenga un 80% de ancho y 300px de alto.
Ahora Para que la utileria HighChart funcione es necesario que se haga referencia a Jquery por lo que antes que otra cosa es necesario que pongamos los links de jquery. En este ejemplo vamos a utilizar los repositorios de la página oficial, pero se pueden descargar y cargar localmente lo que es más recomendable.
Para ver las ultimas versiones y realizar la descarga visita la página. https://jquery.com/download/
Después de Jquery vamos a poner el link de la utilería el cual lo pueden descargar de la página oficial http://www.highcharts.com/docs/getting-started/installation
Los links los vamos a colocar dentro de la sección header de nuestro archivo html.
<head>
<title>Ejemplo 1 Highcharts</title>
<!--Links a Jquery-->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--Link de la utileria highcharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
Ahora vamos a hacer el script donde mandamos llamar a la utileria y creamos la gráfica. Como lo mencione anteriormente esta utilería trabajo con código Js.
Veamos el script y despues lo explicaré:
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: { type: 'bar'},
title: { text: 'Consumo de fruta'},
xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
yAxis: { title: { text: 'Frutas consumidas' }},
series: [
{ name: 'Ana', data: [1, 0, 4]},
{ name: 'Juan', data: [5, 7, 3]}
]
});
});
</script>
Lo primero que hacemos es indicar una función que se ejecutará al cargar el documento.
Dentro de esta función el objeto con id container ( $('#container') ) invoca al constructor highcharts,
y le vamos a pasar los siguientes parámetros(opciones):
- chart: Aquí se indican las diferentes opciones referentes al área donde se creará el gráfico. Tiene diferentes opciones que se pueden configurar como son: el tipo(type), color de fondo, margenes, eventos, color del borde, etc.
- Dentro de Chart solo vamos a configurar la opción Type que es donde vamos a indicar el tipo de gráfica que vamos a hacer, en este ejemplo estamos utilizando una gráfica de barras por lo que la opción de type será 'bar'.
- title: Aqui se configura todo lo referente al tutilo de la gráfica entre sus opciones configurables están alineación, texto, margenes, estilo,etc.
- En title lo que vamos a configurar es la opción text: que es donde vamos a poner en sí el titulo de la gráfica que en el ejemplo es "Consumo de fruta".
- xAxis: Hace referencia al eje X, esta opción tienen muchisimas categorias que se pueden modificar como son las categoriías, colores, labels, formato del contenido si es campo de fecha, valores decimales, eventos, etc.
- Para el ejemplo solo se modificarán las categorias del eje de X y le pondremos los siguientes valores: categories:['Manzanas', 'Platanos', 'Naranjas']
- yAxis: Hace referencia al eje Y, al igual que el anterior tienen una cantidad muy grande de atributos que se pueden modificar , en este caso las categorías las dejamos a que automáticamente ponga números.
- Para el ejemplo le vamos a configurar su atributo title para que aparezca debajo del eje "frutas consumidas". Por default tiene configurado su atributo allowDecimals como true por eso se ven los valores 0.5 , 1.5 . Este valor también lo podemos desactivar cambiando la opción a false.
- Series: Es donde se indican los valores que van a ser graficados, para cada serie de valores se tienen que agregar una linea marcada por llaves{ } dentro de cada linea se van a especificar el nombre de ese valor (name) y las cantidades referidas en el eje X (data[]) por ejemplo:
- {name:'Ana', data:[1,0,4]} Esto quiere decir que Ana se comio 1 manzana, 0 platanos y 4 naranjas.
- {name:'Juan', data[5,7,3]} Y juan se comió 5 manzanas, 7 platanos y 3 naranjas.
Despues de Series se cierra el constructor y se cierra la función. El Script se pone en la sección head debajo de los links. El código completo quedá de la siguiente manera:
<html>
<head>
<title>Ejemplo 1 Highcharts</title>
<!--Links a Jquery-->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--Link de la utileria highcharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: { type: 'bar'},
title: { text: 'Consumo de fruta'},
xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
yAxis: { title: { text: 'Frutas consumidas' }},
series: [
{ name: 'Ana', data: [1, 0, 4]},
{ name: 'Juan', data: [5, 7, 3]}
]
});
});
</script>
</head>
<body>
<div id="container" style="width:80%; height:300px;"></div>
</body>
</html>
Guardamos el código y corremos y se verá la gráfica de la siguiente manera:
Podemos Observar que tiene efectos visuales muy bonitos y más profesionales que Jpgraph (es la magia del JQuery) Inclusive tiene efectos al pasar el mouse.
Para que cambie los colores se pueden descargar temas desde la página oficial o como en este ejemplo solo agregue la siguiente linea dentro de la función y antes del llamado al constructor.
Highcharts.setOptions({
colors: ['#058DC7', '#50B432']
});
$('#container').highcharts({
chart: { type: 'bar'},
title: { text: 'Consumo de fruta'},
xAxis: { categories: ['Manzanas', 'Platanos', 'Naranajas']},
yAxis: { title: { text: 'Frutas consumidas' }},
series: [
{ name: 'Ana', data: [1, 0, 4]},
{ name: 'Juan', data: [5, 7, 3]}
]
});
Con Highcharts.setoptions en su atributo colors, le estoy pasando los tonos azul y verde para que el resultado final sea:
Bueno ese sería el resultado final. Como se pueden dar cuenta en realidad es muy sencillo siempre y cuando tengas al menos el conocimiento básico de JQuery y Js.
Te vuelvo a dejar por aquí el link a la página oficial de HighCharts para que puedas ver todos las posibilidades que te permite.
http://www.highcharts.com/products/highcharts
Espero que te sirva este pequeño tutorial. Como siempre espero tus comentarios y sugerencias para nuevos tutoriales.
"Programar no tiene que ser tan difícil como parece...."
Para ponerla Vetical....
ResponderEliminarPara poner las barras verticales, quita chart: { type: 'bar'}, y pon las series de la siguiente manera:
Eliminarseries: [
{ type: 'column',name: 'Ana',data: [1, 0, 4]},
{ type: 'column',name: 'Juan',data: [5, 7, 3]}
]
Y que me jale desde la base de datos... la informacion...
ResponderEliminarPara esto necesitarias hacer la consulta a tu base de datos previamente talvez con un post de Ajax. y la información ponerla como variables en JS y estas variables agregarlas en la sección data de cada serie.
EliminarHola tengo una consulta, necesito hacer grafico de un solo campo ejemplo, campo CIUDAD donde las personas que ingresan colocaran de que ciudad son, que el grafico extraiga de Chicago tal% de los Angeles tal% etc.Como seria la sintaxis?....De antemano muchas gracias
EliminarIf you're trying hard to burn fat then you absolutely need to start following this brand new personalized keto diet.
ResponderEliminarTo create this keto diet service, certified nutritionists, fitness trainers, and top chefs have joined together to produce keto meal plans that are efficient, decent, money-efficient, and delightful.
Since their grand opening in early 2019, thousands of individuals have already remodeled their figure and health with the benefits a smart keto diet can give.
Speaking of benefits; clicking this link, you'll discover 8 scientifically-tested ones given by the keto diet.