Foro:
[JavaScript] [Librería] Harry Plotter Publicado 14-12-2014 20:50:07
Antes que nada decir que el nombre es así. (Luego nos preguntamos por qué nos llaman frikis...)
Mi idea es mostraros el potencial de esto, con sus pros y sus contras y un pequeño ejemplo, no enseñaros a usarlo, ya que tiene muchas posibilidades y muchos métodos que no son necesarios en todos los casos.
Descripción
Harry Plotter es una librería JavaScript que permite hacer gráficos de barras, líneas y curvas tanto comparativas como acumuladas y gráficos de tarta. Todo ello de forma muy sencilla y sin necesidad de ningún otra librería ni plugin.
Funcionamiento
Harry Plotter usa la etiqueta <canvas> de HTML 5 que permite hacer todo tipo de gráficos y dibujos sin necesidad de nada más que HTML y JavaScript a diferencia de los gráficos antiguos que necesitaban Flash o Quicktime (para los que lo recuerden).
Ventajas e incovenientes
Es independiente de otras tecnologías (entiéndase tecnología como Flash, lenguajes, plugins...).
La librería pesa 15Kb, lo que la hace extremadamente ligera.
Es muy sencilla de utilizar.
Tiene eventos de ratón.
Tiene editor web en la propia página para hacer gráficos estáticos si sacas los datos de otro lado tendrás que cambiar la parte de los valores, pero te ayuda a definir el resto de datos.
-A veces falla con ciertos datos dejando espacio de más. Esto no afecta a los datos, solo a la visualización.
-La acción del evento de ratón es mostrar la cifra y no puede modificarse.
-El evento de ratón solo es de pasar por encima, no permite clic.
Licencia
Está bajo Licencia MIT, ¿esto qué quiere cedir? que a efectos prácticos es como si el autor lo dejara en el dominio público, puedes modificarla, compartirla, usarla para cualquier tipo de aplicación comercial o no comercial, crear una modificación y venderla... y todo sin necesidad de darle la autoría.
Eso si, el autor no es responsable de ningún fallo ni problema derivado de la librería y mucho menos de los programas derivados de esta.
Ejemplo de uso
Aquí os pongo un trozo de código que acabo de hacer. Las líneas importantes están comentadas con lo que hace, pero si no se entiende, lo explico más.
Para el ejemplo solo utilicé un par de parámetros para una pequeña demostración, tiene muchos más que aparecen explicados en la propia página con claridad.
[code]
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Harry Plotter</title>
<script src="js/harry.js"></script> <!-- Importamos la librería -->
</head>
<body>
<div id="contenedor"></div> <!-- Este es el contenedor que tendrá dentro el gráfico. El id puede ser el que queráis.-->
<script>
var c = plotter({ //Iniciamos. c pasará a guardar el gráfico.
container:"contenedor", //Id del contenedor
datas:[ //Metemos datos
{
title:"G1", //Título de estos datos
color:"#008000", //Color de los datos
values:[72,69,38,74,8,66,86,96,52,12,81,99,16,76,70,66] //Datos
},
{
title:"G2",
color:"#00d900",
values:[42,47,85,73,32,11,32,46,9,68,92,60,9,86,67,61]
},
{
title:"G3",
color:"#004000",
values:[27,60,24,12,67,39,12,25,16,43,69,98,90,31,60,51]
}
],
title:{ //Título del gráfico
color:"#008040", //Color del título
text:"Esto es muy verde" //Título del gráfico
},
mode:"chart:stack", //Modo de gráfico, en este caso de barras acumuladas. Si ponemos "pie" hará el de tarta.
autoscale:"top bottom", //Si queremos que se adapte por arriba y por abajo al tamaño del gráfico. Recomendado.
legends:{
color:"#0b0b0b" //Color del texto de la leyenda.
}
});
c.draw(); //Le decimos a c que se dibuje el gráfico.
</script>
</body>
</html>
[/code]
Y el resultado queda así:
Enlaces
· Página con los métodos descritos con detalle y algún ejemplo sencillo: http://nikopol.github.io/Harry-Plotter/#tab=readme
· Generador online de gráficos: http://nikopol.github.io/Harry-Plotter/#tab=generator
· GITHUB | Os recomiendo abrir el harry.js y darle al botón secundario sobre el botón de "Raw" y a "guardar enlace como" para evitar problemas. http://github.com/nikopol/Harry-Plotter
Un saludo,
Alvaro.
Mi idea es mostraros el potencial de esto, con sus pros y sus contras y un pequeño ejemplo, no enseñaros a usarlo, ya que tiene muchas posibilidades y muchos métodos que no son necesarios en todos los casos.
Descripción
Harry Plotter es una librería JavaScript que permite hacer gráficos de barras, líneas y curvas tanto comparativas como acumuladas y gráficos de tarta. Todo ello de forma muy sencilla y sin necesidad de ningún otra librería ni plugin.
Funcionamiento
Harry Plotter usa la etiqueta <canvas> de HTML 5 que permite hacer todo tipo de gráficos y dibujos sin necesidad de nada más que HTML y JavaScript a diferencia de los gráficos antiguos que necesitaban Flash o Quicktime (para los que lo recuerden).
Ventajas e incovenientes
Es independiente de otras tecnologías (entiéndase tecnología como Flash, lenguajes, plugins...).
La librería pesa 15Kb, lo que la hace extremadamente ligera.
Es muy sencilla de utilizar.
Tiene eventos de ratón.
Tiene editor web en la propia página para hacer gráficos estáticos si sacas los datos de otro lado tendrás que cambiar la parte de los valores, pero te ayuda a definir el resto de datos.
-A veces falla con ciertos datos dejando espacio de más. Esto no afecta a los datos, solo a la visualización.
-La acción del evento de ratón es mostrar la cifra y no puede modificarse.
-El evento de ratón solo es de pasar por encima, no permite clic.
Licencia
Está bajo Licencia MIT, ¿esto qué quiere cedir? que a efectos prácticos es como si el autor lo dejara en el dominio público, puedes modificarla, compartirla, usarla para cualquier tipo de aplicación comercial o no comercial, crear una modificación y venderla... y todo sin necesidad de darle la autoría.
Eso si, el autor no es responsable de ningún fallo ni problema derivado de la librería y mucho menos de los programas derivados de esta.
Ejemplo de uso
Aquí os pongo un trozo de código que acabo de hacer. Las líneas importantes están comentadas con lo que hace, pero si no se entiende, lo explico más.
Para el ejemplo solo utilicé un par de parámetros para una pequeña demostración, tiene muchos más que aparecen explicados en la propia página con claridad.
[code]
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Harry Plotter</title>
<script src="js/harry.js"></script> <!-- Importamos la librería -->
</head>
<body>
<div id="contenedor"></div> <!-- Este es el contenedor que tendrá dentro el gráfico. El id puede ser el que queráis.-->
<script>
var c = plotter({ //Iniciamos. c pasará a guardar el gráfico.
container:"contenedor", //Id del contenedor
datas:[ //Metemos datos
{
title:"G1", //Título de estos datos
color:"#008000", //Color de los datos
values:[72,69,38,74,8,66,86,96,52,12,81,99,16,76,70,66] //Datos
},
{
title:"G2",
color:"#00d900",
values:[42,47,85,73,32,11,32,46,9,68,92,60,9,86,67,61]
},
{
title:"G3",
color:"#004000",
values:[27,60,24,12,67,39,12,25,16,43,69,98,90,31,60,51]
}
],
title:{ //Título del gráfico
color:"#008040", //Color del título
text:"Esto es muy verde" //Título del gráfico
},
mode:"chart:stack", //Modo de gráfico, en este caso de barras acumuladas. Si ponemos "pie" hará el de tarta.
autoscale:"top bottom", //Si queremos que se adapte por arriba y por abajo al tamaño del gráfico. Recomendado.
legends:{
color:"#0b0b0b" //Color del texto de la leyenda.
}
});
c.draw(); //Le decimos a c que se dibuje el gráfico.
</script>
</body>
</html>
[/code]
Y el resultado queda así:
Enlaces
· Página con los métodos descritos con detalle y algún ejemplo sencillo: http://nikopol.github.io/Harry-Plotter/#tab=readme
· Generador online de gráficos: http://nikopol.github.io/Harry-Plotter/#tab=generator
· GITHUB | Os recomiendo abrir el harry.js y darle al botón secundario sobre el botón de "Raw" y a "guardar enlace como" para evitar problemas. http://github.com/nikopol/Harry-Plotter
Un saludo,
Alvaro.
