{"id":84482,"date":"2015-05-13T10:18:02","date_gmt":"2015-05-13T09:18:02","guid":{"rendered":"https:\/\/artigianodelsoftware.wordpress.com\/?p=84482"},"modified":"2015-05-13T10:18:02","modified_gmt":"2015-05-13T09:18:02","slug":"grafici-su-confluence","status":"publish","type":"post","link":"https:\/\/artigianodelsoftware.it\/blog\/2015\/05\/13\/grafici-su-confluence\/","title":{"rendered":"Grafici su Confluence"},"content":{"rendered":"<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-top-right\"><a href=\"javascript: imageToPdf()\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_self\"><img src=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"Visualizza PDF\" \/><\/a><a href=\"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/posts\/84482?print=print\" class=\"pdfprnt-button pdfprnt-button-print\" target=\"_blank\"><\/a><\/div><blockquote>\n<h1>Inseriamo dei grafici<\/h1>\n<\/blockquote>\n<p>In questo post andremo a vedere come inserire dei grafici su di una pagina di Confluence Cloud. Non si tratta della macro chart, che Confluence mette a disposizione, ma di grafici creati su dati esterni.<\/p>\n<p><a href=\"http:\/\/www.sastgroup.com\/images\/googleapichart.gif\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"http:\/\/www.sastgroup.com\/images\/googleapichart.gif\" alt=\"\" width=\"450\" height=\"285\" \/><\/a><\/p>\n<blockquote>\n<h1>Di cosa abbiamo bisogno<\/h1>\n<\/blockquote>\n<p>Non sono necessarie molte componenti. Cerchiamo di riassumerle \ud83d\ude42<\/p>\n<ul>\n<li>Confluence Cloud<\/li>\n<li><a href=\"https:\/\/marketplace.atlassian.com\/plugins\/com.playsql.createyourown\">CYO Create-Your-Own<\/a>\u00a0addon per Confluence Cloud<\/li>\n<li><a title=\"Google Charts\" href=\"https:\/\/google-developers.appspot.com\/chart\/\" target=\"_blank\">Google Charts<\/a><\/li>\n<li><a title=\"Google Spreadsheet\" href=\"https:\/\/docs.google.com\/spreadsheet\/\" target=\"_blank\">Google Spreadsheet<\/a><\/li>\n<\/ul>\n<p>Confluence sar\u00e0 il nostro contenitore, che funger\u00e0 da punto centrale di tutte le informazioni. CYO, addon gi\u00e0 esaminato in diverse altre occasioni, dove ne abbiamo saggiato la potenza, ci consente di poter fare da tramite per poter aggiungere i grafici su Confluence.<\/p>\n<p>Google Spreadsheet sar\u00e0 la nostra sorgente dati, mentre useremo Google Charts per poter creare i grafici :-).<\/p>\n<p><a href=\"http:\/\/www.claningame.com\/wp-content\/uploads\/2012\/06\/grafici-a-torta.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"http:\/\/www.claningame.com\/wp-content\/uploads\/2012\/06\/grafici-a-torta.jpg\" alt=\"\" width=\"362\" height=\"400\" \/><\/a><\/p>\n<blockquote>\n<h1>Procediamo<\/h1>\n<\/blockquote>\n<p>Come prima cosa, impostiamo i dati su di un google spreadsheet. Nel nostro esempio inseriamo i dati dei rifornimento di benzina che ho sostenuto da gennaio 2015 in avanti.<\/p>\n<p><a href=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina01.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-87141\" src=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina01.png\" alt=\"benzina01\" width=\"466\" height=\"255\" srcset=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina01.png 466w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina01-300x164.png 300w\" sizes=\"(max-width: 466px) 100vw, 466px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Una volta impostato il google spreadsheet, possiamo inserirlo sulla pagina, come gi\u00e0 spiegato su questo <a title=\"Scheda carburante via Confluence\" href=\"https:\/\/artigianodelsoftware.wordpress.com\/2015\/01\/17\/scheda-carburante-via-confluence\/\">post<\/a>, ma adesso possiamo anche fare in maniera tale di poter generare dei grafici :-P. Andiamo ad esaminare come.<\/p>\n<p>Sempre attraverso lo stesso sistema utilizzato, possiamo aggiungere anche un grafico, sfruttando le potenzialit\u00e0 che Google Charts mette a disposizione.<\/p>\n<p><a href=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina02.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-87142\" src=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina02.png?w=660\" alt=\"benzina02\" width=\"660\" height=\"236\" srcset=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina02.png 1165w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina02-300x107.png 300w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina02-768x274.png 768w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina02-1024x366.png 1024w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>Semplicemente andiamo ad aggiungere il codice javascript per poter richiamare le API di google, eseguendo una banale <a title=\"Query\" href=\"https:\/\/google-developers.appspot.com\/chart\/interactive\/docs\/querylanguage\" target=\"_blank\">query<\/a> sullo spreadsheet precedentemente impostato.<\/p>\n<p>La query che si imposta si basa sulle colonne del foglio elettronico (colonne che sono nominate da <em><strong>A, B, C, &#8230; Z,<\/strong><\/em> etc.). Fare riferimento al <a title=\"Query\" href=\"https:\/\/google-developers.appspot.com\/chart\/interactive\/docs\/querylanguage\" target=\"_blank\">link<\/a> per maggiori dettagli.<\/p>\n<p>Basandosi sull&#8217;esempio indicato sopra, la query ha la seguente struttura<\/p>\n<blockquote>\n<pre><em>select B, sum(C) where C&gt;0 group by B\n<\/em><\/pre>\n<\/blockquote>\n<p>ovvero cerchiamo di identificare i consumi per mese :-P.<\/p>\n<p>Una volta impostata la macro nella pagina confluence, come mostrato in figura<\/p>\n<p><a href=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/01\/benzina03.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-19686\" src=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/01\/benzina03.png\" alt=\"benzina03\" width=\"531\" height=\"127\" srcset=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/01\/benzina03.png 531w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/01\/benzina03-300x72.png 300w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/a><\/p>\n<p>Il risultato che otteniamo \u00e8 il seguente:<\/p>\n<p><a href=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina03-risultato.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-87144\" src=\"https:\/\/artigianodelsoftware.files.wordpress.com\/2015\/05\/benzina03-risultato.png?w=660\" alt=\"benzina03-risultato\" width=\"660\" height=\"279\" srcset=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina03-risultato.png 1271w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina03-risultato-300x127.png 300w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina03-risultato-768x324.png 768w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina03-risultato-1024x433.png 1024w, https:\/\/artigianodelsoftware.it\/blog\/wp-content\/uploads\/2015\/05\/benzina03-risultato-1200x507.png 1200w\" sizes=\"(max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<blockquote>\n<h1>Conclusioni<\/h1>\n<\/blockquote>\n<p>Abbiamo visto come collegare dei grafici, interfacciando le API che google mette a disposizione degli utenti, e utilizzando gli spreadsheet come fonte dati. Nei prossimi post, cercheremo di approfondire l&#8217;argomento, cercando di portare ulteriori novit\u00e0 \ud83d\ude42<\/p>\n<div class=\"clearfix\"><span class='ldc-ul_cont' onclick=\"alter_ul_post_values(this,'84482','like')\" >Likes<img src=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/plugins\/like-dislike-counter-for-posts-pages-and-comments\/images\/up.png\" \/>(<span>0<\/span>)<\/span><span class='ldc-ul_cont' onclick=\"alter_ul_post_values(this,'84482','dislike')\" >Dislikes<img src=\"https:\/\/artigianodelsoftware.it\/blog\/wp-content\/plugins\/like-dislike-counter-for-posts-pages-and-comments\/images\/down.png\" \/>(<span>0<\/span>)<\/span><\/div>","protected":false},"excerpt":{"rendered":"<p>Inseriamo dei grafici In questo post andremo a vedere come inserire dei grafici su di una pagina di Confluence Cloud. Non si tratta della macro chart, che Confluence mette a disposizione, ma di grafici creati su dati esterni. Di cosa<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[3,4,7,22],"tags":[30,34,35,48,56,58,82,89],"_links":{"self":[{"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/posts\/84482"}],"collection":[{"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/comments?post=84482"}],"version-history":[{"count":0,"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/posts\/84482\/revisions"}],"wp:attachment":[{"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/media?parent=84482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/categories?post=84482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artigianodelsoftware.it\/blog\/wp-json\/wp\/v2\/tags?post=84482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}