Bots de conversa de Telegram amb Google Apps Script

Bots de conversa Exemples Dades pràctiques   Recursos CITCEA
Google Apps Script Projectes Interacció   Inici

Crear gràfics

Google disposa d'una eina força potent per generar gràfics de diversos tipus. Hi ha nombroses comandes per fer-ho. A continuació en comentem algunes. Es pot trobar informació completa al web de Google.

Normalment els gràfics es creen a partir d'una taula. Les comandes per crear i omplir una taula són:

Funció Descripció Exemple
newDataTable() Crea una nova taula de dades (buida) var taula = Charts.newDataTable();
addColumn(tipus, etiq) Crea una columna a la taula
Les dades poden ser text, valors o dates		 taula.addColumn(Charts.ColumnType.STRING, row[0]);
taula.addColumn(Charts.ColumnType.NUMBER, row[1]);
taula.addColumn(Charts.ColumnType.DATE, "Data");
addRow([val1, val2, ...]) Afegeix una filera a la taula
Fent servir un vector amb un element per columna		 taula.addRow(["Dilluns", 27, row[2]]);
setValue(filera, columna, valor) Posa un valor a una casella concreta de la taula taula.setValue(i, j, val);
build() Genera un objecte que conté la taula a partir de les dades var taula_dades = taula.build();

Les comandes per crear un gràfic són:

Funció Descripció Exemple
newAreaChart() Crea un nou diagrama d'àrees var graf = Charts.newAreaChart();
newBarChart() Crea un nou diagrama de barres (horitzontals) var graf = Charts.newBarChart();
newColumnChart() Crea un nou diagrama de columnes (barres verticals) var graf = Charts.newColumnChart();
newScatterChart() Crea un nou diagrama de dispersió var graf = Charts.newScatterChart();
newLineChart() Crea un nou diagrama de línies var graf = Charts.newLineChart();
newPieChart() Crea un nou diagrama circular (de pastís) var graf = Charts.newPieChart();
newTableChart() Crea una visualització en forma de taula var graf = Charts.newTableChart();
setDataTable(taula) Assigna una taula de dades al gràfic graf.setDataTable(taula_dades);
build() Genera un objecte que conté el diagrama var grafic = graf.build();

Les comandes per particularitzar l'aspecte d'un gràfic són les que es llisten a continuació. A la primera columna hi hem indicat, amb una lletra, a quins tipus de gràfics estan disponibles. Les opcions són: àrees (A), barres (B), columnes (C), dispersió (D), línies (L), pastís (P) o taula (T)

Tipus Funció Descripció Exemple
ABCD
LPT		 setDimensions(ample, alt) Estableix les mides del gràfic graf.setDimensions(700, 500);
ABCL useLogScale() Fa que l'eix de valors sigui logarítmic
Cal que els valors siguin tots positius		 graf.useLogScale();
P setXAxisLogScale() Fa que l'eix horitzontal sigui logarítmic
Cal que els valors siguin tots positius		 graf.setXAxisLogScale();
P setYAxisLogScale() Fa que l'eix vertical sigui logarítmic
Cal que els valors siguin tots positius		 graf.setYAxisLogScale();
ABC setStacked() Fa que les dades es mostrin apilades (sumant els valors) graf.setStacked();
ABC
DLP		 setTitle(tit) Defineix el títol del gràfic graf.setTitle("Estoc i comandes");
ABC
DL		 setXAxisTitle(tit) Defineix el títol de l'eix horitzontal graf.setXAxisTitle("Dia");
ABC
DL		 setYAxisTitle(tit) Defineix el títol de l'eix vertical graf.setYAxisTitle("Percentatge");
ABC
DLP		 setBackgroundColor(color) Estableix el color de fons ★ graf.setBackgroundColor("#FFFF00");
graf.setBackgroundColor("LawnGreen");
ABC
DLP		 setColors([col1, col2, ...]) Estableix el color que correspon a cada columna de dades ★
Cal un vector amb tantes components com barres
o com sectors en el de pastís		 graf.setColors(["green", "#FF0000"]);
ABC
DLP		 setLegendPosition(pos) Estableix la posició de la llegenda del gràfic graf.setLegendPosition(Charts.Position.TOP);
graf.setLegendPosition(Charts.Position.RIGHT);
graf.setLegendPosition(Charts.Position.BOTTOM);
graf.setLegendPosition(Charts.Position.NONE);
ABC
DLP		 setLegendTextStyle(estil) Defineix l'estil de la llegenda
(vegeu una taula més avall)		 graf.setLegendTextStyle(est);
ABC
DLP		 setTitleTextStyle(estil) Defineix l'estil del títol
(vegeu una taula més avall)		 graf.setTitleTextStyle(est);
ABC
DL		 setXAxisTextStyle(estil) Defineix l'estil del text de l'eix horitzontal
(vegeu una taula més avall)		 graf.setXAxisTextStyle(est);
ABC
DL		 setYAxisTextStyle(estil) Defineix l'estil del text de l'eix vertical
(vegeu una taula més avall)		 graf.setYAxisTextStyle(est);
ABC
DL		 setXAxisTitleTextStyle(estil) Defineix l'estil del títol de l'eix horitzontal
(vegeu una taula més avall)		 graf.setXAxisTitleTextStyle(est);
ABC
DL		 setYAxisTitleTextStyle(estil) Defineix l'estil del títol de l'eix vertical
(vegeu una taula més avall)		 graf.setYAxisTitleTextStyle(est);
ADL setPointStyle(punts) Defineix com es mostren els punts a la gràfica graf.setPointStyle(Charts.PointStyle.NONE);
graf.setPointStyle(Charts.PointStyle.TINY);
graf.setPointStyle(Charts.PointStyle.MEDIUM);
graf.setPointStyle(Charts.PointStyle.LARGE);
graf.setPointStyle(Charts.PointStyle.HUGE);
L setCurveStyle(corba) Estableix si la corba és amb salts bruscos o suavitzada graf.setCurveStyle(Charts.CurveStyle.NORMAL);
graf.setCurveStyle(Charts.CurveStyle.SMOOTH);
P set3D() Fa que el pastís tingui gruix graf.set3D();
T enablePaging(bool) Admet separar la taula per pàgines graf.enablePaging(true);
graf.enablePaging(false);
T enablePaging(val) Admet separar la taula per pàgines
definint el nombre de línies per pàgina		 graf.enablePaging(15);
T enableSorting(bool) Admet que l'usuari pugui triar per quina columna s'ordena graf.enableSorting(true);
graf.enableSorting(false)
T setInitialSortingAscending(col) Fixa que inicialment la taula es mostri ordenada,
en forma ascendent, per la columna indicada		 graf.setInitialSortingAscending(2);
T setInitialSortingDescending(col) Fixa que inicialment la taula es mostri ordenada,
en forma descendent, per la columna indicada		 graf.setInitialSortingDescending(2);
T showRowNumberColumn(bool) Definim si es mostra una columna addicional a l'esquerra
amb el número de línia		 graf.showRowNumberColumn(true);
graf.showRowNumberColumn(false);
T useAlternatingRowStyle(bool) Definim si les fileres es mostren en colors alterns graf.useAlternatingRowStyle(true);
graf.useAlternatingRowStyle(false);

★ El color pot estar definit per tres xifres hexadecimals o amb un dels noms d'aquesta pàgina.

Les comandes per a la creació d'estils són:

Funció Descripció Exemple
newTextStyle() Crea un nou estil var estil = Charts.newTextStyle();
setColor(color) Estableix el color de la lletra ★ estil.setColor("#0000FF");
setFontSize(mida) Estableix la mida de la lletra estil.setFontSize(26);
setFontName(font) Estableix la font del text estil.setFontName("Calibri");
build() Genera un objecte que conté l'estil var est = estil.build();

★ El color pot estar definit per tres xifres hexadecimals o amb un dels noms d'aquesta pàgina.

Un cop tinguem generat el gràfic, tenim algunes comandes per obtenir el gràfic en diferents formats:

Funció Descripció Exemple
getBlob() Proporciona el gràfic en format binari (BLOB) var grafic_blob = graf.getBlob();
getAs(format) Crea una imatge en el format indicat var img = graf.getAs("image/png");
var img = graf.getAs("image/jpeg");
var img = graf.getAs("image/gif");

En aquest exemple mostrem com crear un diagrama de columnes (barres verticals) i com podria ser de barres, línies o àrees. En aquest altre exemple mostrem com crear un diagrama tipus pastís i en aquest un diagrama de dispersió.

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.