Crear Grafica de Barras con Plotly.js

 in Javascript by

El día de hoy vamos a crear una grafica de barras con la librería Plotly.js , Pltly.js es una librería open source que podemos usar para proyectos libres y comerciales, empecemos.

Ya he escrito anterior mente sobre la librería Plotly.js en un articulo sobre Crear graficas de lineas con Plotly.js, ahora veamos como crear graficas de barras que no es muy difícil.

Descargar la librería Plotly.js

Vamos a descargar la librería Plotly.js desde su pagina oficial o desde su perfil de github.

Pagina oficial: https://plotly.com/javascript/

Perfil de github: https://github.com/plotly/plotly.js

Una vez descargado el paquete lo que haremos es usar la carpeta “dist” donde se encuentran los archivos js necesarios, para esta librería no es necesario usar jquery.

Código

Vamos a empezar a codificar un archivo html común y corriente y vamos a ir a agregando la librería plotly.js en el <head> del documento.

<script type="text/javascript" src="dist/plotly.js"></script>

Ahora en el body del documento vamos a crear un <div> donde se va a mostrar la grafica.

<div id="grafica"></div>

En el siguiente paso vamos a agregar el codigo javascript para activar la grafica.

<script type="text/javascript">

// Datos de la grafica
var datos = {
  type: 'bar',
  x: [1, 2, 3, 4],
  y: [10, 20, 30, 15],
  marker: {
      color: 'red',
      line: {
          width: 2.5
      }
  }
};

// agregamos los datos al array de datos, ya que podemos tener varias series de datos
var data = [ datos ];
// agregamos en el layout el titulo a la grafica y el tamaño de fuente
var layout = { 
  title: 'Probando Plotly.js',
  font: {size: 18}
};
// configuramos como tipo resposiva
var config = {responsive: true}
// activamos la grafica con todos los paramentros anteriores
Plotly.newPlot('grafica', data, layout, config );
</script>

Y listo, guardarmos, ejecutamos y a continuacion el resultado.

Descargar

A continuacion el link de descarga con el codigo de ejemplo y la libreria plotly.js

Link: https://drive.google.com/file/d/1cQ6KAk7k_KEeOiVYe1KNbVMJ1b8tG5Mr/view

Leave a comment