[Javascript] Crear Grafica de Lineas con Plot.ly
Plot.ly es una librería para crear gráficas de diferentes tipos, como lineas, barras, puntos, pie, histogramas, etc. en este articulo veremos gráfica de lineas.
Vamos a empezar descargando Plot.ly, lo podemos encontrar en su pagina oficial https://plot.ly/javascript/ y la ultima version la conseguimos desde github https://github.com/plotly/plotly.js/releases lo necesario esta en la carpeta dist, y lo esencial es el archivo plotly.min.js.
Código
Les dejo el código en un gist de github.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by http://evilnapsis.com –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Ejemplo con Plot.Ly</title> | |
| <!– <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> –> | |
| <script src="dist/plotly.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>Ejemplo Plot.ly</h1> | |
| <div id="chart"></div> | |
| <script> | |
| var data1 = { | |
| x: [1, 2, 3, 4], | |
| y: [1, 2, 3, 4], | |
| type: 'lines', | |
| name:'Datos 1', | |
| line:{ width: 5, color:'red',dash:'solid'}, | |
| marker:{ size: 10, color:'blue'} | |
| }; | |
| var data = [data1]; | |
| Plotly.newPlot('chart', data,{title:'Grafica de Ejemplo con Plot.ly'}); | |
| </script> | |
| </body> | |
| </html> |
En el ejemplo uso la librería que descargue pero si gustan también pueden usar el CDN que les deje comentado en el head. Le quitan los comentarios y eliminan la linea de abajo.
Tenemos un HTML comun, lo importante es el DIV para la gráfica con el id=”chart” y el script.
En el script que inicia en la linea 13 y termina en la linea 26 tenemos:
- De la linea 14 a la 21 se define el array de datos, las posiciones en X,Y en forma de array, el tipo de grafica ‘lines’, el nombre de la serie de datos ‘Datos 1’, adicionalmente le agregamos un ancho de linea: 5, color de linea: red, dibujo de linea, puede ser solid, dot o dotdashed… también agregamos parámetros para el marcador, tamaño=10, color=blue.
- En el linea 23 creamos un array con los datos, en este caso solo hay uno, pero podemos tener mas.
- En la linea 25 se crea la gráfica agregando los parámetros a la funcion Plotly.newPlot, los cuales son: el id del DIV, el array de datos y el layout donde va el titulo de la gráfica.
Resultado
Este es el resultado del código.
Funciones adicionales
Algunas de las funciones adicionales de Plot.ly son:
- Opción para descargar en PNG la gráfica generada.
- Opción para hacer Zoom en secciones de la gráfica
- Gráficas Responsive – Adaptable a cualquier tipo de pantalla.
- Buena documentacion
- Facilidad de personalización