Creando graficas con Google Charts y JQuery!

Standard

Que onda gente, acá andamos  con un nuevo tutorial esta vez crearemos una gráfica con Google Charts y su tan completa API.

google_chart_api

Entrando en Materia:

Primero a nuestro código HTML al que le queramos incrustar nuestra gráfica (en mi caso será una ChartLine pero existen muchas posibilidades en en API de Google Chart), le agregaremos el link para hacer referencia a la API de Google:

Creando nuestro código HTML

"<script type="text/javascript" src="https://www.google.com/jsapi"></script>"

Hecho esto,  ahora agregaremos nuestro contenedor de la gráfica, el cual es un simple div:

<div id="chart"> </div>

Ahora procederemos a la parte de los datos de nuestra gráfica, en un archivo .js, agregaremos el siguiente código:

Iniciando nuestra Gráfica

Cargamos la visualización de la API, incluyendo el paquete “Line” para nuestra grafica, además al momento de cargar nuestra API, cuando esta esté lista llamaremos a la función “drawChart” que dibujará nuestra gráfica

google.load('visualization', '1',  {       

             callback: function(){ drawChart();

      },
      packages:["corechart","line"] }

);

Preparando los limites para nuestra gráfica 

Ahora, agregaremos esto a nuestro código javascript, esto le indicara a nuestra gráfica, el numero de columnas que contendrá y que serán mostradas, en nuestro caso todas son de tipo number.

var data = new google.visualization.DataTable();
data.addColumn('number', 'Dia');
data.addColumn('number', 'Ventas Esperadas');
data.addColumn('number', 'Ventas Reales');

Insertando los datos para la gráfica

Ahora agregaremos las siguientes líneas de código las cuales contienen los datos de nuestra gráfica:

data.addRow([1, 50, 40 ]);
data.addRow([2, 60, 55 ]); 
data.addRow([3, 45, 34 ]);
data.addRow([4, 60, 79] );

Tomaremos el primer renglón para explicar como funciona:

data.addRow([1, 50, 40 ]);   // a nuestros datos le agregaremos [ posición, Ventas Esperadas(expresadas en número), Ventas Reales(expresadas en número)  ]

Configurando las opciones de la gráfica:

Ahora que ya tenemos nuestros datos solo resta configurar las opciones de la gráfica:

var options = {
chart: {
   title: 'Ventas de Marzo' //Especificamos el titulo de la gráfica },
   width: 600, // largo de la gráfica
   height: 250, // Ancho de la gráfica
   axes: { 
       x: {
          0: {side: 'top'}
       }
    }
};

Teniendo esto solo debemos especificar el contenedor de nuestra gráfica:

var chart = new google.charts.Line(document.getElementById('chart'));

chart.draw(data, options);

Con la ultima linea dibujamos nuestra gráfica en el navegador..

Y el resultado sería el siguiente:

Screen Shot 2016-04-07 at 6.50.56 PM

Listo así es como se hace la magia, si tienes dudas o comentarios contactarme y te ayudaré o puedes comentar y te responderé. Les dejare el código fuente en este link de mega para su descarga: Documentos Practica

PD: Acá te la dejo la API  de Google Chart por si necesitas tener mas referencias al respecto:  API GOOGLE

Saludos!

Nicolás Villegas

Email: nikodtb@gmail.com
Practicante de HunabSys R&D
Estudiante de Ing. en Sistemas Computacionales

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *