Conectar y mostrar datos de google spreadsheet 
Autor: Jerome P.Buenos dias a todos
Simplemente quiero mostrar como conectar las hojas de datos de spreadsheet de google para mostrar bajo forma de tabla o graficos.
En el ejemplo que a continuación, aporto es bajo forma de tabla pero es viable poner graficas diversas.
En futuros ejemplos, aportare interconexiones entre graficas y tablas para poder realizar dashboard. Tambien es posible realizar estas consultas con Vue que ademas permite establecer tarjetas como las del objeto portafolio pero con conexion a base de datos.
Sin mas, comparto la el extracto de HTLM que debe ser pegado en el objeto HTLM.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Se cargan las tipologias de graficos de google
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
// Se define el nombre del contenedor que va a mostrar el grafico o tabla
"containerId": "visualization_div",
// Aqui colocamos nuestra dirección de la tabla de google spreadsheet con la que queremos conectar
"dataSourceUrl": "'https://docs.google.com/spreadsheets/d/1duPKi5KjKeqOKrseki1EzKO5vyrHslD3sBCin15VW5M/edit?usp=sharing'"
// Aqui definimos las condiciones que queremos para mostrar los datos. En este ejemplo, se muestran las filas con datos superiores a 100 de la columna B de la hoja de calculo y solamente las columnas A, C y B
"query":"SELECT A,C,B WHERE B > 100 ORDER BY B",
"refreshInterval": 5,
// Aqui definimos el tipo de grafico que queremos que muestre para los datos alamcenados. En este caso se puso forma de tabla
"chartType": "Table",
// Aqui mostramos las opciones de la tabla como por ejemplo lineas alternas sombreadas, mostrar el indice de la fila, ...
"options": {
"alternatingRowStyle": true,//Se alternan filas
"showRowNumber" : true,// Se muestran los indices de las filas
"page": 'enable',// Se habilita la paginación
"pageSize": 8,
"pagingSymbols": {
prev: 'Previo',
next: 'Siguiente'
}
}
});
}
// Se procede a dibujar la tabla o grafico solicitado
google.charts.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization_div" style="width: 800px; height: 400px;"></div>
Comparto adicionalmente , el enlace con los datos :
Hola Jerome P.
Excelente, muy buen aporte, felicidades por el espíritu de colaboración.
Voy a guardar tu post dentro de los recomendados
Saludos
Jorge M.
Autor
Gracias Jorge. Es un gusto intentar apoyar.
Adicionalmente, quiero mencionar el tema de poder manejar las fechas en el select del query ya que muchas veces es un dolor de cabeza hacerlo.
En el ejemplo anterior, basta cambiar el query
"query":"SELECT A,C,B WHERE B > 100 ORDER BY B",
por
"query":"SELECT B,C,A WHERE A<= datetime'2015-01-01 08:00:00'",
En este ejemplo, simplemente muestro como se lleva a cabo ese filtro. Es muy importante el formato de la fecha "YYYY-MM-DD HH:MM:SS" y el argumento de datetime. En caso de que fuera una fecha sin hora , en vez de datetime es date con el formato "YYYY-MM-DD"
Otra cosa, para dar formato a la tabla se puede en website X5 en la pestaña avanzado poner los css, correspondientes . Aqui dejo un ejemplo para la tabla que estamos viendo.
.EstiloCeldascabecera {
font-family: "Arial", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #FFFFFF;
background-color:#FF8000;
font-size: 16px;
padding: 8px !important;
border: solid 1px #FFFFFF;
}
.EstiloCeldastabla {
font-family: "Arial", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 14px;
padding: 8px !important;
border: solid 4px #FFFFFF;
}
Lo unico que debemos añadir en el ejemplo en el cuerpo del objeto HTLM en las opciones, debajo por ejemplo
"showRowNumber" : true,// Se muestran los indices de las filas
lo siguiente
"cssClassNames": {tableRow:'Estilobordespares',headerCell:'EstiloCeldascabecera',tableCell:'EstiloCeldastabla' },// Formato de cabecera
De todas formas, dejo el codigo HTLM completo con lo mencionado anteriormente,
En la pestaña codigo HTLM:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Se cargan las tipologias de graficos de google
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
// Se define el nombre del contenedor que va a mostrar el grafico o tabla
"containerId": "visualization_div",
// Aqui colocamos nuestra dirección de la tabla de google spreadsheet con la que queremos conectar
"dataSourceUrl": "https://docs.google.com/spreadsheets/d/1ZUynFHUFnGLEr473Niyd--ZyOPBerLa1eyt5PTmFRRI/edit?usp=sharing",
// Aqui definimos las condiciones que queremos para mostrar los datos. En este ejemplo, se muestran las filas con datos superiores a 100 de la columna B de la hoja de calculo y solamente las columnas A, C y B
"query":"SELECT B,C,A WHERE A<= datetime'2015-01-01 08:00:00'",
"refreshInterval": 5,
// Aqui definimos el tipo de grafico que queremos que muestre para los datos alamcenados. En este caso se puso forma de tabla
"chartType": "Table",
// Aqui mostramos las opciones de la tabla como por ejemplo lineas alternas sombreadas, mostrar el indice de la fila, ...
"options": {
"alternatingRowStyle": true,//Se alternan filas
"showRowNumber" : true,// Se muestran los indices de las filas
"cssClassNames": {tableRow:'Estilobordespares',headerCell:'EstiloCeldascabecera',tableCell:'EstiloCeldastabla' },// Formato de cabecera
"page": 'enable',// Se habilita la paginación
"pageSize": 8,
"pagingSymbols": {
prev: 'Previo',
next: 'Siguiente'
},
pagingButtonsConfiguration: 'auto',
}
});
}
// Se procede a dibujar la tabla o grafico solicitado
google.charts.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization_div" style="width: 800px; height: 400px;"></div>
En la pestaña avanzado de webiste X5
.EstiloCeldascabecera {
font-family: "Arial", Helvetica, Arial, sans-serif;
font-size: 18px;
color: #FFFFFF;
background-color:#FF8000;
font-size: 16px;
padding: 8px !important;
border: solid 1px #FFFFFF;
}
.EstiloCeldastabla {
font-family: "Arial", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 14px;
padding: 8px !important;
border: solid 4px #FFFFFF;
}