Chartist.js è una libreria JavaScript Open Source pensata per creare grafici e mappe basati sull’uso del formato di grafica vettoriale SVG, un progetto nato dalla insoddisfazione dell’autore (Gion Kunz) per i prodotti della concorrenza e le scelte a suo dire sbagliate che sono alla loro base. (more...)

Continua a leggere Chartist, mappe e grafici responsivi in JavaScript ed SVG

Categoria: Grafica

Qualche giorno fa un amico mi ha mostrato fiero il suo iPad, magnificandone gli aspetti positivi e lamentando di fatto un solo, vero problema: la mancanza di Flash. L'amico in questione è uno che lavora con Google Analytics ed essendo l'interfaccia di quel servizio fortemente basata su Flash, soprattutto per la generazione dei grafici, lo sfogo è comprensibile. Quelli di Campaign Monitor devono aver avvertito, evidentemente, il problema. Se i nostri clienti hanno necessità  o voglia di consultare dati e statistiche con un iPad, che facciamo? Li lasciamo a piedi o proviamo una via alternativa? Questa la strada seguita. Tutti i grafici del servizio sono stati convertiti da Flash a Javascript, sfruttando una libreria ricca e potente come Highcharts. Funziona? Pare di sì. A testimoniarlo questo breve video.

Continua a leggere Grafici, da Flash a Javascript nel nome dell’iPad

Categoria: Scripting

Open Flash Chart 2

10 Maggio
di napolux

Open Flash Chart 2 è la nuova versione di un componente Flash che permette di creare facilmente grafici interattivi nelle nostre pagine web basati su oggetti JSON. Come funziona? Basta inserire il file SWF del componente all'interno della nostra pagina web e passare come parametro GET alla pagina il file JSON contenente i dati e la configurazione del nostro grafico. (more...)

Continua a leggere Open Flash Chart 2

Categoria: Adobe World

Tags: ,
di Kiko

Il web è il posto ideale per pubblicare contenuti interattivi. Pensate agli articoli tecnici o alle lezioni online. Se prima ci si affidava quasi esclusivamente ad Applet Java o alla tecnologia Flash, oggi si può fare completo affidamento alle librerie Javascript sempre più complete e sempre più potenti. jQuery offre ampie soluzioni e in questo blog continuiamo a pubblicare interessanti link. Anche oggi proseguiamo con questa ricerca e vi segnaliamo un articolo pubblicato su 1stwebdesigner. L'articolo in questione prende in esame ben 5 librerie dedicate alla produzione di grafici interattivi: torte, grafici a barre, istogrammi e plotting. Tutte rilasciate con licenze libere.

Continua a leggere Grafici interattivi con jQuery

Categoria: Scripting

Tags: ,

In principio furono le Google Charts API. Copio e incollo da post con cui presentavamo quasi tre anni fa questo tool: Si tratta di un modo semplice e immediato per inserire grafici all'interno di pagine web. Meglio: per inserire immagini PNG che rappresentano in forma di grafico i dati passati all'applicazione di Google. Basta usare nel modo consueto il tag img e usare come valore di src la chiamata alle API sotto forma di un URL che contiene i parametri necessari alla generazione del grafico. Esempio: E codice usato: <img src="http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=250x100& chl=January|February|March|April" alt="grafico" /> (more...)

Continua a leggere Grafici semplici e interattivi con Google Chart Tools

Categoria: Software e Servizi

Tags: ,

Due veloci segnalazioni per librerie Javascript dedicate alla creazione di grafici interattivi. La prima è per dygraphs, un progetto open source che consente nello specifico la produzione di grafici di serie temporali. Il tutto è prodotto con un uso esteso di canvas (garantito il supporto a IE6 grazie di excanvas). I grafici generati sono zoomabili e intarattivi. Ricchissima la serie di esempi visualizzabili a partire dalla pagine principale del progetto. Highcharts si presenta in una veste sicuramente più accattivante, sia per il sito sia per la qualità  grafica dei grafici prodotti. Si appoggia a MooTools o jQuery per le funzionalità  Javascript più comuni e fa anch'essa uso di canvas per la parte relativa al disegno. Anche per Highcharts è disponibile sul sito una galleria di demo molto nutrita. L'uso della libreria è libero per siti personali o di organizzazioni no-profit. La licenza costa invece $80 per usi commerciali su un solo sito o $360 per l'uso su più siti. Maggiori dettagli su questa pagina.natural for lasix

Continua a leggere Librerie Javascript per la creazione di grafici

Categoria: Scripting

jqPlot è un plug-in per il framework jQuery che, come indica il nome, permette di generare diversi tipi di grafici, tra cui gli immancabili line charts e bar charts. Le caratteristiche interessanti si incontrano quando andiamo ad analizzare le feature offerte, come ad esempio la possibilità  di trascinare i punti del grafico con l'auto-aggiornamento dello stesso, la presenza di ombreggiatura sugli elementi del grafico, la possibilità  di includere una moltitudine di tracciati in un'unica presentazione (interamente customizzabili dall'utente tramite CSS), la possibilità  di ruotare il testo e molto altro. jqPlot offre una documentazione davvero dettagliata cosi come una sezione per le demo molto nutrita. Infine, come riportato sul sito ufficiale, jqPlot è testato con IE 6, IE 7, IE 8, Firefox, Safari ed Opera.

Continua a leggere jqPlot: grafici con jQuery

Categoria: Scripting

Tags: , ,

Nonostante il nome possa indurre a crederlo, Protovis non è un plug-in per il framework Prototype, ma uno script standalone che, mediante un complesso utilizzo della tecnologia Canvas, permette di traformare i dati numerici in molteplici rappresentazioni grafiche. Nonostante sia ancora nelle sue prime fasi di vita, Protovis promette davvero bene: tramite le numerose demo è possibile percepirne le potenzialità . Lo script è attualmente compatibile con i browser di ultima generazione (Firefox 3, Chrome e Safari 4) ed è rilasciato sotto licenza BSD.

Continua a leggere Protovis: ancora grafici con Javascript

Categoria: Scripting

Sono stati resi noti i risultati dell'annuale sondaggio promosso da A List Apart per fare il punto della situazione sulle professioni legate al web design. La messe di dati è veramente enorme e si entra nel dettaglio su tantissimi aspetti, dai salari alle skill fino alle questioni legate ai titoli di studio o all'alternativa tra lavoro dipendente o come freelance. Un aspetto interessante è che quest'anno i risultati sono stati diffusi attraverso un sito ad hoc dietro il quale c'è la mano di designer quotati come Jason Santa Maria ed Eric Meyer. A quest'ultimo, in particolare, si deve il lavoro sui CSS che ha reso possibile, senza ricorrere a Javascript, di creare le decine di grafici allegati. L'invito è quello di dare un'occhiata al codice sorgente (noterete che si tratta di un utilizzo intelligente di tabelle, div e paragrafi). Meyer ha postato sul suo blog alcune considerazioni al riguardo.

Continua a leggere A List Apart Survey 2008: i risultati

Categoria: Web Design

Il nuovo articolo di Alen Grakalic apparso su CSSGlobe.com denominato Pure CSS Line Graph, ha notevolmente catturato la mia attenzione, essendo uno dei pochi post che si pongono l' obiettivo di mostrare tutta la potenza offerta dai semplici CSS. Dopo il precedente articolo (Pure CSS Data Chart) che spiegava come creare "semplici" grafici unicamente avvalendosi dei fogli di stile, Alen ha voluto spingersi ad un livello superiore: creare Line Graphs. Per quanto complicata possa sembrare, la tecnica presentata si basa principalmente su pochi elementi HTML (dl, dd, span), classi CSS ed un'immagine che permette di simulare la creazione delle varie linee. Oltre alle corpose spiegazioni, nell'articolo sono presenti molte immagini che mostrano i risultati in azione e soprattutto i file sorgenti degli esempi presentati. Molto probabilmente questa tecnica verrà  ignorata dalla maggior parte degli sviluppatori, dato che esistono controparti in Javascript e simili che offrono maggiore controllo e soprattutto maggiore rapidità  in fase di creazione (senza contare che ancora non sono a conoscenza di quanto ampia sia la browser compatibility della tecnica in questione). Tuttavia, come nel caso di una mia vecchia segnalazione contenente un link ad una risorsa che mostrava come creare Homer Simpson con i CSS, è importante notare come con l'uso dei semplici CSS sia possibile raggiungere risultati davvero notevoli.

Continua a leggere Creare Line Graphs con i CSS

Categoria: CSS

Tags: ,